feat(line-ripple): Implement Line Ripple component

package.json

@@ -115,7 +115,7 @@
           "button",
           "card",
           "checkbox",
-          "core",
+          "common",
           "dialog",
           "drawer",
           "elevation",
@@ -126,6 +126,7 @@
           "icon-toggle",
           "layout-grid",
           "linear-progress",
+          "line-ripple",
           "list",
           "material-icon",
           "menu",
@@ -137,7 +138,6 @@
           "snackbar",
           "switch",
           "tabs",
-          "textfield",
           "text-field",
           "theme",
           "toolbar",

src/lib/line-ripple/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/lib/line-ripple/line-ripple-module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { MdcLineRipple } from './line-ripple';
+
+@NgModule({
+  exports: [MdcLineRipple],
+  declarations: [MdcLineRipple],
+})
+export class MdcLineRippleModule { }

src/lib/line-ripple/line-ripple.ts

@@ -0,0 +1,75 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Output,
+  Renderer2,
+} from '@angular/core';
+import { EventRegistry } from '@angular-mdc/web/common';
+
+import { MDCLineRippleAdapter } from '@material/line-ripple/adapter';
+import { MDCLineRippleFoundation } from '@material/line-ripple';
+
+@Directive({
+  selector: '[mdc-line-ripple], mdc-line-ripple',
+  exportAs: 'mdcLineRipple'
+})
+export class MdcLineRipple {
+  @Output() animationEnd = new EventEmitter<boolean>();
+  @HostBinding('class.mdc-line-ripple') isHostClass = true;
+
+  private _mdcAdapter: MDCLineRippleAdapter = {
+    addClass: (className: string) => {
+      this._renderer.addClass(this._getHostElement(), className);
+    },
+    removeClass: (className: string) => {
+      this._renderer.removeClass(this._getHostElement(), className);
+    },
+    setAttr: (attr: string, value: string) => this._renderer.setAttribute(this._getHostElement(), attr, value),
+    registerEventHandler: (evtType: string, handler: EventListener) =>
+      this._registry.listen(evtType, handler, this._getHostElement()),
+    deregisterEventHandler: (evtType: string, handler: EventListener) => this._registry.unlisten(evtType, handler),
+  };
+
+  foundation: {
+    init(): void,
+    destroy(): void,
+    activate(): void,
+    deactivate(): void,
+    setRippleCenter(xCoordinate: number): void,
+    handleTransitionEnd(): void,
+  } = new MDCLineRippleFoundation(this._mdcAdapter);
+
+  constructor(
+    private _renderer: Renderer2,
+    public elementRef: ElementRef,
+    private _registry: EventRegistry) { }
+
+  destroy(): void {
+    this.foundation.destroy();
+  }
+
+  /** Activates the bottom line */
+  activate(): void {
+    this.foundation.activate();
+  }
+
+  /** Deactivates the bottom line */
+  deactivate(): void {
+    this.foundation.deactivate();
+  }
+
+  /**
+   * Sets the transform origin given a user's click location.
+   * The `rippleCenter` is the x-coordinate of the middle of the ripple.
+  */
+  setRippleCenter(xCoordinate: number): void {
+    this.foundation.setRippleCenter(xCoordinate);
+  }
+
+  /** Retrieves the DOM element of the component host. */
+  private _getHostElement() {
+    return this.elementRef.nativeElement;
+  }
+}

src/lib/line-ripple/public-api.ts

@@ -0,0 +1,2 @@
+export * from './line-ripple-module';
+export * from './line-ripple';

src/lib/line-ripple/tsconfig-build.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig-build",
+  "files": [
+    "public-api.ts",
+    "../typings.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular-mdc/web/line-ripple",
+    "skipTemplateCodegen": true
+  }
+}

src/lib/public-api.ts

@@ -12,6 +12,7 @@ export * from '@angular-mdc/web/form-field';
 export * from '@angular-mdc/web/icon';
 export * from '@angular-mdc/web/icon-toggle';
 export * from '@angular-mdc/web/linear-progress';
