Move to using PopupSizeProvider instead of CSS inside the popup to control the height of the date range picker.

Keeping the existing maximum height of 600px for now, for backwards compatibility.

Also implements a WithinViewportPopupSizeProvider and accompanying directive, for use in non-scrolling areas, as I need this for my use case.

PiperOrigin-RevId: 220886736

Author: cpelling

angular_components/lib/material_datepicker/_constants.scss

@@ -28,9 +28,6 @@ $week-rows-in-month: 6; // DUPLICATED: material_calendar_picker.dart
 $icon-size: $mat-grid * 3;
 $icon-button-size: $icon-size;
 
-// Max-height of the entire preset list
-$preset-list-max-height: $mat-grid * 67;
-
 /// Regular calendar sizes.
 $cal-date-size: 48px; // DUPLICATED: material_calendar_picker.dart
 $cal-title-padding: $mat-grid-type * 3;

angular_components/lib/material_datepicker/date_range_editor.scss

@@ -28,10 +28,6 @@
   overflow-x: hidden;
   overflow-y: auto;
 
-  // Stops the date-range-editor from increasing its height to match a
-  // lengthy preset list.
-  max-height: $preset-list-max-height;
-
   .group {
     padding: $date-range-picker-vertical-padding 0;
     border-bottom: 1px solid $mat-gray-300;

angular_components/lib/material_datepicker/material_date_range_picker.dart

@@ -37,6 +37,10 @@ import 'package:angular_components/utils/disposer/disposer.dart';
 /// Custom date range formatter interface.
 typedef RangeFormatter = String Function(DateRange range);
 
+/// Default height of the date range picker, if no [PopupSizeProvider] is
+/// provided.
+const _defaultMaxHeight = 600;
+
 /// A material-design-styled date range picker.
 ///
 /// Users can choose preset date ranges, type in custom date ranges, or select
@@ -53,6 +57,10 @@ typedef RangeFormatter = String Function(DateRange range);
 /// (The [DatepickerModel] class is also provided to make using it easier in
 /// dependency injection.)
 ///
+/// To control the size of the popup, provide a [PopupSizeProvider] through
+/// dependency injection. If no PopupSizeProvider is provided, the maximum
+/// height of the popup is 600px.
+///
 /// __Attributes:__
 ///
 /// - `popupClass` -- Class to be added to the range picker popup so that the
@@ -76,9 +84,9 @@ typedef RangeFormatter = String Function(DateRange range);
     FocusTrapComponent,
   ],
   providers: [
-    Provider(DateRangeEditorHost,
-        useExisting: MaterialDateRangePickerComponent),
-    Provider(HasDisabled, useExisting: MaterialDateRangePickerComponent),
+    ExistingProvider(DateRangeEditorHost, MaterialDateRangePickerComponent),
+    ExistingProvider(HasDisabled, MaterialDateRangePickerComponent),
+    ExistingProvider(PopupSizeProvider, MaterialDateRangePickerComponent),
   ],
 )
 class MaterialDateRangePickerComponent extends KeyboardHandlerMixin
@@ -87,9 +95,11 @@ class MaterialDateRangePickerComponent extends KeyboardHandlerMixin
         OnInit,
         AfterChanges,
         OnDestroy,
-        DateRangeEditorHost {
+        DateRangeEditorHost,
+        PopupSizeProvider {
   DateRangeEditorComponent _dateRangeEditor;
   bool _focusOnDateRangeEditorInit = false;
+  PopupSizeProvider _popupSizeProvider;
 
   List<RelativePosition> get overlapAlignments =>
       RelativePosition.overlapAlignments;
@@ -377,6 +387,7 @@ class MaterialDateRangePickerComponent extends KeyboardHandlerMixin
       Clock legacyClock,
       @Optional() DatepickerConfig config,
       @Attribute('popupClass') String popupClass,
+      @Optional() @SkipSelf() this._popupSizeProvider,
       HtmlElement element,
       this._domService,
       this._ngZone)
@@ -508,6 +519,23 @@ class MaterialDateRangePickerComponent extends KeyboardHandlerMixin
     });
   }
 
