fixup! feat(material/core): switch option implementation to use MDC

Author: crisbeto

.github/CODEOWNERS

@@ -69,6 +69,8 @@
 /src/material/legacy-core/density/**                   @devversion
 /src/material/legacy-core/theming/**                   @andrewseguin @jelbourn
 /src/material/legacy-core/typography/**                @crisbeto
+/src/material/legacy-core/option/**                    @crisbeto
+/src/material/legacy-core/testing/**                   @crisbeto
 
 # Miscellaneous components
 /src/google-maps/**                                    @crisbeto

src/dev-app/mdc-checkbox/BUILD.bazel

@@ -12,8 +12,8 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-checkbox",
-        "//src/material-experimental/mdc-core",
         "//src/material-experimental/mdc-select",
+        "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
         "@npm//@angular/forms",

src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts

@@ -11,7 +11,7 @@ import {MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
-import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material-experimental/mdc-core';
+import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {CommonModule} from '@angular/common';

src/dev-app/mdc-chips/BUILD.bazel

@@ -13,8 +13,8 @@ ng_module(
         "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-checkbox",
         "//src/material-experimental/mdc-chips",
-        "//src/material-experimental/mdc-core",
         "//src/material/card",
+        "//src/material/core",
         "//src/material/form-field",
         "//src/material/icon",
         "//src/material/toolbar",

src/dev-app/mdc-chips/mdc-chips-demo.ts

@@ -9,7 +9,7 @@
 import {Component} from '@angular/core';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {CommonModule} from '@angular/common';
-import {ThemePalette} from '@angular/material-experimental/mdc-core';
+import {ThemePalette} from '@angular/material/core';
 import {
   MatChipInputEvent,
   MatChipEditedEvent,

src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {ThemePalette} from '@angular/material-experimental/mdc-core';
+import {ThemePalette} from '@angular/material/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatProgressBarModule} from '@angular/material/progress-bar';

src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {ThemePalette} from '@angular/material-experimental/mdc-core';
+import {ThemePalette} from '@angular/material/core';
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';

src/dev-app/mdc-select/mdc-select-demo.ts

@@ -8,7 +8,7 @@
 
 import {Component} from '@angular/core';
 import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {ErrorStateMatcher, ThemePalette} from '@angular/material-experimental/mdc-core';
+import {ErrorStateMatcher, ThemePalette} from '@angular/material/core';
 import {MatSelectChange, MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {FloatLabelType} from '@angular/material/form-field';
 import {CommonModule} from '@angular/common';

src/material-experimental/config.bzl

@@ -8,6 +8,7 @@ entryPoints = [
     "mdc-checkbox/testing",
     "mdc-chips",
     "mdc-chips/testing",
+    "mdc-core",
     "mdc-dialog",
     "mdc-dialog/testing",
     "mdc-list",

src/material-experimental/mdc-autocomplete/BUILD.bazel

@@ -16,8 +16,8 @@ ng_module(
     deps = [
         "//src/cdk/overlay",
         "//src/cdk/scrolling",
-        "//src/material/core",
         "//src/material/autocomplete",
+        "//src/material/core",
         "@npm//@angular/common",
     ],
 )

src/material-experimental/mdc-autocomplete/testing/BUILD.bazel

@@ -10,8 +10,8 @@ ts_library(
     ),
     deps = [
         "//src/cdk/testing",
-        "//src/material/core/testing",
         "//src/material/autocomplete/testing",
+        "//src/material/core/testing",
     ],
 )
 

src/material-experimental/mdc-button/BUILD.bazel

@@ -27,7 +27,7 @@ ng_module(
     ] + glob(["**/*.html"]),
     deps = [
         "//src/cdk/platform",
-        "//src/material-experimental/mdc-core",
+        "//src/material/core",
     ],
 )
 
@@ -99,8 +99,8 @@ ng_test_library(
         ":mdc-button",
         "//src/cdk/platform",
         "//src/cdk/testing/private",
-        "//src/material-experimental/mdc-core",
         "//src/material/button",
+        "//src/material/core",
         "@npm//@angular/platform-browser",
     ],
 )

src/material-experimental/mdc-button/button-base.ts

@@ -16,7 +16,7 @@ import {
   mixinColor,
   mixinDisabled,
   mixinDisableRipple,
-} from '@angular/material-experimental/mdc-core';
+} from '@angular/material/core';
 import {FocusOrigin} from '@angular/cdk/a11y';
 
 /** Inputs common to all buttons. */

src/material-experimental/mdc-button/button.spec.ts