+export * from '@angular-mdc/web/line-ripple';
 export * from '@angular-mdc/web/list';
 export * from '@angular-mdc/web/menu';
 export * from '@angular-mdc/web/radio';

src/lib/textfield/public-api.ts

@@ -3,7 +3,6 @@ export * from './text-field';
 export * from './text-field-box';
 export * from './outline';
 export * from './textarea';
-export * from './bottom-line';
 export * from './helper-text';
 export * from './icon';
 export * from './label';

src/lib/textfield/text-field-box.ts

@@ -33,7 +33,7 @@ export const MDC_TEXTFIELD_BOX_CONTROL_VALUE_ACCESSOR: any = {
     (blur)="onBlur()"
     (input)="onInput($event.target.value)" />
   <mdc-text-field-label [attr.for]="id">{{label}}</mdc-text-field-label>
-  <mdc-text-field-bottom-line></mdc-text-field-bottom-line>
+  <mdc-line-ripple></mdc-line-ripple>
   <ng-content select="mdc-icon"></ng-content>
   `,
   providers: [

src/lib/textfield/text-field-module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
-import { MdcTextFieldBottomLine } from './bottom-line';
+import { MdcLineRipple } from '@angular-mdc/web/line-ripple';
 import { MdcTextFieldHelperText } from './helper-text';
 import {
   MdcTextFieldLeadingIcon,
@@ -20,7 +20,7 @@ import {
 const TEXTFIELD_COMPONENTS = [
   MdcTextarea,
   MdcTextField,
-  MdcTextFieldBottomLine,
+  MdcLineRipple,
   MdcTextFieldBox,
   MdcTextFieldHelperText,
   MdcTextFieldIdleOutline,

src/lib/textfield/text-field.ts

@@ -22,7 +22,7 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { toBoolean, isBrowser, EventRegistry } from '@angular-mdc/web/common';
 
 import { MdcTextFieldHelperText } from './helper-text';
-import { MdcTextFieldBottomLine } from './bottom-line';
+import { MdcLineRipple } from '@angular-mdc/web/line-ripple';
 import { MdcTextFieldOutline, MdcTextFieldIdleOutline } from './outline';
 import { MdcTextFieldLeadingIcon, MdcTextFieldTrailingIcon } from './icon';
 import { MdcTextFieldLabel } from './label';
@@ -67,7 +67,7 @@ export const MDC_TEXTFIELD_CONTROL_VALUE_ACCESSOR: any = {
     (blur)="onBlur()"
     (input)="onInput($event.target.value)" />
     <mdc-text-field-label [attr.for]="id" *ngIf="!placeholder">{{label}}</mdc-text-field-label>
-    <mdc-text-field-bottom-line *ngIf="!outline"></mdc-text-field-bottom-line>
+    <mdc-line-ripple *ngIf="!outline"></mdc-line-ripple>
     <mdc-text-field-outline *ngIf="outline"></mdc-text-field-outline>
     <mdc-text-field-idle-outline *ngIf="outline"></mdc-text-field-idle-outline>
     <ng-content></ng-content>
@@ -103,7 +103,7 @@ export class MdcTextField implements AfterViewInit, OnChanges, OnDestroy, Contro
   @HostBinding('class.mdc-text-field') isHostClass = true;
   @ViewChild('input') inputText: ElementRef;
   @ViewChild(MdcTextFieldLabel) inputLabel: MdcTextFieldLabel;
-  @ViewChild(MdcTextFieldBottomLine) bottomLine: MdcTextFieldBottomLine;
+  @ViewChild(MdcLineRipple) bottomLine: MdcLineRipple;
   @ContentChild(MdcTextFieldLeadingIcon) leadingIcon: MdcTextFieldLeadingIcon;
   @ContentChild(MdcTextFieldTrailingIcon) trailingIcon: MdcTextFieldTrailingIcon;
   @ViewChild(MdcTextFieldOutline) outlined: MdcTextFieldOutline;
@@ -422,6 +422,7 @@ export class MdcTextField implements AfterViewInit, OnChanges, OnDestroy, Contro
     }
   }
 
+  /** Retrieves the DOM element of the component host. */
   private _getHostElement() {
     return this.elementRef.nativeElement;
   }