feat: upgrade to material-components-web 0.25.0

BREAKING CHANGE: Upgrade to material-components-web 0.25.0 and rename
  mdcTextfield to mdcTextField and mdcFormfield to mdcFormField.
  (Following upstream change of changing textfield to text-field).

Author: gjdev

README.md

@@ -34,7 +34,7 @@ slider                   | [See demo](https://blox.src.zone/material#/directives
 snackbar                 | [See demo](https://blox.src.zone/material#/directives/snackbar) |
 switch                   | [See demo](https://blox.src.zone/material#/directives/switch) |
 tabs                     | [See demo](https://blox.src.zone/material#/directives/tab) |
-textfield                | [See demo](https://blox.src.zone/material#/directives/textfield) |
+text-field               | [See demo](https://blox.src.zone/material#/directives/text-field) |
 toolbar                  | [See demo](https://blox.src.zone/material#/directives/toolbar) |
 
 Note: the `@material` packages `layout-grid`, `theme`, and `typography` are supposed to be used by

bundle/package-lock.json

@@ -26,7 +26,7 @@
     "build": "npm run clean && npm run ngc && npm run bundle && npm run copy-types && npm run copy-metadata && npm run apidocs && npm run link2site"
   },
   "dependencies": {
-    "material-components-web": "^0.24.0"
+    "material-components-web": "^0.25.0"
   },
   "peerDependencies": {
     "@angular/common": ">=4.0.0",

bundle/package.json

@@ -54,9 +54,9 @@ export class MdcCheckboxInputDirective extends AbstractMdcInput {
  * Future implementations will also support supplying (customized) background
  * elements.
  * </p><p>
- * This directive can be used together with an <code>mdcFormfield</code> to
+ * This directive can be used together with an <code>mdcFormField</code> to
  * easily position checkboxes and their labels, see
- * <a href="#/directives/formfield">mdcFormfield</a>.
+ * <a href="#/directives/form-field">mdcFormField</a>.
  */
 @Directive({
     selector: '[mdcCheckbox]'

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

@@ -1,5 +1,5 @@
 /** @docs-private */
-export interface MdcFormfieldAdapter {
+export interface MdcFormFieldAdapter {
     registerInteractionHandler: (type: string, handler: EventListener) => void;
     deregisterInteractionHandler: (type: string, handler: EventListener) => void;
     activateInputRipple: () => void;

bundle/src/components/formfield/mdc.formfield.adapter.ts renamed to bundle/src/components/form-field/mdc.form-field.adapter.ts

@@ -2,7 +2,7 @@ import { AfterContentInit, ContentChild, ContentChildren, forwardRef, Directive,
   Input, OnDestroy, Optional, Renderer2, Self } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { MDCFormFieldFoundation } from '@material/form-field';
-import { MdcFormfieldAdapter } from './mdc.formfield.adapter';
+import { MdcFormFieldAdapter } from './mdc.form-field.adapter';
 import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple';
 import { AbstractMdcInput } from '../abstract/abstract.mdc.input';
 import { AbstractMdcLabel } from '../abstract/abstract.mdc.label';
@@ -12,10 +12,10 @@ import { MdcEventRegistry } from '../../utils/mdc.event.registry';
 let nextId = 1;
 
 @Directive({
-    selector: 'input[mdcFormfieldInput], textarea[mdcFormfieldInput]',
-    providers: [{provide: AbstractMdcInput, useExisting: forwardRef(() => MdcFormfieldInputDirective) }]
+    selector: 'input[mdcFormFieldInput], textarea[mdcFormFieldInput]',
+    providers: [{provide: AbstractMdcInput, useExisting: forwardRef(() => MdcFormFieldInputDirective) }]
 })
-export class MdcFormfieldInputDirective extends AbstractMdcInput {
+export class MdcFormFieldInputDirective extends AbstractMdcInput {
     private _id: string;
     private _disabled = false;
 
@@ -43,10 +43,10 @@ export class MdcFormfieldInputDirective extends AbstractMdcInput {
 }
 
 @Directive({
-    selector: 'label[mdcFormfieldLabel]',
-    providers: [{provide: AbstractMdcLabel, useExisting: forwardRef(() => MdcFormfieldLabelDirective) }]
+    selector: 'label[mdcFormFieldLabel]',
+    providers: [{provide: AbstractMdcLabel, useExisting: forwardRef(() => MdcFormFieldLabelDirective) }]
 })
-export class MdcFormfieldLabelDirective extends AbstractMdcLabel {
+export class MdcFormFieldLabelDirective extends AbstractMdcLabel {
     @HostBinding() @Input() for: string;
 
     constructor(public _elm: ElementRef) {
@@ -55,16 +55,16 @@ export class MdcFormfieldLabelDirective extends AbstractMdcLabel {
 }
 
 @Directive({
-    selector: '[mdcFormfield]'
+    selector: '[mdcFormField]'
 })
-export class MdcFormfieldDirective implements AfterContentInit, OnDestroy {
+export class MdcFormFieldDirective implements AfterContentInit, OnDestroy {
     @HostBinding('class.mdc-form-field') _cls = true;
     private _alignEnd = false;
     @ContentChild(AbstractMdcRipple) rippleChild: AbstractMdcRipple;
     @ContentChild(AbstractMdcInput) mdcInput: AbstractMdcInput;
     @ContentChild(AbstractMdcLabel) mdcLabel: AbstractMdcLabel;
 
-    private mdcAdapter: MdcFormfieldAdapter = {
+    private mdcAdapter: MdcFormFieldAdapter = {
         registerInteractionHandler: (type: string, handler: EventListener) => {
             this.registry.listen(this.renderer, type, handler, this.root);
         },

bundle/src/components/formfield/mdc.formfield.directive.ts renamed to bundle/src/components/form-field/mdc.form-field.directive.ts

@@ -54,9 +54,9 @@ export class MdcRadioInputDirective extends AbstractMdcInput {
  * Future implementations will also support supplying (customized) background
  * elements.
  * </p><p>
- * This directive can be used together with an <code>mdcFormfield</code> to
+ * This directive can be used together with an <code>mdcFormField</code> to
  * easily position radio buttons and their labels, see
- * <a href="#/directives/formfield">mdcFormfield</a>.
+ * <a href="#/directives/form-field">mdcFormField</a>.
  */
 @Directive({
     selector: '[mdcRadio]'

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

@@ -50,9 +50,9 @@ export class MdcSwitchInputDirective extends AbstractMdcInput {
  * Future implementations will also support supplying (customized) background
  * elements.
  * </p><p>
- * This directive can be used together with an <code>mdcFormfield</code> to
+ * This directive can be used together with an <code>mdcFormField</code> to
  * easily position switches and their labels, see
- * <a href="#/directives/formfield">mdcFormfield</a>.
+ * <a href="#/directives/form-field">mdcFormField</a>.
  */
 @Directive({
     selector: '[mdcSwitch]'

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

@@ -1,5 +1,5 @@
 /** @docs-private */
-export interface MdcTextfieldAdapter {
+export interface MdcTextFieldAdapter {
     addClass: (className: string) => void;
     removeClass: (className: string) => void;
     addClassToLabel: (className: string) => void;

bundle/src/components/textfield/mdc.textfield.adapter.ts renamed to bundle/src/components/text-field/mdc.text-field.adapter.ts

@@ -3,31 +3,31 @@ import { AfterContentInit, AfterViewInit, Component, ContentChild, ContentChildr
   ViewEncapsulation } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { MDCRipple } from '@material/ripple';
-import { MDCTextfieldFoundation } from '@material/textfield';
-import { MdcTextfieldAdapter } from './mdc.textfield.adapter';
+import { MDCTextFieldFoundation } from '@material/textfield';
+import { MdcTextFieldAdapter } from './mdc.text-field.adapter';
 import { AbstractMdcInput } from '../abstract/abstract.mdc.input';
 import { AbstractMdcLabel } from '../abstract/abstract.mdc.label';
 import { asBoolean } from '../../utils/value.utils';
 import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple';
 import { MdcEventRegistry } from '../../utils/mdc.event.registry';
 
-const CLASS_BOTTOM_LINE = 'mdc-textfield__bottom-line';
+const CLASS_BOTTOM_LINE = 'mdc-text-field__bottom-line';
 
 let nextId = 1;
 
 @Directive({
-    selector: 'input[mdcTextfieldInput], textarea[mdcTextfieldInput]',
-    providers: [{provide: AbstractMdcInput, useExisting: forwardRef(() => MdcTextfieldInputDirective) }]
+    selector: 'input[mdcTextFieldInput], textarea[mdcTextFieldInput]',
+    providers: [{provide: AbstractMdcInput, useExisting: forwardRef(() => MdcTextFieldInputDirective) }]
 })
-export class MdcTextfieldInputDirective extends AbstractMdcInput implements OnInit {
+export class MdcTextFieldInputDirective extends AbstractMdcInput implements OnInit {
     _onChange = (value) => {};
     private _id: string;
     private _type = 'text';
     private _disabled = false;
     private _required = false;
     private cachedId: string;
     _focused = false;
-    @HostBinding('class.mdc-textfield__input') _hostClass = true;
+    @HostBinding('class.mdc-text-field__input') _hostClass = true;
 
     constructor(public _elm: ElementRef, private renderer: Renderer2, @Optional() @Self() public _cntr: NgControl) {
         super();
@@ -136,37 +136,37 @@ export class MdcTextfieldInputDirective extends AbstractMdcInput implements OnIn
 }
 
 @Directive({
-    selector: '[mdcTextfieldIcon]'
+    selector: '[mdcTextFieldIcon]'
 })
-export class MdcTextfieldIconDirective {
-    @HostBinding('class.mdc-textfield__icon') _cls = true;
+export class MdcTextFieldIconDirective {
+    @HostBinding('class.mdc-text-field__icon') _cls = true;
 
     constructor(public _el: ElementRef) {
     }
 }
 
 @Directive({
-    selector: 'label[mdcTextfieldLabel]',
-    providers: [{provide: AbstractMdcLabel, useExisting: forwardRef(() => MdcTextfieldLabelDirective) }]
+    selector: 'label[mdcTextFieldLabel]',
+    providers: [{provide: AbstractMdcLabel, useExisting: forwardRef(() => MdcTextFieldLabelDirective) }]
 })
-export class MdcTextfieldLabelDirective extends AbstractMdcLabel {
+export class MdcTextFieldLabelDirective extends AbstractMdcLabel {
     /** @docs-private */
     @HostBinding() for: string;
-    @HostBinding('class.mdc-textfield__label') _cls = true;
+    @HostBinding('class.mdc-text-field__label') _cls = true;
 
     constructor(public _elm: ElementRef) {
         super();
     }
 }
 
 @Directive({
-    selector: '[mdcTextfieldHelptext]',
+    selector: '[mdcTextFieldHelptext]',
     exportAs: 'mdcHelptext'
 })
-export class MdcTextfieldHelptextDirective {
-    @HostBinding('class.mdc-textfield-helptext') _cls = true;
-    @HostBinding('class.mdc-textfield-helptext--validation-msg') _isValidation = false;
-    @HostBinding('class.mdc-textfield-helptext--persistent') _isPersistent = false;
+export class MdcTextFieldHelptextDirective {
+    @HostBinding('class.mdc-text-field-helptext') _cls = true;
+    @HostBinding('class.mdc-text-field-helptext--validation-msg') _isValidation = false;
+    @HostBinding('class.mdc-text-field-helptext--persistent') _isPersistent = false;
     @Input() forceShow = false; // TODO boolean coercion
 
     constructor(public _elm: ElementRef) {
@@ -182,22 +182,22 @@ export class MdcTextfieldHelptextDirective {
 }
 
 @Directive({
-    selector: '[mdcTextfield]',
-    providers: [{provide: AbstractMdcRipple, useExisting: forwardRef(() => MdcTextfieldDirective) }]
+    selector: '[mdcTextField]',
+    providers: [{provide: AbstractMdcRipple, useExisting: forwardRef(() => MdcTextFieldDirective) }]
 })
-export class MdcTextfieldDirective extends AbstractMdcRipple implements AfterContentInit, OnDestroy {
-    @HostBinding('class.mdc-textfield') _cls = true;
-    @ContentChild(MdcTextfieldIconDirective) _icon: MdcTextfieldIconDirective;
-    @ContentChild(MdcTextfieldInputDirective) _input: MdcTextfieldInputDirective;
-    @ContentChild(MdcTextfieldLabelDirective) _label: MdcTextfieldLabelDirective;
+export class MdcTextFieldDirective extends AbstractMdcRipple implements AfterContentInit, OnDestroy {
+    @HostBinding('class.mdc-text-field') _cls = true;
+    @ContentChild(MdcTextFieldIconDirective) _icon: MdcTextFieldIconDirective;
+    @ContentChild(MdcTextFieldInputDirective) _input: MdcTextFieldInputDirective;
+    @ContentChild(MdcTextFieldLabelDirective) _label: MdcTextFieldLabelDirective;
     @ContentChildren('label', {descendants: true, read: ElementRef}) _labels: QueryList<ElementRef>;
-    @Input() helptext: MdcTextfieldHelptextDirective;
+    @Input() helptext: MdcTextFieldHelptextDirective;
     private _initialized = false;
     private _box = false;
     private _dense = false;
     private _bottomLineElm: HTMLElement = null;
     private valid: boolean = null;
-    private mdcAdapter: MdcTextfieldAdapter = {
+    private mdcAdapter: MdcTextFieldAdapter = {
         addClass: (className: string) => {
             this.renderer.addClass(this.root.nativeElement, className);
         },
@@ -289,7 +289,7 @@ export class MdcTextfieldDirective extends AbstractMdcRipple implements AfterCon
         useCustomValidityChecking_: boolean,
         setValid(isValid: boolean),
         changeValidity_(isValid: boolean)
-    } = new MDCTextfieldFoundation(this.mdcAdapter);
+    } = new MDCTextFieldFoundation(this.mdcAdapter);
 
     constructor(private renderer: Renderer2, private root: ElementRef, private registry: MdcEventRegistry) {
         super(root, renderer, registry);
@@ -311,9 +311,9 @@ export class MdcTextfieldDirective extends AbstractMdcRipple implements AfterCon
                     // programmatic changes to the input value are not seen by the foundation,
                     // but some states should be updated with the new value:
                     if (value == null || value.toString().length === 0)
-                        this.mdcAdapter.removeClassFromLabel('mdc-textfield__label--float-above');
+                        this.mdcAdapter.removeClassFromLabel('mdc-text-field__label--float-above');
                     else
-                        this.mdcAdapter.addClassToLabel('mdc-textfield__label--float-above');
+                        this.mdcAdapter.addClassToLabel('mdc-text-field__label--float-above');
                 }
             }
     }
@@ -337,11 +337,11 @@ export class MdcTextfieldDirective extends AbstractMdcRipple implements AfterCon
      * When binding to 'isValid', the value will determine the valid state of the input,
      * instead of it being managed by the underlying input element directly.
      * For most use cases this is not needed. When the input/textarea is an ngControl,
-     * the mdcTextfield is already aware of that, and is already using the 'valid'
+     * the mdcTextField is already aware of that, and is already using the 'valid'
      * property of that control.
      * <p>
      * However, in some specific cases, binding to isValid can help. Example:
-     * When you want the mdcTextfield to go to  'invalid' state only when the underlying
+     * When you want the mdcTextField to go to  'invalid' state only when the underlying
      * control is invalid AND that control is touched, you can bind as follows:
      * <code>isValid="myControl.valid || !myControl.touched"</code>.
      */
@@ -356,20 +356,20 @@ export class MdcTextfieldDirective extends AbstractMdcRipple implements AfterCon
         }
     }
 
-    @HostBinding('class.mdc-textfield--textarea') get _textArea(): boolean {
+    @HostBinding('class.mdc-text-field--textarea') get _textArea(): boolean {
         return this._input._isTextarea();
     }
 
-    @HostBinding('class.mdc-textfield--box') @Input()
+    @HostBinding('class.mdc-text-field--box') @Input()
     get boxed() {
         return this._box;
     }
 
-    @HostBinding('class.mdc-textfield--with-leading-icon') get _leadingIcon(): boolean {
+    @HostBinding('class.mdc-text-field--with-leading-icon') get _leadingIcon(): boolean {
         return this._icon && !this._icon._el.nativeElement.previousElementSibling;
     }
 
-    @HostBinding('class.mdc-textfield--with-trailing-icon') get _trailingIcon(): boolean {
+    @HostBinding('class.mdc-text-field--with-trailing-icon') get _trailingIcon(): boolean {
         return this._icon && this._icon._el.nativeElement.previousElementSibling;
     }
 
@@ -378,7 +378,7 @@ export class MdcTextfieldDirective extends AbstractMdcRipple implements AfterCon
         this.initBox();
     }
 
-    @HostBinding('class.mdc-textfield--dense') @Input()
+    @HostBinding('class.mdc-text-field--dense') @Input()
     get dense() {
         return this._dense;
     }