From 73e5618e60791c675ec93539da5342c72d88ea98 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 10 Jun 2020 15:48:58 +0200 Subject: [PATCH 1/2] build: add size-test for date-range-picker without form-field --- goldens/size-test.yaml | 1 + .../datepicker/range-picker/BUILD.bazel | 7 +++++ .../range-picker/without-form-field.ts | 30 +++++++++++++++++++ 3 files changed, 38 insertions(+) create mode 100644 integration/size-test/material/datepicker/range-picker/BUILD.bazel create mode 100644 integration/size-test/material/datepicker/range-picker/without-form-field.ts diff --git a/goldens/size-test.yaml b/goldens/size-test.yaml index ab4c6b264bc0..d25c6c6e87e0 100644 --- a/goldens/size-test.yaml +++ b/goldens/size-test.yaml @@ -1,3 +1,4 @@ material/list/nav-list: 130473 material/radio/without-group: 121448 material/menu/without-lazy-content: 210751 +material/datepicker/range-picker/without-form-field: 362213 diff --git a/integration/size-test/material/datepicker/range-picker/BUILD.bazel b/integration/size-test/material/datepicker/range-picker/BUILD.bazel new file mode 100644 index 000000000000..8acc49078791 --- /dev/null +++ b/integration/size-test/material/datepicker/range-picker/BUILD.bazel @@ -0,0 +1,7 @@ +load("//integration/size-test:index.bzl", "size_test") + +size_test( + name = "without-form-field", + file = "without-form-field.ts", + deps = ["//src/material/datepicker"], +) diff --git a/integration/size-test/material/datepicker/range-picker/without-form-field.ts b/integration/size-test/material/datepicker/range-picker/without-form-field.ts new file mode 100644 index 000000000000..e894be528a96 --- /dev/null +++ b/integration/size-test/material/datepicker/range-picker/without-form-field.ts @@ -0,0 +1,30 @@ +import {Component, NgModule} from '@angular/core'; +import {platformBrowser} from '@angular/platform-browser'; +import {MatDatepickerModule} from '@angular/material/datepicker'; + +/** + * Basic component using `MatDateRangePicker` with `MatDatepickerToggle`. Form fields + * are optionally used in combination with the date-range input, so we expect that to + * be tree-shaken away in this example. Similarly the standard datepicker input directive + * should be omitted. + */ +@Component({ + template: ` + + + + + + + `, +}) +export class TestComponent {} + +@NgModule({ + imports: [MatDatepickerModule], + declarations: [TestComponent], + bootstrap: [TestComponent], +}) +export class AppModule {} + +platformBrowser().bootstrapModule(AppModule); From bd25e46c446792e7f8c66424a07cc139e966d2cf Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Mon, 15 Jun 2020 14:46:44 +0200 Subject: [PATCH 2/2] refactor: use light-weight token for form-field in range-picker input The date range picker could be used outside the `MatFormField` component in practice. Right now though, the date-picker input always has a hard-reference on the `MatFormField` component, causing it to be retained. This would be the same in View Engine, but with Ivy this signifies a larger size issue as factories/definitions are directly attached to the component. To allow for better tree-shaking / optimizations, we use the form-field light-weight injection token, so that the date range picker can be used outside of a form-field with minimal cost. Related to: #19576. --- goldens/size-test.yaml | 2 +- src/material/datepicker/date-range-input.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/goldens/size-test.yaml b/goldens/size-test.yaml index d25c6c6e87e0..baa4c6f5cc9c 100644 --- a/goldens/size-test.yaml +++ b/goldens/size-test.yaml @@ -1,4 +1,4 @@ material/list/nav-list: 130473 material/radio/without-group: 121448 material/menu/without-lazy-content: 210751 -material/datepicker/range-picker/without-form-field: 362213 +material/datepicker/range-picker/without-form-field: 330101 diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts index 0070bba47479..80dac58902bf 100644 --- a/src/material/datepicker/date-range-input.ts +++ b/src/material/datepicker/date-range-input.ts @@ -18,8 +18,9 @@ import { ChangeDetectorRef, Self, ElementRef, + Inject, } from '@angular/core'; -import {MatFormFieldControl, MatFormField} from '@angular/material/form-field'; +import {MatFormFieldControl, MatFormField, MAT_FORM_FIELD} from '@angular/material/form-field'; import {ThemePalette, DateAdapter} from '@angular/material/core'; import {NgControl, ControlContainer} from '@angular/forms'; import {Subject, merge} from 'rxjs'; @@ -206,7 +207,7 @@ export class MatDateRangeInput implements MatFormFieldControl>, private _elementRef: ElementRef, @Optional() @Self() control: ControlContainer, @Optional() private _dateAdapter: DateAdapter, - @Optional() private _formField?: MatFormField) { + @Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField) { if (!_dateAdapter) { throw createMissingDateImplError('DateAdapter');