@@ -2,7 +2,7 @@ import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {ApplicationRef, Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MatButtonModule, MatButton, MatFabDefaultOptions, MAT_FAB_DEFAULT_OPTIONS} from './index';
-import {MatRipple, ThemePalette} from '@angular/material-experimental/mdc-core';
+import {MatRipple, ThemePalette} from '@angular/material/core';
 import {createMouseEvent, dispatchEvent} from '@angular/cdk/testing/private';
 
 describe('MDC-based MatButton', () => {

src/material-experimental/mdc-button/fab.ts

@@ -27,7 +27,7 @@ import {
   MAT_BUTTON_INPUTS,
   MatButtonBase,
 } from './button-base';
-import {ThemePalette} from '@angular/material-experimental/mdc-core';
+import {ThemePalette} from '@angular/material/core';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 
 /** Default FAB options that can be overridden. */

src/material-experimental/mdc-button/module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatCommonModule, MatRippleModule} from '@angular/material-experimental/mdc-core';
+import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatAnchor, MatButton} from './button';
 import {MatFabAnchor, MatFabButton, MatMiniFabAnchor, MatMiniFabButton} from './fab';
 import {MatIconAnchor, MatIconButton} from './icon-button';

src/material-experimental/mdc-checkbox/BUILD.bazel

