feat: upgrade to material-components-web 0.35.1

BREAKING CHANGE:
* upgrade to material-components-web 0.35.1
* MdcSelectLabelDirective is removed. Use MdcFloatingLabel instead.
  (following upstream changes in material-components-web 0.35.0)
* mdcSelectLabel is removed. Use mdcFlatingLabel instead.
  (following upstream changes in material-components-web 0.35.0)
* mdcButton property `stroked` is renamed to `outlined`.
  (following upstream changes in material-components-web 0.35.0)

Author: gjdev

bundle/package-lock.json

@@ -26,7 +26,7 @@
     "build": "npm run clean && npm run build-noclean"
   },
   "dependencies": {
-    "material-components-web": "^0.34.1"
+    "material-components-web": "^0.35.1"
   },
   "peerDependencies": {
     "@angular/common": ">=5.0.0",

bundle/package.json

@@ -20,7 +20,7 @@ export class MdcButtonDirective extends AbstractMdcRipple implements AfterConten
     @HostBinding('class.mdc-button') _cls = true;
     private _dense = false;
     private _raised = false;
-    private _stroked = false;
+    private _outlined = false;
 
     constructor(public _elm: ElementRef, renderer: Renderer2, registry: MdcEventRegistry) {
         super(_elm, renderer, registry);
@@ -51,13 +51,13 @@ export class MdcButtonDirective extends AbstractMdcRipple implements AfterConten
      * When this input is defined and does not have value false, the button will be styled 
      * flush with the surface and have a visible border.
      */
-    @HostBinding('class.mdc-button--stroked') @Input()
-    get stroked() {
-        return this._stroked;
+    @HostBinding('class.mdc-button--outlined') @Input()
+    get outlined() {
+        return this._outlined;
     }
 
-    set stroked(val: any) {
-        this._stroked = asBoolean(val);
+    set outlined(val: any) {
+        this._outlined = asBoolean(val);
     }
 
     /**

bundle/src/components/button/mdc.button.directive.ts

@@ -190,7 +190,7 @@ export class MdcCardDirective {
      * When this input is set to a value other than false, the card will have a
      * hairline stroke instead of a shadow.
      */
-    @HostBinding('class.mdc-card--stroked') @Input()
+    @HostBinding('class.mdc-card--outlined') @Input()
     get outlined() {
         return this._outlined;
     }

bundle/src/components/card/mdc.card.directive.ts

@@ -13,15 +13,3 @@ export interface MdcSelectAdapter {
     getValue: () => string,
     setValue: (value: string) => void
 }
-
-/** @docs-private */
-export interface MdcSelectLabelAdapter {
-    addClass: (className: string) => void,
-    removeClass: (className: string) => void
-}
-
-/** @docs-private */
-export interface MdcSelectBottomLineAdapter {
-    addClass: (className: string) => void,
-    removeClass: (className: string) => void
-}

bundle/src/components/select/mdc.select.adapter.ts

@@ -2,17 +2,18 @@ import { AfterContentInit, ContentChild, Directive, ElementRef, forwardRef, Host
   Input, OnDestroy, OnInit, Optional, Renderer2, Self } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { MDCSelectFoundation } from '@material/select';
-import { MDCSelectLabelFoundation } from '@material/select/label';
-import { MDCSelectBottomLineFoundation } from '@material/select/bottom-line';
-import { MdcSelectAdapter, MdcSelectLabelAdapter, MdcSelectBottomLineAdapter } from './mdc.select.adapter';
+import { MDCFloatingLabelFoundation } from '@material/floating-label';
+import { MDCLineRippleFoundation } from '@material/line-ripple';
+import { MdcSelectAdapter } from './mdc.select.adapter';
+import { MdcFloatingLabelDirective } from '../floating-label/mdc.floating-label.directive';
+import { MdcLineRippleAdapter } from '../line-ripple/mdc.line-ripple.adapter';
 import { AbstractMdcInput } from '../abstract/abstract.mdc.input';
 import { asBoolean } from '../../utils/value.utils';
 import { MdcEventRegistry } from '../../utils/mdc.event.registry';
 
 const CLASS_SELECT = 'mdc-select';
 const CLASS_SELECT_CONTROL = 'mdc-select__native-control';
-const CLASS_SELECT_LABEL = 'mdc-select__label';
-const CLASS_SELECT_LINE = 'mdc-select__bottom-line';
+const CLASS_LINE_RIPPLE = 'mdc-line-ripple';
 
 let nextId = 1;
 
@@ -52,8 +53,8 @@ export class MdcSelectControlDirective extends AbstractMdcInput implements OnIni
 
     /**
      * Mirrors the <code>id</code> attribute. If no id is assigned, this directive will
-     * assign a unique id by itself. If an <code>mdcSelectLabel</code> for this text-field
-     * is available, the <code>mdcSelectLabel</code> will automatically set its <code>for</code>
+     * assign a unique id by itself. If an <code>mdcFloatingLabel</code> for this select control
+     * is available, the <code>mdcFloatingLabel</code> will automatically set its <code>for</code>
      * attribute to this <code>id</code> value.
      */
     @HostBinding()
@@ -83,70 +84,43 @@ export class MdcSelectControlDirective extends AbstractMdcInput implements OnIni
     }
 }
 
-/**
- * Directive for the label of an <code>mdcSelect</code> selection control.
- * Should be used as a child element of the <code>mdcSelect</code>,
- * immediately after the <code>mdcSelectControl</code>.
- */
-@Directive({
-    selector: '[mdcSelectLabel]'
-})
-export class MdcSelectLabelDirective implements AfterContentInit {
-    @HostBinding('class.' + CLASS_SELECT_LABEL) _cls = true;
-    _initialized = false;
-    _adapter: MdcSelectLabelAdapter = {
-        addClass: (className: string) => {this._rndr.addClass(this._elm.nativeElement, className); },
-        removeClass: (className: string) => {this._rndr.removeClass(this._elm.nativeElement, className); }
-    };
-    _foundation: {
-        init(),
-        destroy(),
-        styleFloat(value: boolean)
-    } = <any>new MDCSelectLabelFoundation(this._adapter);
-
-    constructor(public _elm: ElementRef, private _rndr: Renderer2) {
-    }
-
-    ngAfterContentInit() {
-        this._foundation.init();
-        this._initialized = true;
-    }
-
-    ngOnDestroy() {
-        this._foundation.destroy();
-        this._initialized = false;
-    }
-}
-
 /**
  * Directive for a spec aligned material design 'Select Control'.
  * This directive should wrap an <code>mdcSelectControl</code>, and an
- * <code>mdcSelectLabel</code> directive.
+ * <code>mdcFloatingLabel</code> directive.
  */
 @Directive({
     selector: '[mdcSelect]'
 })
 export class MdcSelectDirective implements AfterContentInit, OnDestroy {
     @HostBinding('class.' + CLASS_SELECT) _cls = true;
     @ContentChild(MdcSelectControlDirective) _control: MdcSelectControlDirective;
-    @ContentChild(MdcSelectLabelDirective) _label: MdcSelectLabelDirective;
+    @ContentChild(MdcFloatingLabelDirective) _label: MdcFloatingLabelDirective;
     private _initialized = false;
     private _bottomLineElm: HTMLElement = null;
-    private _bottomLineAdapter: MdcSelectBottomLineAdapter;
-    private _bottomLineFoundation: {
-        init(),
-        destroy(),
-        activate(),
-        deactivate()
-    } = <any>new MDCSelectBottomLineFoundation(this._bottomLineAdapter);
+    private _lineRippleAdapter: MdcLineRippleAdapter = {
+        addClass: (className: string) => this._rndr.addClass(this._bottomLineElm, className),
+        removeClass: (className: string) => this._rndr.removeClass(this._bottomLineElm, className),
+        hasClass: (className) => this._bottomLineElm.classList.contains(className),
+        setStyle: (name: string, value: string) => this._rndr.setStyle(this._bottomLineElm, name, value),
+        registerEventHandler: (evtType: string, handler: EventListener) => this._registry.listenElm(this._rndr, evtType, handler, this._bottomLineElm),
+        deregisterEventHandler: (evtType: string, handler: EventListener) => this._registry.unlisten(evtType, handler)
+    };
+    private _lineRippleFoundation: {
+        init: Function,
+        destroy: Function,
+        activate: Function,
+        deactivate: Function,
+        setRippleCenter: (x: number) => void
+    } = new MDCLineRippleFoundation(this._lineRippleAdapter);
     private adapter: MdcSelectAdapter = {
         addClass: (className: string) => {this._rndr.addClass(this._elm.nativeElement, className); },
         removeClass: (className: string) => {this._rndr.removeClass(this._elm.nativeElement, className); },
         floatLabel: (value: boolean) => {
-            if (this._label) this._label._foundation.styleFloat(value);
+            if (this._label) this._label._foundation.float(value);
         },
-        activateBottomLine: () => this._bottomLineFoundation.activate(),
-        deactivateBottomLine: () => this._bottomLineFoundation.deactivate(),
+        activateBottomLine: () => this._lineRippleFoundation.activate(),
+        deactivateBottomLine: () => this._lineRippleFoundation.deactivate(),
         setDisabled: (disabled: boolean) => this._control._elm.nativeElement.disabled = disabled,
         registerInteractionHandler: (type, handler) => this._control._registry.listen(this._rndr, type, handler, this._control._elm),
         deregisterInteractionHandler: (type, handler) => this._control._registry.unlisten(type, handler),
@@ -163,19 +137,19 @@ export class MdcSelectDirective implements AfterContentInit, OnDestroy {
         setSelectedIndex(index: number)
     } = new MDCSelectFoundation(this.adapter);
 
-    constructor(private _elm: ElementRef, private _rndr: Renderer2) {
+    constructor(private _elm: ElementRef, private _rndr: Renderer2, private _registry: MdcEventRegistry) {
     }
 
     ngAfterContentInit() {
         if (!this._control || !this._label)
-            throw new Error('mdcSelect requires an embedded mdcSelectControl and mdcSelectLabel');
+            throw new Error('mdcSelect requires an embedded mdcSelectControl and mdcFloatingLabel');
         if (!this._label._initialized)
-            throw new Error('mdcSelectLabel not properly initialized');
+            throw new Error('mdcFloatingLabel not properly initialized');
         // add bottom line:
         this._bottomLineElm = this._rndr.createElement('div');
-        this._rndr.addClass(this._bottomLineElm, CLASS_SELECT_LINE);
+        this._rndr.addClass(this._bottomLineElm, CLASS_LINE_RIPPLE);
         this._rndr.appendChild(this._elm.nativeElement, this._bottomLineElm);
-        this._bottomLineFoundation.init();
+        this._lineRippleFoundation.init();
         this.foundation.init();
         this._initialized = true;
 
@@ -184,7 +158,7 @@ export class MdcSelectDirective implements AfterContentInit, OnDestroy {
     }
 
     ngOnDestroy() {
-        this._bottomLineFoundation.destroy();
+        this._lineRippleFoundation.destroy();
         this.foundation.destroy();
         this._control._onChange = (value) => {};
     }

bundle/src/components/select/mdc.select.directive.ts

@@ -13,6 +13,7 @@ export interface MdcTextFieldHelperTextAdapter {
 /** @docs-private */
 export interface MdcTextFieldIconAdapter {
     setAttr: (name: string, value: string) => void,
+    removeAttr: (name: string) => void,
     registerInteractionHandler: (evtType: string, handler: EventListener) => void,
     deregisterInteractionHandler: (evtType: string, handler: EventListener) => void,
     notifyIconAction: () => void

bundle/src/components/text-field/mdc.text-field.adapter.ts

@@ -159,9 +159,8 @@ export class MdcTextFieldInputDirective extends AbstractMdcInput implements OnIn
 export class MdcTextFieldIconDirective {
     @HostBinding('class.mdc-text-field__icon') _cls = true;
     _mdcAdapter: MdcTextFieldIconAdapter = {
-        setAttr: (name: string, value: string) => {
-            this._rndr.setAttribute(this._el.nativeElement, name, value);
-        },
+        setAttr: (name: string, value: string) => this._rndr.setAttribute(this._el.nativeElement, name, value),
+        removeAttr: (name: string) => this._rndr.removeAttribute(this._el.nativeElement, name),
         registerInteractionHandler: (evtType: string, handler: EventListener) => {
             this._reg.listen(this._rndr, evtType, handler, this._el);
         },

bundle/src/components/text-field/mdc.text-field.directive.ts

@@ -41,7 +41,7 @@ import { MdcMenuAnchorDirective, MdcMenuDirective } from './components/menu/mdc.
 import { MdcRadioDirective,
     MdcRadioInputDirective } from './components/radio/mdc.radio.directive';
 import { MdcRippleDirective } from './components/ripple/mdc.ripple.directive';
-import { MdcSelectDirective, MdcSelectControlDirective, MdcSelectLabelDirective } from './components/select/mdc.select.directive';
+import { MdcSelectDirective, MdcSelectControlDirective } from './components/select/mdc.select.directive';
 import { MdcSliderDirective,
     MdcFormsSliderDirective } from './components/slider/mdc.slider.directive';
 import { MdcSnackbarService, MDC_SNACKBAR_PROVIDER } from './components/snackbar/mdc.snackbar.service';
@@ -113,7 +113,7 @@ export { MdcMenuAnchorDirective, MdcMenuDirective } from './components/menu/mdc.
 export { MdcRadioDirective,
     MdcRadioInputDirective } from './components/radio/mdc.radio.directive';
 export { MdcRippleDirective } from './components/ripple/mdc.ripple.directive';
-export { MdcSelectDirective, MdcSelectControlDirective, MdcSelectLabelDirective } from './components/select/mdc.select.directive';
+export { MdcSelectDirective, MdcSelectControlDirective } from './components/select/mdc.select.directive';
 export { MdcSliderDirective,
     MdcFormsSliderDirective } from './components/slider/mdc.slider.directive';
 export { MdcSnackbarMessage } from './components/snackbar/mdc.snackbar.message';
@@ -171,7 +171,7 @@ export { MdcEventRegistry } from './utils/mdc.event.registry';
         MdcMenuAnchorDirective, MdcMenuDirective,
         MdcRadioDirective, MdcRadioInputDirective,
         MdcRippleDirective,
-        MdcSelectDirective, MdcSelectControlDirective, MdcSelectLabelDirective,
+        MdcSelectDirective, MdcSelectControlDirective,
         MdcSliderDirective, MdcFormsSliderDirective,
         MdcSwitchInputDirective, MdcSwitchDirective,
         MdcTabDirective, MdcTabIconDirective, MdcTabIconTextDirective,
@@ -200,7 +200,7 @@ export { MdcEventRegistry } from './utils/mdc.event.registry';
         MdcMenuAnchorDirective, MdcMenuDirective,
         MdcRadioDirective, MdcRadioInputDirective,
         MdcRippleDirective,
-        MdcSelectDirective, MdcSelectControlDirective, MdcSelectLabelDirective,
+        MdcSelectDirective, MdcSelectControlDirective,
         MdcSliderDirective, MdcFormsSliderDirective,
         MdcSwitchInputDirective, MdcSwitchDirective,
         MdcTabDirective, MdcTabIconDirective, MdcTabIconTextDirective,

bundle/src/material.module.ts

@@ -21,15 +21,12 @@ const globals = {
   '@material/radio': 'mdc.radio',
   '@material/ripple': 'mdc.ripple',
   '@material/select': 'mdc.select',
-  '@material/select/label': 'mdc.select',
-  '@material/select/bottom-line': 'mdc.select',
   '@material/slider': 'mdc.slider',
   '@material/switch': 'mdc.switch',
   '@material/snackbar': 'mdc.snackbar',
   '@material/textfield': 'mdc.textfield',  // checked, not exported as mdc.textField yet
   '@material/textfield/helper-text': 'mdc.textfield',
   '@material/textfield/icon': 'mdc.textfield',
-  '@material/textfield/label': 'mdc.textfield',
   '@material/toolbar': 'mdc.toolbar',
   '@material/tabs': 'mdc.tabs',
   'rxjs/Observable': 'Rx',