refactor(select): Sync MDC v6.0.0 changes (#2245)

closes #2243

Author: trimox

demos/src/app/components/select/examples.html

@@ -10,10 +10,6 @@ <h3 class="demo-content__headline">Select</h3>
     <button mdc-button
       (click)="standardSelect.disabled = !standardSelect.disabled">Disabled:
       {{standardSelect.disabled ? 'On' : 'Off'}}</button>
-    <button mdc-button
-      (click)="standardSelect.floatLabel = !standardSelect.floatLabel">Float
-      Label: {{standardSelect.floatLabel ? 'On' :
-      'Off'}}</button>
     <button mdc-button
       (click)="standardSelect.setSelectionByValue('banana')">Select
       Banana</button>
@@ -68,9 +64,6 @@ <h3 class="demo-content__headline">Leading Icon</h3>
       {{meal.required ? 'On' : 'Off'}}</button>
     <button mdc-button (click)="meal.disabled = !meal.disabled">Disabled:
       {{meal.disabled ? 'On' : 'Off'}}</button>
-    <button mdc-button (click)="meal.floatLabel = !meal.floatLabel">Float
-      Label: {{meal.floatLabel ? 'On' :
-      'Off'}}</button>
     <button mdc-button (click)="meal.setSelectedIndex(2)">Set Index (2)</button>
   </div>
   <mdc-select #meal [helperText]="mealHelper" required
@@ -186,9 +179,6 @@ <h3 class="demo-content__headline">Select with ngModel</h3>
       {{select.outlined ? 'On' : 'Off'}}</button>
     <button mdc-button (click)="select.disabled = !select.disabled">Disabled:
       {{select.disabled ? 'On' : 'Off'}}</button>
-    <button mdc-button (click)="select.floatLabel = !select.floatLabel">Float
-      Label: {{select.floatLabel ? 'On' :
-      'Off'}}</button>
     <button mdc-button (click)="demoNgModel.reset()">Clear Selection</button>
     <button mdc-button (click)="select.setSelectionByValue('fruit-3')">Select
       Fruit</button>
@@ -225,10 +215,6 @@ <h3 class="demo-content__headline">Select with FormControl</h3>
       (click)="favoriteFood.disabled = !favoriteFood.disabled">Disabled:
       {{favoriteFood.disabled ?
       'On' : 'Off'}}</button>
-    <button mdc-button
-      (click)="favoriteFood.floatLabel = !favoriteFood.floatLabel">Float
-      Label:
-      {{favoriteFood.floatLabel ? 'On' : 'Off'}}</button>
     <button mdc-button
       (click)="favoriteFood.setSelectionByValue('pizza-1')">Select
       Pizza</button>

demos/src/app/components/select/module.ts

@@ -10,6 +10,6 @@ import {MDC_SELECT_DEFAULT_OPTIONS} from '@angular-mdc/web/select';
     RoutingModule
   ],
   declarations: [ROUTE_DECLARATIONS],
-  providers: [{ provide: MDC_SELECT_DEFAULT_OPTIONS, useValue: {outlined: true}}],
+  // providers: [{ provide: MDC_SELECT_DEFAULT_OPTIONS, useValue: {outlined: true}}],
 })
 export class SelectModule {}

demos/src/app/components/select/select.ts

