Add Material Datepicker components to open source release.

PiperOrigin-RevId: 189415606

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.9.0-alpha+8
+
+> NOTE: This code is considered production quality, but depends on angular:
+> 5.0.0-alpha+8. The alpha tag represents the evolving nature of the AngularDart
+> API, not code quality (5.0.0-alpha+8 is used in production Google apps).
+
+ * Add Material Datepicker components.
+
 ## 0.9.0-alpha+7
 
 > NOTE: This code is considered production quality, but depends on angular:

lib/angular_components.dart

@@ -20,14 +20,23 @@ import 'glyph/glyph.dart';
 import 'highlighted_text/highlighted_text.dart';
 import 'highlighted_text/highlighted_value.dart';
 import 'laminate/components/modal/modal.dart';
-import 'laminate/popup/module.dart';
 import 'laminate/popup/popup.dart';
 import 'material_button/material_button.dart';
 import 'material_button/material_fab.dart';
 import 'material_checkbox/material_checkbox.dart'
     show MaterialCheckboxComponent;
 import 'material_chips/material_chip.dart';
 import 'material_chips/material_chips.dart';
+import 'material_datepicker/date_input.dart';
+import 'material_datepicker/date_range_editor.dart';
+import 'material_datepicker/date_range_input.dart';
+import 'material_datepicker/material_calendar_picker.dart';
+import 'material_datepicker/material_date_range_picker.dart';
+import 'material_datepicker/material_date_time_picker.dart';
+import 'material_datepicker/material_datepicker.dart';
+import 'material_datepicker/material_month_picker.dart';
+import 'material_datepicker/material_time_picker.dart';
+import 'material_datepicker/module.dart';
 import 'material_dialog/material_dialog.dart';
 import 'material_expansionpanel/material_expansionpanel.dart';
 import 'material_expansionpanel/material_expansionpanel_auto_dismiss.dart';
@@ -57,6 +66,7 @@ import 'material_ripple/material_ripple.dart';
 import 'material_select/display_name.dart';
 import 'material_select/dropdown_button.dart';
 import 'material_select/material_dropdown_select.dart';
+import 'material_select/material_dropdown_select_accessor.dart';
 import 'material_select/material_select.dart';
 import 'material_select/material_select_dropdown_item.dart';
 import 'material_select/material_select_item.dart';
@@ -107,6 +117,21 @@ export 'material_checkbox/material_checkbox.dart'
     show MaterialCheckboxComponent;
 export 'material_chips/material_chip.dart';
 export 'material_chips/material_chips.dart';
+export 'material_datepicker/calendar.dart';
+export 'material_datepicker/comparison.dart';
+export 'material_datepicker/date_input.dart';
+export 'material_datepicker/date_range_editor.dart';
+export 'material_datepicker/date_range_input.dart';
+export 'material_datepicker/material_calendar_picker.dart';
+export 'material_datepicker/material_date_range_picker.dart';
+export 'material_datepicker/material_date_time_picker.dart';
+export 'material_datepicker/material_datepicker.dart';
+export 'material_datepicker/material_month_picker.dart';
+export 'material_datepicker/material_time_picker.dart';
+export 'material_datepicker/model.dart';
+export 'material_datepicker/module.dart';
+export 'material_datepicker/next_prev_buttons.dart';
+export 'material_datepicker/preset.dart';
 export 'material_dialog/material_dialog.dart';
 export 'material_expansionpanel/material_expansionpanel.dart';
 export 'material_expansionpanel/material_expansionpanel_auto_dismiss.dart';
@@ -142,6 +167,7 @@ export 'material_select/activation_handler.dart';
 export 'material_select/display_name.dart';
 export 'material_select/dropdown_button.dart';
 export 'material_select/material_dropdown_select.dart';
+export 'material_select/material_dropdown_select_accessor.dart';
 export 'material_select/material_select.dart';
 export 'material_select/material_select_base.dart';
 export 'material_select/material_select_dropdown_item.dart';
@@ -166,6 +192,7 @@ export 'mixins/has_tab_index.dart';
 export 'mixins/highlight_assistant_mixin.dart';
 export 'mixins/material_dropdown_base.dart';
 export 'mixins/track_layout_changes.dart';
+export 'model/date/date.dart';
 export 'model/selection/select.dart';
 export 'model/selection/selection_model.dart';
 export 'model/selection/selection_options.dart';
