diff --git a/packages/mdc-notched-outline/adapter.js b/packages/mdc-notched-outline/adapter.ts similarity index 70% rename from packages/mdc-notched-outline/adapter.js rename to packages/mdc-notched-outline/adapter.ts index 9c2b84c1088..2546f126091 100644 --- a/packages/mdc-notched-outline/adapter.js +++ b/packages/mdc-notched-outline/adapter.ts @@ -21,41 +21,33 @@ * THE SOFTWARE. */ -/* eslint no-unused-vars: [2, {"args": "none"}] */ - /** - * Adapter for MDC Notched Outline. - * - * Defines the shape of the adapter expected by the foundation. Implement this - * adapter to integrate the Notched Outline 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 MDCNotchedOutlineAdapter { +interface MDCNotchedOutlineAdapter { /** * Adds a class to the root element. - * @param {string} className */ - addClass(className) {} + addClass(className: string): void; /** * Removes a class from the root element. - * @param {string} className */ - removeClass(className) {} + removeClass(className: string): void; /** * Sets the width style property of the notch element. - * @param {number} width */ - setNotchWidthProperty(width) {} + setNotchWidthProperty(width: number): void; /** * Removes the width style property from the notch element. */ - removeNotchWidthProperty() {} + removeNotchWidthProperty(): void; } -export default MDCNotchedOutlineAdapter; +export {MDCNotchedOutlineAdapter as default, MDCNotchedOutlineAdapter}; diff --git a/packages/mdc-notched-outline/constants.js b/packages/mdc-notched-outline/constants.ts similarity index 95% rename from packages/mdc-notched-outline/constants.js rename to packages/mdc-notched-outline/constants.ts index 8fae939f521..8a62d8a6e05 100644 --- a/packages/mdc-notched-outline/constants.js +++ b/packages/mdc-notched-outline/constants.ts @@ -21,22 +21,19 @@ * THE SOFTWARE. */ -/** @enum {string} */ const strings = { NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch', }; -/** @enum {number} */ const numbers = { // This should stay in sync with $mdc-notched-outline-padding * 2. NOTCH_ELEMENT_PADDING: 8, }; -/** @enum {string} */ const cssClasses = { + NO_LABEL: 'mdc-notched-outline--no-label', OUTLINE_NOTCHED: 'mdc-notched-outline--notched', OUTLINE_UPGRADED: 'mdc-notched-outline--upgraded', - NO_LABEL: 'mdc-notched-outline--no-label', }; export {cssClasses, numbers, strings}; diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.ts similarity index 66% rename from packages/mdc-notched-outline/foundation.js rename to packages/mdc-notched-outline/foundation.ts index f6872a050da..c345a993c2a 100644 --- a/packages/mdc-notched-outline/foundation.js +++ b/packages/mdc-notched-outline/foundation.ts @@ -22,56 +22,44 @@ */ import {MDCFoundation} from '@material/base/foundation'; -import MDCNotchedOutlineAdapter from './adapter'; -import {cssClasses, strings, numbers} from './constants'; +import {MDCNotchedOutlineAdapter} from './adapter'; +import {cssClasses, numbers, strings} from './constants'; -/** - * @extends {MDCFoundation} - * @final - */ -class MDCNotchedOutlineFoundation extends MDCFoundation { - /** @return enum {string} */ +class MDCNotchedOutlineFoundation extends MDCFoundation { static get strings() { return strings; } - /** @return enum {string} */ static get cssClasses() { return cssClasses; } - /** @return enum {number} */ static get numbers() { return numbers; } /** - * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return - * types. - * @return {!MDCNotchedOutlineAdapter} + * See {@link MDCNotchedOutlineAdapter} for typing information on parameters and return types. */ - static get defaultAdapter() { - return /** @type {!MDCNotchedOutlineAdapter} */ ({ - addClass: () => {}, - removeClass: () => {}, - setNotchWidthProperty: () => {}, - removeNotchWidthProperty: () => {}, - }); + static get defaultAdapter(): MDCNotchedOutlineAdapter { + // tslint:disable:object-literal-sort-keys + return { + addClass: () => undefined, + removeClass: () => undefined, + setNotchWidthProperty: () => undefined, + removeNotchWidthProperty: () => undefined, + }; + // tslint:enable:object-literal-sort-keys } - /** - * @param {!MDCNotchedOutlineAdapter} adapter - */ - constructor(adapter) { - super(Object.assign(MDCNotchedOutlineFoundation.defaultAdapter, adapter)); + constructor(adapter: Partial = {}) { + super({...MDCNotchedOutlineFoundation.defaultAdapter, ...adapter}); } /** - * Adds the outline notched selector and updates the notch width - * calculated based off of notchWidth. - * @param {number} notchWidth + * Adds the outline notched selector and updates the notch width calculated based off of notchWidth. */ - notch(notchWidth) { + notch(notchWidth: number) { const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses; if (notchWidth > 0) { @@ -92,4 +80,4 @@ class MDCNotchedOutlineFoundation extends MDCFoundation { } } -export default MDCNotchedOutlineFoundation; +export {MDCNotchedOutlineFoundation as default, MDCNotchedOutlineFoundation}; diff --git a/packages/mdc-notched-outline/index.js b/packages/mdc-notched-outline/index.ts similarity index 57% rename from packages/mdc-notched-outline/index.js rename to packages/mdc-notched-outline/index.ts index ac7cd853b88..6b5d33c6130 100644 --- a/packages/mdc-notched-outline/index.js +++ b/packages/mdc-notched-outline/index.ts @@ -22,35 +22,21 @@ */ import {MDCComponent} from '@material/base/component'; - -import MDCNotchedOutlineAdapter from './adapter'; -import MDCNotchedOutlineFoundation from './foundation'; import {MDCFloatingLabelFoundation} from '@material/floating-label/index'; import {cssClasses, strings} from './constants'; +import {MDCNotchedOutlineFoundation} from './foundation'; -/** - * @extends {MDCComponent} - * @final - */ -class MDCNotchedOutline extends MDCComponent { - /** - * @param {!Element} root - * @return {!MDCNotchedOutline} - */ - static attachTo(root) { +class MDCNotchedOutline extends MDCComponent { + static attachTo(root: Element): MDCNotchedOutline { return new MDCNotchedOutline(root); } - /** @param {...?} args */ - constructor(...args) { - super(...args); - /** @private {Element} */ - this.notchElement_; - } + + private notchElement_!: HTMLElement; // assigned in initialSyncWithDOM() initialSyncWithDOM() { - const label = this.root_.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT); - this.notchElement_ = this.root_.querySelector(strings.NOTCH_ELEMENT_SELECTOR); + this.notchElement_ = this.root_.querySelector(strings.NOTCH_ELEMENT_SELECTOR)!; + const label = this.root_.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT); if (label) { label.style.transitionDuration = '0s'; this.root_.classList.add(cssClasses.OUTLINE_UPGRADED); @@ -63,10 +49,10 @@ class MDCNotchedOutline extends MDCComponent { } /** - * Updates classes and styles to open the notch to the specified width. - * @param {number} notchWidth The notch width in the outline. - */ - notch(notchWidth) { + * Updates classes and styles to open the notch to the specified width. + * @param notchWidth The notch width in the outline. + */ + notch(notchWidth: number) { this.foundation_.notch(notchWidth); } @@ -77,18 +63,18 @@ class MDCNotchedOutline extends MDCComponent { this.foundation_.closeNotch(); } - /** - * @return {!MDCNotchedOutlineFoundation} - */ - getDefaultFoundation() { - return new MDCNotchedOutlineFoundation( - /** @type {!MDCNotchedOutlineAdapter} */ (Object.assign({ - addClass: (className) => this.root_.classList.add(className), - removeClass: (className) => this.root_.classList.remove(className), - setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width + 'px'), - removeNotchWidthProperty: () => this.notchElement_.style.removeProperty('width'), - }))); + getDefaultFoundation(): MDCNotchedOutlineFoundation { + // tslint:disable:object-literal-sort-keys + return new MDCNotchedOutlineFoundation({ + addClass: (className) => this.root_.classList.add(className), + removeClass: (className) => this.root_.classList.remove(className), + setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width + 'px'), + removeNotchWidthProperty: () => this.notchElement_.style.removeProperty('width'), + }); + // tslint:enable:object-literal-sort-keys } } -export {MDCNotchedOutline, MDCNotchedOutlineFoundation}; +export {MDCNotchedOutline as default, MDCNotchedOutline}; +export * from './adapter'; +export * from './foundation'; diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index e89877dc6f7..32fcef28849 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -170,7 +170,7 @@ class JsBundleFactory { linearProgress: getAbsolutePath('/packages/mdc-linear-progress/index.ts'), menu: getAbsolutePath('/packages/mdc-menu/index.ts'), menuSurface: getAbsolutePath('/packages/mdc-menu-surface/index.ts'), - notchedOutline: getAbsolutePath('/packages/mdc-notched-outline/index.js'), + notchedOutline: getAbsolutePath('/packages/mdc-notched-outline/index.ts'), radio: getAbsolutePath('/packages/mdc-radio/index.ts'), ripple: getAbsolutePath('/packages/mdc-ripple/index.ts'), select: getAbsolutePath('/packages/mdc-select/index.js'),