@@ -21,7 +21,7 @@ export class Select implements OnInit {
   ngOnInit(): void {
     this._componentViewer.template = {
       title: 'Select Menus',
-      description: 'MDC Select provides Material Design single-option select menus, using the MDC menu. The Select component is fully accessible, and supports RTL rendering.',
+      description: 'MDC Select provides Material Design single-option select menus, using the MDC menu.',
       references: [{
         name: 'Material Design guidelines: Menus',
         url: 'https://material.io/guidelines/components/menus.html'
@@ -36,7 +36,7 @@ export class Select implements OnInit {
       ],
       code: `import {MdcSelectModule} from '@angular-mdc/web/select';`,
       sass: `@use '@material/select/mdc-select';
-@use '@material/select';
+@use '@material/select/_index' as select;
 @use '@material/list/mdc-list';
 @use '@material/menu-surface/mdc-menu-surface';
 @use '@material/menu/mdc-menu';`
@@ -66,7 +66,6 @@ export class Api implements OnInit {
                 {name: 'placeholder: string', summary: `Text shown if no value has been selected.`},
                 {name: 'value: any', summary: `Sets the selected item by value.`},
                 {name: 'tabIndex: number', summary: `Set the underlying tab index of the select. (Default is 0)`},
-                {name: 'floatLabel: boolean', summary: `Whether or not to show or hide a floating placeholder.`},
                 {name: 'outlined: boolean', summary: `Styles the select as an outlined select.`},
                 {name: 'disabled: boolean', summary: `Enables/disables the select.`},
                 {name: 'helperText: MdcHelperText', summary: `Reference to related MdcHelperText`},

demos/yarn.lock

@@ -40,7 +40,7 @@
     "@angular/forms": "^9.1.2",
     "@angular/platform-browser": "^9.1.2",
     "core-js": "^2.6.9",
-    "material-components-web": "6.0.0-canary.c141801d5.0",
+    "material-components-web": "6.0.0",
     "rxjs": "^6.5.5",
     "tsickle": "0.38.1",
     "tslib": "1.11.1",

package.json

@@ -3,7 +3,7 @@
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^9.0.0 || ^10.0.0-0"
 ANGULAR_CDK_PACKAGE_VERSION = "^9.2.1"
-MDC_PACKAGE_VERSION = "6.0.0-canary.c141801d5.0"
+MDC_PACKAGE_VERSION = "6.0.0"
 TSLIB_PACKAGE_VERSION = "^1.11.1"
 
 VERSION_PLACEHOLDER_REPLACEMENTS = {

packages.bzl

@@ -9,19 +9,13 @@ import {MdcMenuModule} from '@angular-mdc/web/menu';
 import {MdcListModule} from '@angular-mdc/web/list';
 
 import {MdcSelect} from './select';
-import {
-  MdcSelectAnchor,
-  MdcSelectIcon,
-  MdcSelectedText
-} from './select-directives';
+import {MdcSelectIcon} from './select-icon';
 import {MDCSelectHelperText} from './select-helper-text';
 
 const SELECT_DECLARATIONS = [
   MdcSelect,
-  MdcSelectAnchor,
   MDCSelectHelperText,
   MdcSelectIcon,
-  MdcSelectedText
 ];
 
 @NgModule({

packages/select/module.ts

@@ -1,4 +1,4 @@
 export * from './module';
-export * from './select-directives';
+export * from './select-icon';
 export * from './select-helper-text';
 export * from './select';

packages/select/public-api.ts

@@ -0,0 +1,8 @@
+import {Directive} from '@angular/core';
+
+@Directive({
+  selector: '[mdcSelectIcon]',
+  exportAs: 'mdcSelectIcon',
+  host: {'class': 'mdc-select__icon'}
+})
+export class MdcSelectIcon {}

packages/select/select-directives.ts

@@ -1,14 +1,21 @@
-<div mdcSelectAnchor>
+<div #selectAnchor class="mdc-select__anchor"
+  role="button"
+  aria-haspopup="listbox"
+  [tabindex]="disabled ? '-1' : '0'"
+  [attr.aria-required]="required"
+  [attr.aria-labelledby]="placeholder"
+  (focus)="onFocus()"
+  (blur)="onBlur()"
+  (keydown)="onKeydown($event)"
+  (click)="onClick($event)">
+  <span class="mdc-select__ripple"></span>
   <ng-content select="mdc-icon"></ng-content>
-  <i class="mdc-select__dropdown-icon"></i>
-  <div mdcSelectedText
-    [tabindex]="disabled ? '-1' : '0'"
-    (focus)="onFocus()"
-    (blur)="onBlur()"
-    (keydown)="onKeydown($event)"
-    (click)="onClick($event)"
-    [ariaRequired]="required"
-    [ariaLabelledby]="id"></div>
+  <input #selectSelectedText class="mdc-select__selected-text"
+    type="text"
+    disabled
+    readonly
+    [value]="_selectedText" />
+    <i class="mdc-select__dropdown-icon"></i>
     <label mdcFloatingLabel *ngIf="!outlined" [for]="id">{{placeholder}}</label>
     <mdc-line-ripple *ngIf="!outlined"></mdc-line-ripple>
     <mdc-notched-outline *ngIf="outlined" [label]="placeholder" [for]="id"></mdc-notched-outline>

packages/select/select-icon.ts

@@ -80,17 +80,6 @@ describe('MdcSelectModule', () => {
       dispatchKeyboardEvent(testInstance.elementRef.nativeElement, 'keydown', DOWN_ARROW);
       fixture.detectChanges();
     });
-
-    it('#should handle mouse events', fakeAsync(() => {
-      dispatchMouseEvent(testInstance._selectedText.root, 'click');
-      fixture.detectChanges();
-      testInstance.focus();
-      dispatchKeyboardEvent(testInstance._selectedText.root, 'keydown', DOWN_ARROW);
-      dispatchKeyboardEvent(testInstance.elementRef.nativeElement, 'keydown', DOWN_ARROW);
-      fixture.detectChanges();
-
-      flush();
-    }));
   });
 
   describe('basic behaviors', () => {
@@ -119,12 +108,6 @@ describe('MdcSelectModule', () => {
       expect(testInstance.disabled).toBe(true);
     });
 
-    it('#should set floatLabel to false', () => {
-      testComponent.floatLabel = false;
-      fixture.detectChanges();
-      expect(testInstance.floatLabel).toBe(false);
-    });
-
     it('#should set required to true', () => {
       testComponent.required = true;
       fixture.detectChanges();
@@ -137,15 +120,6 @@ describe('MdcSelectModule', () => {
       expect(testInstance.valid).toBe(true);
     });
 
-    it('#should set outlined and floating label with value', () => {
-      testInstance.setSelectionByValue('fruit-3');
-      testComponent.outlined = true;
-      testComponent.floatLabel = true;
-      fixture.detectChanges();
-
-      expect(testInstance.floatLabel).toBe(true);
-    });
-
     it('#should generate a unique id for the select if no id is set', () => {
       expect(testInstance.id).toMatch(/mdc-select-\d+/);
     });
@@ -310,23 +284,6 @@ describe('MdcSelectModule', () => {
       expect(testInstance.required).toBe(false);
     });
 
-    it('#should handle mouse events', fakeAsync(() => {
-      dispatchMouseEvent(testInstance._selectedText.root, 'click');
-      fixture.detectChanges();
-      testInstance.focus();
-      dispatchKeyboardEvent(testInstance._selectedText.root, 'keydown', DOWN_ARROW);
-      dispatchKeyboardEvent(testInstance.elementRef.nativeElement, 'keydown', DOWN_ARROW);
-      fixture.detectChanges();
-
-      flush();
-    }));
-
-    it('#should handle keydown events', fakeAsync(() => {
-      dispatchKeyboardEvent(testInstance._selectedText.root, 'keydown', DOWN_ARROW);
-      fixture.detectChanges();
-      flush();
-    }));
-
     it('#should handle mouse events', fakeAsync(() => {
       testComponent.open = true;
       fixture.detectChanges();
@@ -393,7 +350,7 @@ it('should be able to provide default values through an injection token', () =>
     <form #demoSelectForm="ngForm" id="demoSelectForm">
       <mdc-form-field>
         <mdc-select #select placeholder="Favorite food" ngModel #demoSelectModel="ngModel" name="food"
-         [disabled]="disabled" [floatLabel]="floatLabel" [required]="required" [valid]="valid"
+         [disabled]="disabled" [required]="required" [valid]="valid"
          [value]="testValue" [outlined]="outlined" (blur)="handleBlur()"
          (valueChange)="handleValueChange($event)" (selectionChange)="handleSelectedChange($event)">
           <mdc-menu>
@@ -413,7 +370,6 @@ it('should be able to provide default values through an injection token', () =>
 class SimpleTest {
   myPlaceholder: string = 'Favorite food';
   disabled: boolean = true;
-  floatLabel: boolean;
   multiple: boolean;
   required: boolean;
   valid: boolean = false;