feat: Bump material-components-web to v0.38.1 (#1207)

package.json

@@ -33,7 +33,7 @@
     "@angular/forms": "6.0.9",
     "@angular/platform-browser": "6.0.9",
     "core-js": "2.5.7",
-    "material-components-web": "^0.38.0",
+    "material-components-web": "^0.38.1",
     "rxjs": "6.2.2",
     "tsickle": "^0.32.0",
     "tslib": "1.9.3",

packages/dialog/adapter.d.ts

@@ -10,8 +10,6 @@ export interface MDCDialogAdapter {
   deregisterSurfaceInteractionHandler: (evt: string, handler: EventListener) => void;
   registerDocumentKeydownHandler: (handler: EventListener) => void;
   deregisterDocumentKeydownHandler: (handler: EventListener) => void;
-  registerTransitionEndHandler: (handler: EventListener) => void;
-  deregisterTransitionEndHandler: (handler: EventListener) => void;
   notifyAccept: () => void;
   notifyCancel: () => void;
   trapFocusOnSurface: () => void;

packages/dialog/dialog.component.ts

@@ -114,10 +114,6 @@ export class MdcDialogComponent implements AfterContentInit, OnDestroy {
       const escapeToClose = this.config ? this.config.escapeToClose : this.escapeToClose;
       document.removeEventListener('keydown', escapeToClose ? handler : this._onKeyDown);
     },
-    registerTransitionEndHandler: (handler: EventListener) =>
-      this._getSurfaceElement().addEventListener('transitionend', handler),
-    deregisterTransitionEndHandler: (handler: EventListener) =>
-      this._getSurfaceElement().removeEventListener('transitionend', handler),
     notifyAccept: () => {
       this._accept.emit();
       this._closeDialogRef();

packages/list/list.ts

@@ -208,9 +208,9 @@ export class MdcList implements AfterContentInit, OnDestroy {
       }
       return matches.call(ele, 'button:not(:disabled), a');
     },
-    setTabIndexForListItemChildren: (listItemIndex, tabIndexValue) => {
+    setTabIndexForListItemChildren: (listItemIndex: number, tabIndexValue: number) => {
       const listItemChildren = [].slice.call(this._listItems.toArray()[listItemIndex].getListItemElement()
-        .querySelectorAll('button:not(:disabled), a'));
+        .querySelectorAll('.mdc-list-item button:not(:disabled), .mdc-list-item a'));
       listItemChildren.forEach((ele) => ele.setAttribute('tabindex', tabIndexValue));
     }
   };

packages/material-components-web/scss/checkbox/_variables.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "../ripple/variables";
 @import "../theme/variables";
 
 $mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary);
@@ -28,8 +29,7 @@ $mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size;
 $mdc-checkbox-border-width: 2px;
 $mdc-checkbox-transition-duration: 90ms;
 $mdc-checkbox-item-spacing: 4px;
-$mdc-checkbox-ripple-opacity: .14;
-$mdc-checkbox-focus-indicator-opacity: .26;
+$mdc-checkbox-focus-indicator-opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
 
 // Manual calculation done on SVG
 $mdc-checkbox-mark-path-length_: 29.7833385;

packages/material-components-web/scss/checkbox/mdc-checkbox.scss

@@ -90,7 +90,7 @@
   @include mdc-checkbox__focus-indicator_;
 }
 
-.mdc-ripple-upgraded--unbounded .mdc-checkbox__background::before {
+.mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
   @include mdc-checkbox__focus-indicator--ripple-upgraded-unbounded_;
 }
 

packages/material-components-web/scss/radio/_mixins.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "../theme/mixins";
 @import "../theme/variables";
 @import "./variables";
 

packages/material-components-web/scss/radio/mdc-radio.scss

@@ -17,6 +17,7 @@
 @import "../animation/functions";
 @import "../ripple/common";
 @import "../ripple/mixins";
+@import "../ripple/variables";
 @import "./functions";
 @import "./mixins";
 @import "./variables";
@@ -108,7 +109,7 @@
   }
 
   // stylelint-disable plugin/selector-bem-pattern
-  &.mdc-ripple-upgraded {
+  &.mdc-ripple-upgraded--background-focused {
     .mdc-radio__background::before {
       content: none;
     }
@@ -164,7 +165,7 @@
   + .mdc-radio__background::before {
     transform: scale(2, 2);
     transition: mdc-radio-enter(opacity), mdc-radio-enter(transform);
-    opacity: .26;
+    opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
   }
 }
 

packages/material-components-web/scss/select/mdc-select.scss

@@ -98,10 +98,7 @@
   // Select Box intentionally omits press ripple, so each state needs to be specified individually
   @include mdc-states-base-color($mdc-select-ink-color);
   @include mdc-states-hover-opacity(mdc-states-opacity($mdc-select-ink-color, hover));
-  @include mdc-states-focus-opacity(
-    mdc-states-opacity($mdc-select-ink-color, focus),
-    $has-nested-focusable-element: true
-  );
+  @include mdc-states-focus-opacity(mdc-states-opacity($mdc-select-ink-color, focus));
 
   height: 56px;
   border-radius: 4px 4px 0 0;

packages/material-components-web/scss/textfield/_mixins.scss

@@ -326,10 +326,7 @@
   // Text Field Box intentionally omits press ripple, so each state needs to be specified individually
   @include mdc-states-base-color($mdc-text-field-ink-color);
   @include mdc-states-hover-opacity(mdc-states-opacity($mdc-text-field-ink-color, hover));
-  @include mdc-states-focus-opacity(
-    mdc-states-opacity($mdc-text-field-ink-color, focus),
-    $has-nested-focusable-element: true
-  );
+  @include mdc-states-focus-opacity(mdc-states-opacity($mdc-text-field-ink-color, focus));
   @include mdc-ripple-radius-bounded;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);

packages/material-components-web/scss/textfield/mdc-text-field.scss

@@ -188,7 +188,8 @@
   }
 
   .mdc-text-field--box + &,
-  .mdc-text-field--outlined + & {
+  .mdc-text-field--outlined + &,
+  .mdc-text-field--textarea + & {
     margin-right: 16px;
     margin-left: 16px;
   }

packages/select/select.ts

@@ -33,7 +33,7 @@ import { MdcNotchedOutline } from '@angular-mdc/web/notched-outline';
 import { MdcFloatingLabel } from '@angular-mdc/web/floating-label';
 import { MdcLineRipple } from '@angular-mdc/web/line-ripple';
 
-import { MDCSelectAdapter } from './adapter';
+import { MDCSelectAdapter } from '@material/select/adapter';
 import { MDCSelectFoundation } from '@material/select';
 
 export const MDC_SELECT_CONTROL_VALUE_ACCESSOR: any = {
@@ -189,6 +189,7 @@ export class MdcSelect implements AfterContentInit, ControlValueAccessor, OnDest
   private _mdcAdapter: MDCSelectAdapter = {
     addClass: (className: string) => this._getHostElement().classList.add(className),
     removeClass: (className: string) => this._getHostElement().classList.remove(className),
+    hasClass: (className) => this._getHostElement().classList.contains(className),
     floatLabel: (shouldFloat: boolean) => this._selectLabel.float(shouldFloat),
     activateBottomLine: () => {
       if (this._lineRipple) {