@angular/material 10.0.0-rc.3 → 10.1.0

package/bundles/material-datepicker.umd.js

@@ -2822,8 +2822,15 @@
                 this._valueChange.emit(date);
                 this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
             }
-            else if (lastValueWasValid !== this._lastValueValid) {
-                this._validatorOnChange();
+            else {
+                // Call the CVA change handler for invalid values
+                // since this is what marks the control as dirty.
+                if (value && !this.value) {
+                    this._cvaOnChange(date);
+                }
+                if (lastValueWasValid !== this._lastValueValid) {
+                    this._validatorOnChange();
+                }
             }
         };
         MatDatepickerInputBase.prototype._onChange = function () {
@@ -3303,8 +3310,6 @@
                             '(change)': '_onChange()',
                             '(keydown)': '_onKeydown($event)',
                             '[attr.id]': '_rangeInput.id',
-                            '[attr.aria-labelledby]': '_rangeInput._ariaLabelledBy',
-                            '[attr.aria-describedby]': '_rangeInput._ariaDescribedBy',
                             '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
                             '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
                             '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
@@ -3376,8 +3381,6 @@
                             '(input)': '_onInput($event.target.value)',
                             '(change)': '_onChange()',
                             '(keydown)': '_onKeydown($event)',
-                            '[attr.aria-labelledby]': '_rangeInput._ariaLabelledBy',
-                            '[attr.aria-describedby]': '_rangeInput._ariaDescribedBy',
                             '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
                             '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
                             '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
@@ -3466,8 +3469,6 @@
             this._groupDisabled = false;
             /** Value for the `aria-describedby` attribute of the inputs. */
             this._ariaDescribedBy = null;
-            /** Value for the `aria-labelledby` attribute of the inputs. */
-            this._ariaLabelledBy = null;
             /** Separator text to be shown between the inputs. */
             this.separator = '–';
             /** Start of the comparison range that should be shown in the calendar. */
@@ -3481,7 +3482,6 @@
             }
             // TODO(crisbeto): remove `as any` after #18206 lands.
             this.ngControl = control;
-            this._ariaLabelledBy = _formField ? _formField._labelId : null;
         }
         Object.defineProperty(MatDateRangeInput.prototype, "value", {
             /** Current value of the range input. */
@@ -3668,6 +3668,7 @@
         };
         /** Handles the value in one of the child inputs changing. */
         MatDateRangeInput.prototype._handleChildValueChange = function () {
+            this.stateChanges.next();
             this._changeDetectorRef.markForCheck();
         };
         /** Opens the date range picker associated with the input. */
@@ -3680,6 +3681,11 @@
         MatDateRangeInput.prototype._shouldHideSeparator = function () {
             return (!this._formField || this._formField._hideControlPlaceholder()) && this.empty;
         };
+        /** Gets the value for the `aria-labelledby` attribute of the inputs. */
+        MatDateRangeInput.prototype._getAriaLabelledby = function () {
+            var formField = this._formField;
+            return formField && formField._hasFloatingLabel() ? formField._labelId : null;
+        };
         /**
          * @param obj The object to check.
          * @returns The given object if it is both a date instance and valid, otherwise null.
@@ -3714,6 +3720,9 @@
                             'class': 'mat-date-range-input',
                             '[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',
                             '[attr.id]': 'null',
+                            'role': 'group',
+                            '[attr.aria-labelledby]': '_getAriaLabelledby()',
+                            '[attr.aria-describedby]': '_ariaDescribedBy',
                         },
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
@@ -3721,7 +3730,7 @@
                             { provide: formField.MatFormFieldControl, useExisting: MatDateRangeInput },
                             { provide: MAT_DATE_RANGE_INPUT_PARENT, useExisting: MatDateRangeInput },
                         ],
-                        styles: [".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{margin:0 4px;transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-separator-hidden{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent;transition:none}.mat-date-range-input-inner{font:inherit;background:transparent;color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;-webkit-appearance:none;width:100%}.mat-date-range-input-inner::-ms-clear,.mat-date-range-input-inner::-ms-reveal{display:none}.mat-date-range-input-inner::placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-moz-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-webkit-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner:-ms-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-date-range-input-start-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-start-wrapper .mat-date-range-input-inner{position:absolute;top:0;left:0}.mat-date-range-input-end-wrapper{flex-grow:1;max-width:calc(50% - 4px)}.mat-form-field-type-mat-date-range-input .mat-form-field-infix{width:200px}\n"]
+                        styles: [".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{transition:opacity 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);margin:0 4px}.mat-date-range-input-separator-hidden{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:none}.mat-date-range-input-inner{font:inherit;background:transparent;color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;-webkit-appearance:none;width:100%}.mat-date-range-input-inner::-ms-clear,.mat-date-range-input-inner::-ms-reveal{display:none}.mat-date-range-input-inner::placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-moz-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-webkit-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner:-ms-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:transparent !important;-webkit-text-fill-color:transparent;transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-date-range-input-start-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-start-wrapper .mat-date-range-input-inner{position:absolute;top:0;left:0}.mat-date-range-input-end-wrapper{flex-grow:1;max-width:calc(50% - 4px)}.mat-form-field-type-mat-date-range-input .mat-form-field-infix{width:200px}\n"]
                     },] }
         ];
         MatDateRangeInput.ctorParameters = function () { return [
@@ -3729,7 +3738,7 @@
             { type: i0.ElementRef },
             { type: forms.ControlContainer, decorators: [{ type: i0.Optional }, { type: i0.Self }] },
             { type: core.DateAdapter, decorators: [{ type: i0.Optional }] },
-            { type: formField.MatFormField, decorators: [{ type: i0.Optional }] }
+            { type: formField.MatFormField, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [formField.MAT_FORM_FIELD,] }] }
         ]; };
         MatDateRangeInput.propDecorators = {
             rangePicker: [{ type: i0.Input }],