feat(material/core): switch option implementation to use MDC (#25343)

Switches the implementation of `mat-option` and `mat-optgroup` to use MDC by default.

BREAKING CHANGE:
* DOM and CSS classes for `mat-option` and `mat-optgroup` have changed.
* Typescript API is largely the same but may have minor differences

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/_index.scss

@@ -17,10 +17,6 @@
 // MDC-related themes
 @forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color,
   mdc-core-density, mdc-core-typography;
-@forward './mdc-core/option/option-theme' as mdc-option-* show mdc-option-color,
-  mdc-option-typography, mdc-option-density, mdc-option-theme;
-@forward './mdc-core/option/optgroup-theme' as mdc-optgroup-* show mdc-optgroup-color,
-  mdc-optgroup-typography, mdc-optgroup-density, mdc-optgroup-theme;
 @forward './mdc-autocomplete/autocomplete-theme' as mdc-autocomplete-* show mdc-autocomplete-color,
   mdc-autocomplete-typography, mdc-autocomplete-density, mdc-autocomplete-theme;
 @forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography,

src/material-experimental/config.bzl

@@ -9,7 +9,6 @@ entryPoints = [
     "mdc-chips",
     "mdc-chips/testing",
     "mdc-core",
-    "mdc-core/testing",
     "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-experimental/mdc-core",
         "//src/material/autocomplete",
+        "//src/material/core",
         "@npm//@angular/common",
     ],
 )
@@ -58,7 +58,7 @@ ng_test_library(
         "//src/cdk/platform",
         "//src/cdk/scrolling",
         "//src/cdk/testing/private",
-        "//src/material-experimental/mdc-core",
+        "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
         "@npm//@angular/forms",

src/material-experimental/mdc-autocomplete/autocomplete-trigger.ts

@@ -9,10 +9,7 @@
 import {Directive, forwardRef} from '@angular/core';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
 import {_MatAutocompleteTriggerBase} from '@angular/material/autocomplete';
-import {
-  _countGroupLabelsBeforeOption,
-  _getOptionScrollPosition,
-} from '@angular/material-experimental/mdc-core';
+import {_countGroupLabelsBeforeOption, _getOptionScrollPosition} from '@angular/material/core';
 
 /**
  * Provider that allows the autocomplete to register as a ControlValueAccessor.

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

@@ -36,7 +36,7 @@ import {
   tick,
 } from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatOption, MatOptionSelectionChange} from '@angular/material-experimental/mdc-core';
+import {MatOption, MatOptionSelectionChange} from '@angular/material/core';
 import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {By} from '@angular/platform-browser';

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

@@ -18,7 +18,7 @@ import {
   MAT_OPTION_PARENT_COMPONENT,
   MatOptgroup,
   MatOption,
-} from '@angular/material-experimental/mdc-core';
+} from '@angular/material/core';
 import {_MatAutocompleteBase} from '@angular/material/autocomplete';
 import {panelAnimation} from './animations';
 

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

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatCommonModule, MatOptionModule} from '@angular/material-experimental/mdc-core';
+import {MatCommonModule, MatOptionModule} from '@angular/material/core';
 import {CommonModule} from '@angular/common';
 import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {OverlayModule} from '@angular/cdk/overlay';

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

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

src/material-experimental/mdc-autocomplete/testing/autocomplete-harness.ts

@@ -12,7 +12,7 @@ import {
   MatOptionHarness,
   OptgroupHarnessFilters,
   OptionHarnessFilters,
-} from '@angular/material-experimental/mdc-core/testing';
+} from '@angular/material/core/testing';
 import {_MatAutocompleteHarnessBase} from '@angular/material/autocomplete/testing';
 import {AutocompleteHarnessFilters} from './autocomplete-harness-filters';
 

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';