@@ -191,8 +218,12 @@ const List<dynamic> materialDirectives = const [
   CheckNonNegativeValidator,
   ClickableTooltipTargetDirective,
   DarkThemeDirective,
+  DateInputDirective,
+  DateRangeEditorComponent,
+  DateRangeInputComponent,
   DeferredContentDirective,
   displayNameRendererDirective,
+  DropdownSelectValueAccessor,
   DropdownButtonComponent,
   DropdownMenuComponent,
   DynamicComponent,
@@ -209,9 +240,13 @@ const List<dynamic> materialDirectives = const [
   LowerBoundValidator,
   MaterialAutoSuggestInputComponent,
   MaterialButtonComponent,
+  MaterialCalendarPickerComponent,
   MaterialCheckboxComponent,
   MaterialChipComponent,
   MaterialChipsComponent,
+  MaterialDatepickerComponent,
+  MaterialDateRangePickerComponent,
+  MaterialDateTimePickerComponent,
   MaterialDialogComponent,
   MaterialDropdownSelectComponent,
   MaterialExpansionPanel,
@@ -229,6 +264,7 @@ const List<dynamic> materialDirectives = const [
   MaterialListComponent,
   MaterialListItemComponent,
   MaterialMenuComponent,
+  MaterialMonthPickerComponent,
   MaterialMultilineInputComponent,
   materialNumberInputDirectives,
   MaterialPaperTooltipComponent,
@@ -246,6 +282,7 @@ const List<dynamic> materialDirectives = const [
   MaterialSpinnerComponent,
   MaterialTabComponent,
   MaterialTabPanelComponent,
+  MaterialTimePickerComponent,
   MaterialTemporaryDrawerComponent,
   MaterialTreeComponent,
   MaterialTreeDropdownComponent,
@@ -256,6 +293,7 @@ const List<dynamic> materialDirectives = const [
   MaterialYesNoButtonsComponent,
   MenuPopupComponent,
   MenuRootDirective,
+  MultiDropdownSelectValueAccessor,
   ModalComponent,
   NgModel,
   PositiveNumValidator,
@@ -271,5 +309,5 @@ const List<dynamic> materialDirectives = const [
 
 /// A convenience list of all providers exposed by this package.
 const List<dynamic> materialProviders = const [
-  popupBindings,
+  datepickerBindings,
 ];

lib/material_datepicker/_constants.scss

@@ -0,0 +1,68 @@
+// 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.
+
+// CSS constants for datepicker components.
+@import 'package:angular_components/css/material/material';
+
+// Hopefully this never changes
+$days-per-week: 7;
+
+// The scrollbar width varies between 4px (material style in Chrome) and 17px
+// (system style IE). This number is choosen to be in the middle, so in Chrome
+// it doesn't look like there's extra padding on the right, while in IE the
+// scrollbar doesn't overlap with the dates.
+$cal-scrollbar-width: $mat-grid;
+
+// Line width of the circle around the current date
+$cal-today-border-width: 1px;
+
+// Months can have up to 6 partial weeks. We also may need space for a
+// title, but a 6-week month will always have an inline title.
+// (Proof: Longest month is 31 days. 28 of those days will appear in the
+// middle 4 weeks, leaving 3 days. To reach 6 weeks, there must be at least
+// 1 day before and after the middle 4 weeks. Therefore there can be at
+// most 2 days in the first week, giving enough space for an inline title.)
+$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;
+$cal-horizontal-padding: $mat-grid;
+$cal-width: $cal-date-size * $days-per-week
+  + $cal-scrollbar-width;
+
+/// Compact calendar sizes.
+$cal-date-compact-size: 36px; // DUPLICATED: material_calendar_picker.dart
+$cal-title-compact-padding: $mat-grid-type * 3;
+$cal-compact-horizontal-padding: $mat-grid;
+$cal-compact-width: $cal-date-compact-size * $days-per-week
+  + $cal-scrollbar-width;
+
+/// The margin between the highlight and the edge of the cell.
+$cal-highlight-margin: 2px;
+
+/// Picker sizes.
+$picker-horizontal-padding: $mat-grid * 3;
+$picker-vertical-padding: $mat-grid * 2;
+
+/// Compact picker sizes.
+$picker-compact-horizontal-padding: $mat-grid-type * 5;
+$picker-compact-vertical-padding: $mat-grid * 2;
+
+/// material-date-range-picker whitespace.
+$date-range-picker-horizontal-padding: 2 * $mat-grid;
+$date-range-picker-vertical-padding: 10px;
+
+/// Color for drop shadows.
+$cal-shadow-color: rgba(0, 0, 0, .26);
+
+/// Custom tab under basic mode.
+$cal-basic-custom-margin: 9px;
+$cal-basic-custom-line-height: 17px;