material-date-range-picker: Add an option to disable maintaining the length of the date range when clicking on the calendar to move the start date.

By default, the previous behavior is kept.

If this option is set to false, moving the start date after the end date will collapse the range into a single day (the one you just clicked). This mirrors the existing behavior (shared by both configurations) where moving the end date after the start date collapses the range into a single day.

The following related behaviors are unchanged, regardless of configuration:

* Changing the end date already doesn't change the start date.
* Clicking-and-dragging the range endpoints always moves them independently. Dragging one endpoint past the other endpoint does not collapse the range, but rather allows the old start date to become the new end date (or vice versa).

Also update the demo to showcase some of the newer preset types (Quarter and Broadcast month).

PiperOrigin-RevId: 208853492

Author: cpelling

lib/material_datepicker/calendar.dart

@@ -4,6 +4,7 @@
 
 import 'package:collection/collection.dart';
 import 'package:intl/intl.dart';
+import 'package:meta/meta.dart';
 import 'package:angular_components/model/date/date.dart';
 
 part '../src/material_datepicker/calendar/day.dart';

lib/material_datepicker/config.dart

@@ -0,0 +1,14 @@
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+/// Global configuration options for datepicker components.
+class DatepickerConfig {
+  /// For date range selection, whether clicking to move the start date should
+  /// also move the end date (preserving the length of the selected range).
+  ///
+  /// Defaults to true. No effect on single-date calendars.
+  final bool movingStartMaintainsLength;
+
+  DatepickerConfig({this.movingStartMaintainsLength = true});
+}

lib/material_datepicker/date_range_editor.dart

@@ -127,6 +127,13 @@ class DateRangeEditorComponent implements OnInit, AfterViewInit, Focusable {
 
   bool _compact = false;
 
+  /// For date range selection, whether clicking to move the start date should
+  /// also move the end date (preserving the length of the selected range).
+  ///
+  /// Defaults to true, unless an enclosing component has a different default.
+  @Input()
+  bool movingStartMaintainsLength = true;
+
   /// Whether or not this editor includes a section to input 'N days up to
   /// today' and 'N days up to yesterday' ranges.
   ///

lib/material_datepicker/date_range_editor.html

@@ -157,6 +157,7 @@
                               [maxDate]="maxDate"
                               [allowHighlightUpdates]="allowHighlightUpdates"
                               [compact]="compact"
+                              [movingStartMaintainsLength]="movingStartMaintainsLength"
                               (visibleMonth)="onVisibleMonthChange"
                               mode="date-range">
     </material-calendar-picker>

lib/material_datepicker/material_calendar_picker.dart

@@ -245,6 +245,23 @@ class MaterialCalendarPickerComponent
   bool get compact => _compact;
   bool _compact = false;
 
+  /// For date range selection, whether clicking to move the start date should
+  /// also move the end date (preserving the length of the selected range).
+  ///
+  /// Defaults to true, unless an enclosing component has a different default.
+  @Input()
+  set movingStartMaintainsLength(bool value) {
+    _movingStartMaintainsLength = value;
+
+    // Must recreate the input listener when this changes. If it wasn't already
+    // created, we must be executing before [ngOnInit], so defer to later.
+    if (_inputListener != null) {
+      _initInputListener();
+    }
+  }
+
+  bool _movingStartMaintainsLength = true;
+
   /// What sort of interaction this calendar supports.
   CalendarSelectionMode get mode => _mode;
   CalendarSelectionMode _mode = CalendarSelectionMode.NONE;
@@ -575,7 +592,8 @@ class MaterialCalendarPickerComponent
       // Simulate applying the selection to get the [CalendarSelection] that
       // would be created if it were actually applied. Since [CalendarState] is
       // immutable, this doesn't modify any state.
-      var previewState = state.confirmPreview();
+      var previewState = state.confirmPreview(
+          movingStartMaintainsLength: _movingStartMaintainsLength);
       var previewRange = previewState
           .selection(previewState.currentSelection)
           .clamp(min: minDate, max: maxDate);
@@ -725,11 +743,16 @@ class MaterialCalendarPickerComponent
   void ngOnInit() {
     _calendarStream = _model.stream.listen(_onCalendarChange);
 
+    _initInputListener();
+  }
+
+  void _initInputListener() {
     if (_mode == CalendarSelectionMode.SINGLE_DATE) {
       _inputListener = CalendarListener.singleDate(_model);
     }
     if (_mode == CalendarSelectionMode.DATE_RANGE) {
-      _inputListener = CalendarListener.dateRange(_model);
+      _inputListener = CalendarListener.dateRange(_model,
+          movingStartMaintainsLength: _movingStartMaintainsLength);
     }
   }
 

lib/material_datepicker/material_date_grid_base.dart

@@ -151,7 +151,8 @@ abstract class MaterialDateGridBase
       _inputListener = CalendarListener.singleDate(model);
     }
     if (mode == CalendarSelectionMode.DATE_RANGE) {
-      _inputListener = CalendarListener.dateRange(model);
+      _inputListener =
+          CalendarListener.dateRange(model, movingStartMaintainsLength: true);
     }
     _disposer.addDisposable(_inputListener);
 