+  @override
+  num getMaxHeight(num positionY, num viewportHeight) =>
+      _popupSizeProvider?.getMaxHeight(positionY, viewportHeight) ??
+      _defaultMaxHeight;
+
+  // Width and min-height are unconstrained by default (return null), but
+  // do delegate to the popupSizeProvider if one is provided.
+  @override
+  num getMaxWidth(num positionX, num viewportWidth) =>
+      _popupSizeProvider?.getMaxWidth(positionX, viewportWidth);
+  @override
+  num getMinHeight(num positionY, num viewportHeight) =>
+      _popupSizeProvider?.getMinHeight(positionY, viewportHeight);
+  @override
+  num getMinWidth(num positionX, num viewportWidth) =>
+      _popupSizeProvider?.getMinWidth(positionX, viewportWidth);
+
   @override
   void handleEscapeKey(KeyboardEvent event) {
     close();

angular_components/lib/src/laminate/popup/popup_size_provider.dart

@@ -64,6 +64,30 @@ class PercentagePopupSizeProvider implements PopupSizeProvider {
       viewportHeight * _maxHeightPercentage;
 }
 
+/// Constrains popups to fit within the viewport's bottom and right edges.
+///
+/// This assumes that the position of the popup source does not change, and is
+/// intended for use in cases where the popup source is not within a scrollable
+/// area. Since it controls only the size and not the position, it works best
+/// for popups that open to the bottom and right of the anchor.
+class WithinViewportPopupSizeProvider implements PopupSizeProvider {
+  static const _paddingPixels = 8;
+
+  @override
+  num getMaxHeight(num positionY, num viewportHeight) =>
+      viewportHeight - positionY - _paddingPixels;
+
+  @override
+  num getMaxWidth(num positionX, num viewportWidth) =>
+      viewportWidth - positionX - _paddingPixels;
+
+  @override
+  num getMinHeight(num positionY, num viewportHeight) => null;
+
+  @override
+  num getMinWidth(num positionX, num viewportWidth) => null;
+}
+
 /// Provides a popup size with a fixed maximum width and height in pixels.
 ///
 /// A null value for max width or max height indicates no limit.

angular_components/lib/src/laminate/popup/popup_size_provider_directive.dart

@@ -109,3 +109,10 @@ class _PercentSizeDefinition implements _SizeDefinition {
   @override
   num getPixels(num viewportSize) => viewportSize * _percent / 100;
 }
+
+/// Applies a [WithinViewportPopupSizeProvider] to the attached element and
+/// its descendants.
+@Directive(selector: '[popupWithinViewport]', providers: [
+  ClassProvider(PopupSizeProvider, useClass: WithinViewportPopupSizeProvider)
+])
+class PopupWithinViewportDirective {}

examples/material_datepicker_example/lib/material_date_range_picker_demo.dart

@@ -4,6 +4,7 @@
 
 import 'package:angular/angular.dart';
 import 'package:quiver/time.dart';
+import 'package:angular_components/laminate/popup/popup.dart';
 import 'package:angular_components/material_checkbox/material_checkbox.dart';
 import 'package:angular_components/material_datepicker/comparison.dart';
 import 'package:angular_components/material_datepicker/date_range_input.dart';
@@ -45,7 +46,8 @@ List<DatepickerPreset> manyPresets(Clock clock) => [
     MaterialCheckboxComponent,
     MaterialDateRangePickerComponent,
     NgIf,
-    DateRangeInputComponent
+    DateRangeInputComponent,
+    PopupSizeProviderDirective,
   ],
   styleUrls: ['material_date_range_picker_demo.scss.css'],
   templateUrl: 'material_date_range_picker_demo.html',

examples/material_datepicker_example/lib/material_date_range_picker_demo.html

@@ -18,8 +18,9 @@ <h4>Options</h4>
       Maintain range length when moving start date
     </material-checkbox>
     <div class="limit-label">Limit to date range:</div>
-    <date-range-input [(range)]="limitToRange"></date-range-input>
+    <date-range-input class="range-limit" [(range)]="limitToRange"></date-range-input>
     <div class="selection-label">The current selection is: {{range}}</div>
+    <div class="height-info">This picker's popup is restricted to 50% of the screen height.</div>
   </div>
   <div>
     <material-date-range-picker
@@ -29,6 +30,8 @@ <h4>Options</h4>
        [supportsComparison]="supportsComparison"
        [showNextPrevButtons]="showNextPrevButtons"
        [movingStartMaintainsLength]="movingStartMaintainsLength"
+       popupMaxWidth="1000px"
+       popupMaxHeight="50%"
        [(range)]="range">
       <div *ngIf="showMessageBar" messageBar class="message-bar">
         Custom message

examples/material_datepicker_example/lib/material_date_range_picker_demo.scss

@@ -26,13 +26,13 @@ h4 {
   margin: $mat-grid $mat-grid 0;
 }
 
-date-range-input {
-  display: inline-flex;
-  width: 100%;
+.range-limit {
+  margin: 0 $mat-grid;
 }
 
-.selection-label {
-  margin: 0 $mat-grid;
+.selection-label,
+.height-info {
+  margin: $mat-grid;
 }
 
 .simplified-example {