diff --git a/package.json b/package.json
index 23993d3f2..8d6362924 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
"lint": "npm-run-all --parallel lint:*",
"test": "karma start --single-run",
"bootstrap": "npm install && ./scripts/bootstrap.sh",
- "build": "npm run build-styling && tsc -b packages/base packages/switch packages/ripple packages/button",
+ "build": "npm run build-styling && tsc -b packages/base packages/switch packages/ripple packages/button packages/fab",
"build-styling": "./scripts/build-styling.sh",
"update-gh-pages": "npm run bootstrap && ./scripts/publish-demos.sh"
},
diff --git a/packages/button/src/mwc-button.ts b/packages/button/src/mwc-button.ts
index 23db82c1c..84ec2d27a 100644
--- a/packages/button/src/mwc-button.ts
+++ b/packages/button/src/mwc-button.ts
@@ -14,12 +14,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
-import {LitElement, html, property} from '@polymer/lit-element/lit-element.js';
+import {LitElement, html, property, customElement} from '@polymer/lit-element/lit-element.js';
import {classMap} from 'lit-html/directives/classMap.js';
import {style} from './mwc-button-css';
import {ripple} from '@material/mwc-ripple/ripple-directive.js';
import '@material/mwc-icon/mwc-icon-font.js';
+@customElement('mwc-button' as any)
export class Button extends LitElement {
@property({type: Boolean})
@@ -69,4 +70,8 @@ export class Button extends LitElement {
}
}
-customElements.define('mwc-button', Button);
+declare global {
+ interface HTMLElementTagNameMap {
+ 'mwc-button': Button;
+ }
+}
\ No newline at end of file
diff --git a/packages/fab/mwc-fab-css.js b/packages/fab/mwc-fab-css.js
deleted file mode 100644
index 908b5a8b2..000000000
--- a/packages/fab/mwc-fab-css.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-@license
-Copyright 2018 Google Inc. All Rights Reserved.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import {html} from '@polymer/lit-element/lit-element.js';
-
-export const style = html``;
diff --git a/packages/fab/mwc-fab.js b/packages/fab/mwc-fab.js
deleted file mode 100644
index 06198b925..000000000
--- a/packages/fab/mwc-fab.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
-@license
-Copyright 2018 Google Inc. All Rights Reserved.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import {LitElement, html} from '@polymer/lit-element/lit-element.js';
-import {classMap} from 'lit-html/directives/classMap.js';
-import {style} from './mwc-fab-css.js';
-import {MDCWCRipple} from '@material/mwc-ripple/mwc-ripple.js';
-import {afterNextRender} from '@material/mwc-base/utils.js';
-import '@material/mwc-icon/mwc-icon-font.js';
-
-export class Fab extends LitElement {
- static get properties() {
- return {
- mini: {type: Boolean},
- exited: {type: Boolean},
- disabled: {type: Boolean},
- icon: {type: String},
- label: {type: String},
- };
- }
-
- constructor() {
- super();
- this.icon = '';
- this.mini = false;
- this.exited = false;
- this.label = '';
- }
-
- createRenderRoot() {
- return this.attachShadow({mode: 'open', delegatesFocus: true});
- }
-
- firstUpdated() {
- this._ripple = new MDCWCRipple(this.shadowRoot.querySelector('.mdc-fab'));
- }
-
- renderStyle() {
- return style;
- }
-
- render() {
- const {icon, mini, exited, disabled, label} = this;
- const hostClassInfo = {
- 'mdc-fab--mini': mini,
- 'mdc-fab--exited': exited,
- };
- return html`
- ${this.renderStyle()}
- `;
- }
-}
-
-customElements.define('mwc-fab', Fab);
diff --git a/packages/fab/mwc-fab.scss b/packages/fab/src/mwc-fab.scss
similarity index 100%
rename from packages/fab/mwc-fab.scss
rename to packages/fab/src/mwc-fab.scss
diff --git a/packages/fab/src/mwc-fab.ts b/packages/fab/src/mwc-fab.ts
new file mode 100644
index 000000000..ebdd8ce7c
--- /dev/null
+++ b/packages/fab/src/mwc-fab.ts
@@ -0,0 +1,81 @@
+/**
+@license
+Copyright 2018 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import {LitElement, html, property, customElement} from '@polymer/lit-element/lit-element.js';
+import {classMap} from 'lit-html/directives/classMap.js';
+import {style} from './mwc-fab-css';
+import {ripple} from '@material/mwc-ripple/ripple-directive.js';
+import '@material/mwc-icon/mwc-icon-font.js';
+
+@customElement('mwc-fab' as any)
+export class Fab extends LitElement {
+
+ @property({type: Boolean})
+ mini = false;
+
+ @property({type: Boolean})
+ exited = false;
+
+ @property({type: Boolean})
+ disabled = false;
+
+ @property({type: Boolean})
+ extended = false;
+
+ @property({type: Boolean})
+ showIconAtEnd = false;
+
+ @property()
+ icon = '';
+
+ @property()
+ label = '';
+
+
+ createRenderRoot() {
+ return this.attachShadow({mode: 'open', delegatesFocus: true});
+ }
+
+ renderStyle() {
+ return style;
+ }
+
+ render() {
+ const classes = {
+ 'mdc-fab--mini': this.mini,
+ 'mdc-fab--exited': this.exited,
+ 'mdc-fab--extended': this.extended,
+ };
+ const showLabel = this.label !== '' && this.extended;
+ return html`
+ ${this.renderStyle()}
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'mwc-fab': Fab;
+ }
+}
\ No newline at end of file
diff --git a/packages/fab/tsconfig.json b/packages/fab/tsconfig.json
new file mode 100644
index 000000000..3c8ee59d8
--- /dev/null
+++ b/packages/fab/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "src",
+ "outDir": "."
+ },
+ "include": [
+ "src/*.ts"
+ ]
+}
\ No newline at end of file