@@ -22,8 +22,8 @@ ng_module(
     assets = [":checkbox_scss"] + glob(["**/*.html"]),
     deps = [
         "//src/cdk/coercion",
-        "//src/material-experimental/mdc-core",
         "//src/material/checkbox",
+        "//src/material/core",
         "@npm//@angular/animations",
         "@npm//@angular/core",
         "@npm//@angular/forms",
@@ -62,8 +62,8 @@ ng_test_library(
         ":mdc-checkbox",
         "//src/cdk/testing/private",
         "//src/cdk/testing/testbed",
-        "//src/material-experimental/mdc-core",
         "//src/material/checkbox",
+        "//src/material/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
     ],

src/material-experimental/mdc-checkbox/checkbox.spec.ts

@@ -1,7 +1,7 @@
 import {dispatchFakeEvent} from '../../cdk/testing/private';
 import {ChangeDetectionStrategy, Component, DebugElement, Type} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed} from '@angular/core/testing';
-import {ThemePalette} from '@angular/material-experimental/mdc-core';
+import {ThemePalette} from '@angular/material/core';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index';

src/material-experimental/mdc-checkbox/checkbox.ts

@@ -24,7 +24,7 @@ import {
   MatCheckboxDefaultOptions,
   _MatCheckboxBase,
 } from '@angular/material/checkbox';
-import {CanColor, CanDisable} from '@angular/material-experimental/mdc-core';
+import {CanColor, CanDisable} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 export const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any = {

src/material-experimental/mdc-checkbox/module.ts

@@ -8,7 +8,7 @@
 
 import {NgModule} from '@angular/core';
 import {_MatCheckboxRequiredValidatorModule} from '@angular/material/checkbox';
-import {MatCommonModule, MatRippleModule} from '@angular/material-experimental/mdc-core';
+import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatCheckbox} from './checkbox';
 
 @NgModule({

src/material-experimental/mdc-chips/BUILD.bazel

@@ -23,7 +23,7 @@ ng_module(
     ] + glob(["**/*.html"]),
     deps = [
         "//src:dev_mode_types",
-        "//src/material-experimental/mdc-core",
+        "//src/material/core",
         "//src/material/form-field",
         "@npm//@angular/animations",
         "@npm//@angular/common",
@@ -77,7 +77,7 @@ ng_test_library(
         "//src/cdk/platform",
         "//src/cdk/testing",
         "//src/cdk/testing/private",
-        "//src/material-experimental/mdc-core",
+        "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
         "@npm//@angular/animations",

src/material-experimental/mdc-chips/chip-action.ts

@@ -9,7 +9,7 @@
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ENTER, SPACE} from '@angular/cdk/keycodes';
 import {Directive, ElementRef, Inject, Input} from '@angular/core';
-import {HasTabIndex, mixinTabIndex} from '@angular/material-experimental/mdc-core';
+import {HasTabIndex, mixinTabIndex} from '@angular/material/core';
 import {MAT_CHIP} from './tokens';
 
 abstract class _MatChipActionBase {

src/material-experimental/mdc-chips/chip-grid.ts

@@ -33,11 +33,7 @@ import {
   NgForm,
   Validators,
 } from '@angular/forms';
-import {
-  CanUpdateErrorState,
-  ErrorStateMatcher,
-  mixinErrorState,
-} from '@angular/material-experimental/mdc-core';
+import {CanUpdateErrorState, ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
 import {MatFormFieldControl} from '@angular/material/form-field';
 import {MatChipTextControl} from './chip-text-control';
 import {Observable, Subject, merge} from 'rxjs';

src/material-experimental/mdc-chips/chip-option.spec.ts

@@ -2,10 +2,7 @@ import {Directionality} from '@angular/cdk/bidi';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {Component, DebugElement, ViewChild} from '@angular/core';
 import {waitForAsync, ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
-import {
-  MAT_RIPPLE_GLOBAL_OPTIONS,
-  RippleGlobalOptions,
-} from '@angular/material-experimental/mdc-core';
+import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
 import {Subject} from 'rxjs';
 import {

src/material-experimental/mdc-chips/chip-row.ts

@@ -26,10 +26,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
-import {
-  MAT_RIPPLE_GLOBAL_OPTIONS,
-  RippleGlobalOptions,
-} from '@angular/material-experimental/mdc-core';
+import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core';
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {MatChip, MatChipEvent} from './chip';
 import {MatChipEditInput} from './chip-edit-input';

src/material-experimental/mdc-chips/chip-set.ts

@@ -22,7 +22,7 @@ import {
   QueryList,
   ViewEncapsulation,
 } from '@angular/core';
-import {HasTabIndex, mixinTabIndex} from '@angular/material-experimental/mdc-core';
+import {HasTabIndex, mixinTabIndex} from '@angular/material/core';
 import {merge, Observable, Subject} from 'rxjs';
 import {startWith, switchMap, takeUntil} from 'rxjs/operators';
 import {MatChip, MatChipEvent} from './chip';

src/material-experimental/mdc-chips/chip.spec.ts

@@ -1,7 +1,7 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {Component, DebugElement, ViewChild} from '@angular/core';
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatRipple} from '@angular/material-experimental/mdc-core';
+import {MatRipple} from '@angular/material/core';
 import {By} from '@angular/platform-browser';
 import {Subject} from 'rxjs';
 import {MatChip, MatChipEvent, MatChipSet, MatChipsModule} from './index';

src/material-experimental/mdc-chips/chip.ts

@@ -39,7 +39,7 @@ import {
   mixinTabIndex,
   mixinDisabled,
   RippleGlobalOptions,
-} from '@angular/material-experimental/mdc-core';
+} from '@angular/material/core';
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {Subject} from 'rxjs';
 import {take} from 'rxjs/operators';

src/material-experimental/mdc-chips/module.ts

@@ -9,11 +9,7 @@
 import {ENTER} from '@angular/cdk/keycodes';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {
-  ErrorStateMatcher,
-  MatCommonModule,
-  MatRippleModule,
-} from '@angular/material-experimental/mdc-core';
+import {ErrorStateMatcher, MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatChip} from './chip';
 import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './tokens';
 import {MatChipEditInput} from './chip-edit-input';

src/material-experimental/mdc-core/BUILD.bazel

@@ -1,9 +1,6 @@
 load(
     "//tools:defaults.bzl",
     "ng_module",
-    "ng_test_library",
-    "ng_web_test_suite",
-    "sass_binary",
     "sass_library",
 )
 
@@ -32,25 +29,3 @@ sass_library(
         "//src/material/core:core_scss_lib",
     ],
 )
-
-#################
-#  Test targets
-#################
-
-ng_test_library(
-    name = "unit_test_sources",
-    srcs = glob(
-        ["**/*.spec.ts"],
-    ),
-    deps = [
-        ":mdc-core",
-        "//src/cdk/keycodes",
-        "//src/cdk/testing/private",
-        "@npm//@angular/platform-browser",
-    ],
-)
-
-ng_web_test_suite(
-    name = "unit_tests",
-    deps = [":unit_test_sources"],
-)

src/material-experimental/mdc-core/_core-theme.scss

@@ -7,6 +7,9 @@
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
 
+  @include mat.option-color($config);
+  @include mat.optgroup-color($config);
+
   @if $config != null {
     // Provides external CSS classes for each elevation value. Each CSS class is formatted as
     // `mat-mdc-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the
@@ -36,10 +39,16 @@
 @mixin typography($config-or-theme) {
   $config: mat.private-typography-to-2018-config(
     mat.get-typography-config($config-or-theme));
+
+  @include mat.option-typography($config-or-theme);
+  @include mat.optgroup-typography($config-or-theme);
 }
 
 @mixin density($config-or-theme) {
   $density-scale: mat.get-density-config($config-or-theme);
+
+  @include mat.private-option-density($density-scale);
+  @include mat.private-optgroup-density($density-scale);
 }
 
 // Mixin that renders all of the core styles that depend on the theme.

src/material-experimental/mdc-core/public-api.ts

@@ -54,6 +54,12 @@ export {
   ShowOnDirtyErrorStateMatcher,
   ThemePalette,
   VERSION,
+  MatOptionModule,
+  MatOptionSelectionChange,
+  MatOption,
+  MatOptgroup,
+  MatOptionParentComponent,
+  MAT_OPTION_PARENT_COMPONENT,
   // Note: These need to be exposed privately for cross-package type inference. e.g. if the
   // experimental package uses a mixin, TS will try to write an explicit type reference that
   // is equivalent to e.g. `CanColorCtor`. For this it needs these two helpers as otherwise it

src/material-experimental/mdc-dialog/BUILD.bazel

@@ -21,7 +21,7 @@ ng_module(
     deps = [
         "//src/cdk/overlay",
         "//src/cdk/portal",
-        "//src/material-experimental/mdc-core",
+        "//src/material/core",
         "//src/material/dialog",
         "@npm//@material/dialog",
     ],