lib/material_datepicker/material_date_range_picker.dart

@@ -19,6 +19,7 @@ import 'package:angular_components/laminate/popup/popup.dart';
 import 'package:angular_components/material_button/material_button.dart';
 import 'package:angular_components/material_datepicker/comparison.dart';
 import 'package:angular_components/material_datepicker/comparison_option.dart';
+import 'package:angular_components/material_datepicker/config.dart';
 import 'package:angular_components/material_datepicker/date_range_editor.dart';
 import 'package:angular_components/material_datepicker/module.dart';
 import 'package:angular_components/material_datepicker/next_prev_buttons.dart';
@@ -206,6 +207,20 @@ class MaterialDateRangePickerComponent extends KeyboardHandlerMixin
 
   bool _compact = !window.matchMedia("(pointer: coarse)").matches;
 
+  /// For date range selection, whether clicking to move the start date should
+  /// also move the end date (preserving the length of the selected range).
+  ///
+  /// Defaults to [DatepickerConfig.movingStartMaintainsLength] if a
+  /// [DatepickerConfig] object is provided through dependency injection.
+  @Input()
+  set movingStartMaintainsLength(bool value) {
+    _movingStartMaintainsLength = value;
+  }
+
+  get movingStartMaintainsLength =>
+      _movingStartMaintainsLength ?? _config.movingStartMaintainsLength;
+  bool _movingStartMaintainsLength;
+
   /// The label for the 'Apply' button. Set this variable only if you want a
   /// different label other than 'Apply'. If set, the input label should be
   /// internationalized.
@@ -344,6 +359,7 @@ class MaterialDateRangePickerComponent extends KeyboardHandlerMixin
 
   final DomService _domService;
   final NgZone _ngZone;
+  final DatepickerConfig _config;
 
   /// CSS classes from the root element, passed to the popup to allow scoping of
   /// mixins.
@@ -354,11 +370,13 @@ class MaterialDateRangePickerComponent extends KeyboardHandlerMixin
   MaterialDateRangePickerComponent(
       @Optional() @Inject(datepickerClock) Clock clock,
       Clock legacyClock,
+      @Optional() DatepickerConfig config,
       @Attribute('popupClass') String popupClass,
       HtmlElement element,
       this._domService,
       this._ngZone)
-      : popupClassName = constructEncapsulatedCss(popupClass, element.classes) {
+      : _config = config ?? DatepickerConfig(),
+        popupClassName = constructEncapsulatedCss(popupClass, element.classes) {
     // TODO(google): Migrate to use only datepickerClock
     clock ??= legacyClock;
 

lib/material_datepicker/material_date_range_picker.html

@@ -60,6 +60,7 @@
                          [maxDate]="maxDate"
                          [allowHighlightUpdates]="allowHighlightUpdates"
                          [compact]="compact"
+                         [movingStartMaintainsLength]="movingStartMaintainsLength"
                          [calendarCreated]="isCalendarCreated"
                          [supportsCustomRange]="supportsCustomRange"
                          [relativeDaysToToday]="relativeDaysToToday"

lib/material_datepicker/material_month_picker.dart

@@ -274,7 +274,10 @@ class MaterialMonthPickerComponent
     if (_mode == CalendarSelectionMode.SINGLE_DATE) {
       _inputListener = CalendarListener.singleDate(_model);
     } else if (_mode == CalendarSelectionMode.DATE_RANGE) {
-      _inputListener = CalendarListener.dateRange(_model);
+      // TODO(google): Add support for movingStartMaintainsLength==false if
+      // we see use cases for month range picking.
+      _inputListener =
+          CalendarListener.dateRange(_model, movingStartMaintainsLength: true);
     }
   }
 

lib/material_datepicker/range.dart

@@ -883,8 +883,6 @@ DatepickerDateRange lastQuarter(Clock clock) =>
 DatepickerDateRange allTime = DatepickerDateRange(_allTimeMsg, null, null,
     isPredefined: true, isAllTime: true);
 
-// TODO(google): AWN no longer uses thisYear and lastYear. Check cross-team
-// to see if we should remove those entries from commonRanges as well.
 List<DatepickerDateRange> commonRanges(Clock clock) => [
       today(clock),
       yesterday(clock),