Merge remote-tracking branch 'origin/feat/typescript' into feat/types…

…cript--notched-outline

packages/mdc-floating-label/adapter.js → packages/mdc-floating-label/adapter.ts

@@ -21,50 +21,40 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
+import {EventType, SpecificEventListener} from '@material/base';
 
 /**
- * Adapter for MDC Floating Label.
- *
- * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the floating label into your framework. See
- * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
- * for more information.
- *
- * @record
+ * Defines the shape of the adapter expected by the foundation.
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
  */
-class MDCFloatingLabelAdapter {
+interface MDCFloatingLabelAdapter {
   /**
    * Adds a class to the label element.
-   * @param {string} className
    */
-  addClass(className) {}
+  addClass(className: string): void;
 
   /**
    * Removes a class from the label element.
-   * @param {string} className
    */
-  removeClass(className) {}
+  removeClass(className: string): void;
 
   /**
    * Returns the width of the label element.
-   * @return {number}
    */
-  getWidth() {}
+  getWidth(): number;
 
   /**
    * Registers an event listener on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
    */
-  registerInteractionHandler(evtType, handler) {}
+  registerInteractionHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
 
   /**
    * Deregisters an event listener on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
    */
-  deregisterInteractionHandler(evtType, handler) {}
+  deregisterInteractionHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
 }
 
-export default MDCFloatingLabelAdapter;
+export {MDCFloatingLabelAdapter as default, MDCFloatingLabelAdapter};

packages/mdc-floating-label/constants.js → packages/mdc-floating-label/constants.ts

@@ -21,7 +21,6 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
 const cssClasses = {
   LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',
   LABEL_SHAKE: 'mdc-floating-label--shake',

packages/mdc-floating-label/foundation.js → packages/mdc-floating-label/foundation.ts

@@ -21,42 +21,36 @@
  * THE SOFTWARE.
  */
 
+import {SpecificEventListener} from '@material/base';
 import {MDCFoundation} from '@material/base/foundation';
-import MDCFloatingLabelAdapter from './adapter';
+import {MDCFloatingLabelAdapter} from './adapter';
 import {cssClasses} from './constants';
 
-/**
- * @extends {MDCFoundation<!MDCFloatingLabelAdapter>}
- * @final
- */
-class MDCFloatingLabelFoundation extends MDCFoundation {
-  /** @return enum {string} */
+class MDCFloatingLabelFoundation extends MDCFoundation<MDCFloatingLabelAdapter> {
   static get cssClasses() {
     return cssClasses;
   }
 
   /**
-   * {@see MDCFloatingLabelAdapter} for typing information on parameters and return
-   * types.
-   * @return {!MDCFloatingLabelAdapter}
+   * See {@link MDCFloatingLabelAdapter} for typing information on parameters and return types.
    */
-  static get defaultAdapter() {
-    return /** @type {!MDCFloatingLabelAdapter} */ ({
-      addClass: () => {},
-      removeClass: () => {},
-      getWidth: () => {},
-      registerInteractionHandler: () => {},
-      deregisterInteractionHandler: () => {},
-    });
+  static get defaultAdapter(): MDCFloatingLabelAdapter {
+    // tslint:disable:object-literal-sort-keys
+    return {
+      addClass: () => undefined,
+      removeClass: () => undefined,
+      getWidth: () => 0,
+      registerInteractionHandler: () => undefined,
+      deregisterInteractionHandler: () => undefined,
+    };
+    // tslint:enable:object-literal-sort-keys
   }
 
-  /**
-   * @param {!MDCFloatingLabelAdapter} adapter
-   */
-  constructor(adapter) {
-    super(Object.assign(MDCFloatingLabelFoundation.defaultAdapter, adapter));
+  private readonly shakeAnimationEndHandler_: SpecificEventListener<'animationend'>;
+
+  constructor(adapter: Partial<MDCFloatingLabelAdapter> = {}) {
+    super({...MDCFloatingLabelFoundation.defaultAdapter, ...adapter});
 
-    /** @private {function(!Event): undefined} */
     this.shakeAnimationEndHandler_ = () => this.handleShakeAnimationEnd_();
   }
 
@@ -70,18 +64,16 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
 
   /**
    * Returns the width of the label element.
-   * @return {number}
    */
-  getWidth() {
+  getWidth(): number {
     return this.adapter_.getWidth();
   }
 
   /**
-   * Styles the label to produce the label shake for errors.
-   * @param {boolean} shouldShake adds shake class if true,
-   * otherwise removes shake class.
+   * Styles the label to produce a shake animation to indicate an error.
+   * @param shouldShake If true, adds the shake CSS class; otherwise, removes shake class.
    */
-  shake(shouldShake) {
+  shake(shouldShake: boolean) {
     const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (shouldShake) {
       this.adapter_.addClass(LABEL_SHAKE);
@@ -92,10 +84,9 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
 
   /**
    * Styles the label to float or dock.
-   * @param {boolean} shouldFloat adds float class if true, otherwise remove
-   * float and shake class to dock label.
+   * @param shouldFloat If true, adds the float CSS class; otherwise, removes float and shake classes to dock the label.
    */
-  float(shouldFloat) {
+  float(shouldFloat: boolean) {
     const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (shouldFloat) {
       this.adapter_.addClass(LABEL_FLOAT_ABOVE);
@@ -105,13 +96,10 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
     }
   }
 
-  /**
-   * Handles an interaction event on the root element.
-   */
-  handleShakeAnimationEnd_() {
+  private handleShakeAnimationEnd_() {
     const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     this.adapter_.removeClass(LABEL_SHAKE);
   }
 }
 
-export default MDCFloatingLabelFoundation;
+export {MDCFloatingLabelFoundation as default, MDCFloatingLabelFoundation};

packages/mdc-floating-label/index.js → packages/mdc-floating-label/index.ts

@@ -22,59 +22,46 @@
  */
 
 import {MDCComponent} from '@material/base/component';
-import MDCFloatingLabelAdapter from './adapter';
-import MDCFloatingLabelFoundation from './foundation';
+import {MDCFloatingLabelFoundation} from './foundation';
 
-/**
- * @extends {MDCComponent<!MDCFloatingLabelFoundation>}
- * @final
- */
-class MDCFloatingLabel extends MDCComponent {
-  /**
-   * @param {!Element} root
-   * @return {!MDCFloatingLabel}
-   */
-  static attachTo(root) {
+class MDCFloatingLabel extends MDCComponent<MDCFloatingLabelFoundation> {
+  static attachTo(root: Element): MDCFloatingLabel {
     return new MDCFloatingLabel(root);
   }
 
   /**
    * Styles the label to produce the label shake for errors.
-   * @param {boolean} shouldShake styles the label to shake by adding shake class
-   * if true, otherwise will stop shaking by removing shake class.
+   * @param shouldShake If true, shakes the label by adding a CSS class; otherwise, stops shaking by removing the class.
    */
-  shake(shouldShake) {
+  shake(shouldShake: boolean) {
     this.foundation_.shake(shouldShake);
   }
 
   /**
-   * Styles label to float/dock.
-   * @param {boolean} shouldFloat styles the label to float by adding float class
-   * if true, otherwise docks the label by removing the float class.
+   * Styles the label to float/dock.
+   * @param shouldFloat If true, floats the label by adding a CSS class; otherwise, docks it by removing the class.
    */
-  float(shouldFloat) {
+  float(shouldFloat: boolean) {
     this.foundation_.float(shouldFloat);
   }
 
-  /**
-   * @return {number}
-   */
-  getWidth() {
+  getWidth(): number {
     return this.foundation_.getWidth();
   }
 
-  /**
-   * @return {!MDCFloatingLabelFoundation}
-   */
-  getDefaultFoundation() {
+  getDefaultFoundation(): MDCFloatingLabelFoundation {
+    // tslint:disable:object-literal-sort-keys
     return new MDCFloatingLabelFoundation({
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       getWidth: () => this.root_.scrollWidth,
       registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
       deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
     });
+    // tslint:enable:object-literal-sort-keys
   }
 }
 
-export {MDCFloatingLabel, MDCFloatingLabelFoundation};
+export {MDCFloatingLabel as default, MDCFloatingLabel};
+export * from './adapter';
+export * from './foundation';

packages/mdc-line-ripple/README.md

@@ -84,8 +84,8 @@ Method Signature | Description
 `addClass(className: string) => void` | Adds a class to the root element.
 `removeClass(className: string) => void` | Removes a class from the root element.
 `setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.
-`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element for a given event.
-`deregisterEventHandler(handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.
+`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.
+`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.
 
 ### `MDCLineRippleFoundation`
 

packages/mdc-line-ripple/adapter.js → packages/mdc-line-ripple/adapter.ts

@@ -21,57 +21,42 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
+import {EventType, SpecificEventListener} from '@material/base/index';
 
 /**
- * Adapter for MDC TextField Line Ripple.
- *
- * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the line ripple into your framework. See
- * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
- * for more information.
- *
- * @record
+ * Defines the shape of the adapter expected by the foundation.
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
  */
-class MDCLineRippleAdapter {
+interface MDCLineRippleAdapter {
   /**
    * Adds a class to the line ripple element.
-   * @param {string} className
    */
-  addClass(className) {}
+  addClass(className: string): void;
 
   /**
    * Removes a class from the line ripple element.
-   * @param {string} className
    */
-  removeClass(className) {}
+  removeClass(className: string): void;
 
-  /**
-   * @param {string} className
-   * @return {boolean}
-   */
-  hasClass(className) {}
+  hasClass(className: string): boolean;
 
   /**
    * Sets the style property with propertyName to value on the root element.
-   * @param {string} propertyName
-   * @param {string} value
    */
-  setStyle(propertyName, value) {}
+  setStyle(propertyName: string, value: string): void;
 
   /**
    * Registers an event listener on the line ripple element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
    */
-  registerEventHandler(evtType, handler) {}
+  registerEventHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
 
   /**
    * Deregisters an event listener on the line ripple element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
    */
-  deregisterEventHandler(evtType, handler) {}
+  deregisterEventHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
 }
 
-export default MDCLineRippleAdapter;
+export {MDCLineRippleAdapter as default, MDCLineRippleAdapter};

packages/mdc-line-ripple/constants.js → packages/mdc-line-ripple/constants.ts

@@ -21,7 +21,6 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
 const cssClasses = {
   LINE_RIPPLE_ACTIVE: 'mdc-line-ripple--active',
   LINE_RIPPLE_DEACTIVATING: 'mdc-line-ripple--deactivating',