From d7f516c939324473d9813c594080bfc7c350c8ca Mon Sep 17 00:00:00 2001 From: Dominic Carretto Date: Mon, 30 Oct 2017 06:27:20 -0400 Subject: [PATCH] refactor: Library improvements + refactoring (#329) Closes #328 --- package.json | 1 + .../components/buttons/fab-demo/fab-demo.ts | 5 +- .../icon-toggle-demo/icon-toggle-demo.ts | 8 +- .../components/dialog-demo/dialog-demo.ts | 13 +- .../components/drawer-demo/drawer-demo.html | 287 +++++++++--------- .../components/drawer-demo/drawer-demo.ts | 10 +- .../snackbar-demo/snackbar-demo.html | 1 - .../components/snackbar-demo/snackbar-demo.ts | 2 +- src/demo-app/docs/getting-started.html | 43 +-- src/demo-app/home/home.html | 2 +- src/demo-app/home/home.ts | 3 +- src/demo-app/navigation/app-toolbar.ts | 3 +- src/lib/button/button.ts | 37 +-- src/lib/button/index.ts | 2 + src/lib/card/card.ts | 22 +- src/lib/card/index.ts | 3 + src/lib/cdk/overlay/overlay-container.ts | 12 +- src/lib/cdk/overlay/overlay-ref.ts | 4 +- .../{checkbox-adapter.d.ts => adapter.d.ts} | 0 .../{checkbox.component.ts => checkbox.ts} | 66 ++-- src/lib/checkbox/index.ts | 8 +- src/lib/common/event-registry.ts | 8 +- .../{elevation.directive.ts => elevation.ts} | 17 +- src/lib/core/elevation/index.ts | 8 +- src/lib/core/material-icon/index.ts | 4 +- ...ial-icon.directive.ts => material-icon.ts} | 0 src/lib/core/ripple/index.ts | 3 + src/lib/core/ripple/ripple.service.ts | 32 +- src/lib/core/theme/index.ts | 4 +- src/lib/core/theme/theme-dark.directive.ts | 33 -- src/lib/core/theme/theme-dark.ts | 31 ++ src/lib/core/typography/index.ts | 56 ++-- ...{typography.directive.ts => typography.ts} | 26 +- .../{dialog-adapter.d.ts => adapter.d.ts} | 0 .../dialog/{dialog.component.ts => dialog.ts} | 84 ++--- src/lib/dialog/index.ts | 36 +-- .../{drawer-adapter.d.ts => adapter.d.ts} | 0 src/lib/drawer/constants.ts | 3 + src/lib/drawer/index.ts | 84 ++--- ...anent.component.ts => drawer-permanent.ts} | 16 +- ...tent.component.ts => drawer-persistent.ts} | 66 ++-- ...orary.component.ts => drawer-temporary.ts} | 69 ++--- src/lib/fab/{fab.component.ts => fab.ts} | 58 ++-- src/lib/fab/index.ts | 10 +- .../{form-field-adapter.d.ts => adapter.d.ts} | 0 ...{form-field.directive.ts => form-field.ts} | 32 +- src/lib/form-field/index.ts | 8 +- ...con-toggle.component.ts => icon-toggle.ts} | 90 +++--- src/lib/icon-toggle/index.ts | 14 +- src/lib/icon/icon.ts | 76 ++--- ...ear-progress-adapter.d.ts => adapter.d.ts} | 0 src/lib/linear-progress/index.ts | 8 +- ...ogress.component.ts => linear-progress.ts} | 36 +-- src/lib/list/index.ts | 23 +- src/lib/list/list-divider.component.ts | 31 -- src/lib/list/list-group.directive.ts | 23 -- .../{list-item.directive.ts => list-item.ts} | 30 +- src/lib/list/list.component.ts | 61 ---- src/lib/list/list.ts | 100 ++++++ src/lib/menu/menu.ts | 28 +- src/lib/public_api.ts | 1 + .../{radio-adapter.d.ts => adapter.d.ts} | 0 src/lib/radio/index.ts | 12 +- .../radio/{radio.component.ts => radio.ts} | 52 ++-- src/lib/select/select.ts | 18 +- src/lib/slider/index.ts | 4 +- .../slider/{slider.component.ts => slider.ts} | 44 +-- .../{snackbar-adapter.d.ts => adapter.d.ts} | 0 .../snackbar/snackbar-container.component.ts | 2 +- src/lib/snackbar/snackbar.component.ts | 44 +-- src/lib/switch/index.ts | 12 +- .../switch/{switch.component.ts => switch.ts} | 26 +- src/lib/tabs/index.ts | 40 ++- ...bar-scroller-adapter.d.ts => adapter.d.ts} | 0 ...oller.component.ts => tab-bar-scroller.ts} | 61 ++-- .../{tab-bar-adapter.d.ts => adapter.d.ts} | 0 .../{tab-bar.directive.ts => tab-bar.ts} | 70 ++--- .../tab/{tab-adapter.d.ts => adapter.d.ts} | 0 src/lib/tabs/tab/{tab.component.ts => tab.ts} | 50 +-- src/lib/textfield/textfield-input.ts | 4 +- src/lib/textfield/textfield.ts | 51 ++-- .../{toolbar-adapter.d.ts => adapter.d.ts} | 0 src/lib/toolbar/index.ts | 36 +-- .../toolbar/toolbar-fixed-adjust.directive.ts | 14 - .../toolbar/toolbar-icon-menu.directive.ts | 14 - src/lib/toolbar/toolbar-icon.directive.ts | 14 - src/lib/toolbar/toolbar-row.directive.ts | 14 - src/lib/toolbar/toolbar-section.directive.ts | 24 -- src/lib/toolbar/toolbar-title.directive.ts | 14 - .../{toolbar.component.ts => toolbar.ts} | 90 +++++- test/unit/checkbox/checkbox.test.ts | 26 +- test/unit/dialog/dialog.test.ts | 8 +- test/unit/drawer/permanent-drawer.test.ts | 11 +- test/unit/drawer/persistent-drawer.test.ts | 8 +- test/unit/drawer/temporary-drawer.test.ts | 8 +- test/unit/elevation/elevation.test.ts | 8 +- test/unit/fab/fab.test.ts | 8 +- test/unit/form-field/form-field.test.ts | 8 +- test/unit/icon-toggle/icon-toggle.test.ts | 8 +- test/unit/icon/icon.test.ts | 8 +- .../linear-progress/linear-progress.test.ts | 8 +- test/unit/radio/radio.test.ts | 22 +- test/unit/slider/slider.test.ts | 2 +- test/unit/switch/switch.test.ts | 20 +- test/unit/tabs/tab-bar.test.ts | 6 +- test/unit/tabs/tab.test.ts | 6 +- test/unit/textfield/textarea.test.ts | 2 +- test/unit/textfield/textfield-box.test.ts | 2 +- test/unit/textfield/textfield.test.ts | 2 +- test/unit/toolbar/toolbar.test.ts | 8 +- test/unit/typography/typography.test.ts | 13 - 111 files changed, 1256 insertions(+), 1387 deletions(-) rename src/lib/checkbox/{checkbox-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/checkbox/{checkbox.component.ts => checkbox.ts} (72%) rename src/lib/core/elevation/{elevation.directive.ts => elevation.ts} (62%) rename src/lib/core/material-icon/{material-icon.directive.ts => material-icon.ts} (100%) delete mode 100644 src/lib/core/theme/theme-dark.directive.ts create mode 100644 src/lib/core/theme/theme-dark.ts rename src/lib/core/typography/{typography.directive.ts => typography.ts} (79%) rename src/lib/dialog/{dialog-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/dialog/{dialog.component.ts => dialog.ts} (73%) rename src/lib/drawer/{drawer-adapter.d.ts => adapter.d.ts} (100%) create mode 100644 src/lib/drawer/constants.ts rename src/lib/drawer/permanent/{drawer-permanent.component.ts => drawer-permanent.ts} (74%) rename src/lib/drawer/persistent/{drawer-persistent.component.ts => drawer-persistent.ts} (71%) rename src/lib/drawer/temporary/{drawer-temporary.component.ts => drawer-temporary.ts} (73%) rename src/lib/fab/{fab.component.ts => fab.ts} (53%) rename src/lib/form-field/{form-field-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/form-field/{form-field.directive.ts => form-field.ts} (77%) rename src/lib/icon-toggle/{icon-toggle.component.ts => icon-toggle.ts} (61%) rename src/lib/linear-progress/{linear-progress-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/linear-progress/{linear-progress.component.ts => linear-progress.ts} (68%) delete mode 100644 src/lib/list/list-divider.component.ts delete mode 100644 src/lib/list/list-group.directive.ts rename src/lib/list/{list-item.directive.ts => list-item.ts} (73%) delete mode 100644 src/lib/list/list.component.ts create mode 100644 src/lib/list/list.ts rename src/lib/radio/{radio-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/radio/{radio.component.ts => radio.ts} (74%) rename src/lib/slider/{slider.component.ts => slider.ts} (87%) rename src/lib/snackbar/{snackbar-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/switch/{switch.component.ts => switch.ts} (85%) rename src/lib/tabs/tab-bar-scroller/{tab-bar-scroller-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/tabs/tab-bar-scroller/{tab-bar-scroller.component.ts => tab-bar-scroller.ts} (76%) rename src/lib/tabs/tab-bar/{tab-bar-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/tabs/tab-bar/{tab-bar.directive.ts => tab-bar.ts} (66%) rename src/lib/tabs/tab/{tab-adapter.d.ts => adapter.d.ts} (100%) rename src/lib/tabs/tab/{tab.component.ts => tab.ts} (66%) rename src/lib/toolbar/{toolbar-adapter.d.ts => adapter.d.ts} (100%) delete mode 100644 src/lib/toolbar/toolbar-fixed-adjust.directive.ts delete mode 100644 src/lib/toolbar/toolbar-icon-menu.directive.ts delete mode 100644 src/lib/toolbar/toolbar-icon.directive.ts delete mode 100644 src/lib/toolbar/toolbar-row.directive.ts delete mode 100644 src/lib/toolbar/toolbar-section.directive.ts delete mode 100644 src/lib/toolbar/toolbar-title.directive.ts rename src/lib/toolbar/{toolbar.component.ts => toolbar.ts} (64%) diff --git a/package.json b/package.json index c9941b4a0..148f3d6a1 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "lint": "npm run lint:ts && npm run lint:css", "lint:ts": "tslint 'src/**/*.ts test/**/*.ts'", "lint:css": "stylelint src/**/*.scss --config .stylelint-config.yaml", + "fix:css": "stylelint --fix src/**/*.scss --config .stylelint-config.yaml", "test": "npm run test:unit", "test:unit": "karma start --single-run", "test:watch": "karma start --auto-watch", diff --git a/src/demo-app/components/buttons/fab-demo/fab-demo.ts b/src/demo-app/components/buttons/fab-demo/fab-demo.ts index c381d0f64..9aa2df82d 100644 --- a/src/demo-app/components/buttons/fab-demo/fab-demo.ts +++ b/src/demo-app/components/buttons/fab-demo/fab-demo.ts @@ -1,13 +1,14 @@ import { Component, ViewChild } from '@angular/core'; -import { MdcFabComponent } from '../../../../lib/public_api'; +// import { MdcFab } from '@angular-mdc/web'; +import { MdcFab } from '../../../../lib/public_api'; @Component({ selector: 'fab-demo', templateUrl: './fab-demo.html' }) export class FabDemo { - @ViewChild('fab') fab: MdcFabComponent; + @ViewChild('fab') fab: MdcFab; isMini: boolean = false; isExited: boolean = false; isRippleDisabled: boolean = false; diff --git a/src/demo-app/components/buttons/icon-toggle-demo/icon-toggle-demo.ts b/src/demo-app/components/buttons/icon-toggle-demo/icon-toggle-demo.ts index d2122b46d..f59ee0287 100644 --- a/src/demo-app/components/buttons/icon-toggle-demo/icon-toggle-demo.ts +++ b/src/demo-app/components/buttons/icon-toggle-demo/icon-toggle-demo.ts @@ -6,8 +6,8 @@ import { Component } from '@angular/core'; }) export class IconToggleDemo { isOn: boolean = false; - isDisabled: boolean; - isPrimary: boolean; - isAccent: boolean; - isDarkTheme: boolean; + isDisabled: boolean = false; + isPrimary: boolean = false; + isAccent: boolean = false; + isDarkTheme: boolean = false; } diff --git a/src/demo-app/components/dialog-demo/dialog-demo.ts b/src/demo-app/components/dialog-demo/dialog-demo.ts index 50ab79380..b3e82c8f2 100644 --- a/src/demo-app/components/dialog-demo/dialog-demo.ts +++ b/src/demo-app/components/dialog-demo/dialog-demo.ts @@ -1,7 +1,8 @@ import { Component, ViewChild } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { MdcDialogComponent, MdcTextfield } from '../../../lib/public_api'; +// import { MdcDialog, MdcTextfield } from '@angular-mdc/web'; +import { MdcDialog, MdcTextfield } from '../../../lib/public_api'; @Component({ selector: 'dialog-demo', @@ -11,11 +12,11 @@ export class DialogDemo { userForm: FormGroup; @ViewChild('input') input: MdcTextfield; - @ViewChild('dialog') dialog: MdcDialogComponent; - @ViewChild('dialogscroll') dialogScroll: MdcDialogComponent; - @ViewChild('dialogalert') dialogAlert: MdcDialogComponent; - @ViewChild('dialoggmail') dialogGmail: MdcDialogComponent; - @ViewChild('dialogform') dialogForm: MdcDialogComponent; + @ViewChild('dialog') dialog: MdcDialog; + @ViewChild('dialogscroll') dialogScroll: MdcDialog; + @ViewChild('dialogalert') dialogAlert: MdcDialog; + @ViewChild('dialoggmail') dialogGmail: MdcDialog; + @ViewChild('dialogform') dialogForm: MdcDialog; ngOnInit() { this.userForm = new FormGroup({ diff --git a/src/demo-app/components/drawer-demo/drawer-demo.html b/src/demo-app/components/drawer-demo/drawer-demo.html index bf451556e..b784b8337 100644 --- a/src/demo-app/components/drawer-demo/drawer-demo.html +++ b/src/demo-app/components/drawer-demo/drawer-demo.html @@ -220,30 +220,30 @@

Drawers

- - homeHome - - - starStar - - - sendSent Mail - - - draftsDrafts - + + homeHome + + + starStar + + + sendSent Mail + + + draftsDrafts + - - emailAll Mail - - - deleteTrash - - - reportSpam - + + emailAll Mail + + + deleteTrash + + + reportSpam + @@ -252,30 +252,30 @@

Drawers

<mdc-permanent-drawer-content> <mdc-list-group> <mdc-list> - <a mdc-list-item mdc-permanent-drawer-selected href="#/drawer-demo"> - <i material-icon mdc-list-item-start>home</i>Home - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start>star</i>Star - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start>send</i>Sent Mail - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start>drafts</i>Drafts - </a> + <mdc-list-item mdc-permanent-drawer-selected> + <mdc-icon mdc-list-item-start>home</mdc-icon>Home + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>star</mdc-icon>Star + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>send</mdc-icon>Sent Mail + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>drafts</mdc-icon>Drafts + </mdc-list-item> </mdc-list> <mdc-list-divider></mdc-list-divider> <mdc-list> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start href="#/drawer-demo">email</i>All Mail - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start href="#/drawer-demo">delete</i>Trash - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start>report</i>Spam - </a> + <mdc-list-item> + <mdc-icon mdc-list-item-start>email</mdc-icon>All Mail + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>delete</mdc-icon>Trash + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>report</mdc-icon>Spam + </mdc-list-item> </mdc-list> </mdc-list-group> </mdc-permanent-drawer-content> @@ -294,30 +294,30 @@

Drawers

- - homeHome - - - starStar - - - sendSent Mail - - - draftsDrafts - + + homeHome + + + starStar + + + sendSent Mail + + + draftsDrafts + - - emailAll Mail - - - deleteTrash - - - reportSpam - + + emailAll Mail + + + deleteTrash + + + reportSpam + @@ -332,35 +332,37 @@

Drawers

<mdc-temporary-drawer-content> <mdc-list-group> <mdc-list> - <a mdc-list-item mdc-temporary-drawer-selected href="#/drawer-demo"> - <i material-icon mdc-list-item-start>home</i>Home - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start>star</i>Star - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start>send</i>Sent Mail - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start>drafts</i>Drafts - </a> + <mdc-list-item mdc-temporary-drawer-selected> + <mdc-icon mdc-list-item-start>home</mdc-icon>Home + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>star</mdc-icon>Star + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>send</mdc-icon>Sent Mail + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>drafts</mdc-icon>Drafts + </mdc-list-item> </mdc-list> <mdc-list-divider></mdc-list-divider> <mdc-list> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start href="#/drawer-demo">email</i>All Mail - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start href="#/drawer-demo">delete</i>Trash - </a> - <a mdc-list-item href="#/drawer-demo"> - <i material-icon mdc-list-item-start>report</i>Spam - </a> + <mdc-list-item> + <mdc-icon mdc-list-item-start>email</mdc-icon>All Mail + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>delete</mdc-icon>Trash + </mdc-list-item> + <mdc-list-item> + <mdc-icon mdc-list-item-start>report</mdc-icon>Spam + </mdc-list-item> </mdc-list> </mdc-list-group> </mdc-temporary-drawer-content> </mdc-temporary-drawer> - + + +
Example - Persistent Drawer @@ -368,33 +370,33 @@

Drawers

- - - - homeHome - - - starStar - - - sendSent Mail - - - draftsDrafts - - - - - - emailAll Mail - - - deleteTrash - - - reportSpam - - + + + + homeHome + + + starStar + + + sendSent Mail + + + draftsDrafts + + + + + + emailAll Mail + + + deleteTrash + + + reportSpam + +
@@ -413,36 +415,39 @@

Drawers

+ 
<mdc-persistent-drawer #persistent>
   <mdc-persistent-drawer-spacer></mdc-persistent-drawer-spacer>
-  <mdc-list-group>
-    <mdc-list>
-      <a mdc-list-item mdc-persistent-drawer-selected href="#/drawer-demo">
-          <i material-icon mdc-list-item-start>home</i>Home
-        </a>
-      <a mdc-list-item href="#/drawer-demo">
-          <i material-icon mdc-list-item-start>star</i>Star
-        </a>
-      <a mdc-list-item href="#/drawer-demo">
-          <i material-icon mdc-list-item-start>send</i>Sent Mail
-        </a>
-      <a mdc-list-item href="#/drawer-demo">
-          <i material-icon mdc-list-item-start>drafts</i>Drafts
-        </a>
-    </mdc-list>
-    <mdc-list-divider></mdc-list-divider>
-    <mdc-list>
-      <a mdc-list-item href="#/drawer-demo">
-        <i material-icon mdc-list-item-start href="#/drawer-demo">email</i>All Mail
-      </a>
-      <a mdc-list-item href="#/drawer-demo">
-        <i material-icon mdc-list-item-start href="#/drawer-demo">delete</i>Trash
-      </a>
-      <a mdc-list-item href="#/drawer-demo">
-        <i material-icon mdc-list-item-start>report</i>Spam
-      </a>
-    </mdc-list>
+    <mdc-list-group>
+      <mdc-list>
+        <mdc-list-item mdc-persistent-drawer-selected>
+          <mdc-icon mdc-list-item-start>home</mdc-icon>Home
+        </mdc-list-item>
+        <mdc-list-item>
+          <mdc-icon mdc-list-item-start>star</mdc-icon>Star
+        </mdc-list-item>
+        <mdc-list-item>
+          <mdc-icon mdc-list-item-start>send</mdc-icon>Sent Mail
+        </mdc-list-item>
+        <mdc-list-item>
+          <mdc-icon mdc-list-item-start>drafts</mdc-icon>Drafts
+        </mdc-list-item>
+      </mdc-list>
+      <mdc-list-divider></mdc-list-divider>
+      <mdc-list>
+        <mdc-list-item>
+          <mdc-icon mdc-list-item-start>email</mdc-icon>All Mail
+        </mdc-list-item>
+        <mdc-list-item>
+          <mdc-icon mdc-list-item-start>delete</mdc-icon>Trash
+        </mdc-list-item>
+        <mdc-list-item>
+          <mdc-icon mdc-list-item-start>report</mdc-icon>Spam
+        </mdc-list-item>
+      </mdc-list>
   </mdc-list-group>
 </mdc-persistent-drawer>
-
- \ No newline at end of file + + + + diff --git a/src/demo-app/components/drawer-demo/drawer-demo.ts b/src/demo-app/components/drawer-demo/drawer-demo.ts index adf9d8523..4db006c1a 100644 --- a/src/demo-app/components/drawer-demo/drawer-demo.ts +++ b/src/demo-app/components/drawer-demo/drawer-demo.ts @@ -3,18 +3,16 @@ import { ViewChild } from '@angular/core'; -import { - MdcTemporaryDrawerComponent, - MdcPersistentDrawerComponent -} from '../../../lib/public_api'; +// import { MdcTemporaryDrawer, MdcPersistentDrawer } from '@angular-mdc/web'; +import { MdcTemporaryDrawer, MdcPersistentDrawer } from '../../../lib/public_api'; @Component({ selector: 'drawer-demo', templateUrl: './drawer-demo.html' }) export class DrawerDemo { - @ViewChild('temporary') temporaryDrawer: MdcTemporaryDrawerComponent; - @ViewChild('persistent') persistentDrawer: MdcPersistentDrawerComponent; + @ViewChild('temporary') temporaryDrawer: MdcTemporaryDrawer; + @ViewChild('persistent') persistentDrawer: MdcPersistentDrawer; handleTemporary() { this.temporaryDrawer.open(); diff --git a/src/demo-app/components/snackbar-demo/snackbar-demo.html b/src/demo-app/components/snackbar-demo/snackbar-demo.html index fdd647408..55d77982f 100644 --- a/src/demo-app/components/snackbar-demo/snackbar-demo.html +++ b/src/demo-app/components/snackbar-demo/snackbar-demo.html @@ -123,7 +123,6 @@

Snackbar

@Component({ selector: 'snackbar-demo', templateUrl: './snackbar-demo.component.html', - providers: [MdcSnackbar], }) export class SnackbarDemoComponent { message = 'Message deleted'; diff --git a/src/demo-app/components/snackbar-demo/snackbar-demo.ts b/src/demo-app/components/snackbar-demo/snackbar-demo.ts index 4c24afc10..f09e83a00 100644 --- a/src/demo-app/components/snackbar-demo/snackbar-demo.ts +++ b/src/demo-app/components/snackbar-demo/snackbar-demo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; +// import { MdcSnackbar } from '@angular-mdc/web'; import { MdcSnackbar } from '../../../lib/public_api'; @Component({ selector: 'snackbar-demo', templateUrl: './snackbar-demo.html', - providers: [MdcSnackbar], }) export class SnackbarDemo { message = 'Message deleted'; diff --git a/src/demo-app/docs/getting-started.html b/src/demo-app/docs/getting-started.html index 1a13a6891..e104d3c02 100644 --- a/src/demo-app/docs/getting-started.html +++ b/src/demo-app/docs/getting-started.html @@ -1,43 +1,16 @@

Angular MDC - Getting started

- -

Using Angular CLI?

If you intend to use Angular CLI, please reference Angular CLI - Getting Started guide.

Step 1: Install Angular MDC

-
npm i @angular-mdc/web
-
+
npm i @angular-mdc/web

Step 2: Import Components

- -

All components

- -
- -

Or individual components

- +Add an import of MdcCoreModule to provide ripple, typography, and elevation functionality. Now just import the NgModule for each component you want to use. 
 Step 3: Impo
 
 
Import the Angular MDC theme into your project Sass:

 
-
$mdc-theme-primary: #1565c0; // change primary color example
+
$mdc-theme-primary: #1565c0; // change primary color example
 $mdc-theme-secondary: #388e3c; // change secondary color example
 
 @import "~@angular-mdc/theme/material";
-

+

 
 
 Step 4: Include Material Design Icons

 
 
Add the Material Design Icons collection to your index.html.

 
-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-

+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 
 
 Step 5: Include Roboto Font

 
 
Add the Roboto font with 300, 400 and 500 weights to your index.html.

 
-
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-

+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

 
-
All done!

+
All set!
diff --git a/src/demo-app/home/home.html b/src/demo-app/home/home.html index 2c43239d3..a2f7a864f 100644 --- a/src/demo-app/home/home.html +++ b/src/demo-app/home/home.html @@ -11,7 +11,7 @@

Get Started
- angular-mdc-web v0.5.5 + angular-mdc-web v0.5.6 material-components-web v0.23.0
diff --git a/src/demo-app/home/home.ts b/src/demo-app/home/home.ts index e2f521d01..4c84cbf2f 100644 --- a/src/demo-app/home/home.ts +++ b/src/demo-app/home/home.ts @@ -4,5 +4,4 @@ selector: 'home', templateUrl: './home.html' }) -export class Home { -} +export class Home { } diff --git a/src/demo-app/navigation/app-toolbar.ts b/src/demo-app/navigation/app-toolbar.ts index 8c172fc24..a11d3bb3f 100644 --- a/src/demo-app/navigation/app-toolbar.ts +++ b/src/demo-app/navigation/app-toolbar.ts @@ -1,7 +1,6 @@ import { Component, ViewChild } from '@angular/core'; import { navigationLinks } from './index'; -import { MdcTemporaryDrawerComponent } from '../../lib/public_api'; @Component({ selector: 'app-toolbar', @@ -10,7 +9,7 @@ import { MdcTemporaryDrawerComponent } from '../../lib/public_api'; export class AppToolbar { navLinks = navigationLinks; isFixed: boolean = true; - @ViewChild('drawer') drawer: MdcTemporaryDrawerComponent; + @ViewChild('drawer') drawer: any; toggleDrawer() { this.drawer.open(); diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index 6145fecf1..f4a142990 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -7,7 +7,7 @@ import { HostListener, Input, Renderer2, - ViewEncapsulation + ViewEncapsulation, } from '@angular/core'; import { MdcIcon } from '../icon/icon'; import { MdcRipple } from '../core/ripple/ripple.service'; @@ -21,12 +21,13 @@ import { selector: 'button[mdc-button], a[mdc-button]', template: '', host: { - '[attr.aria-disabled]': 'disabled.toString()', + '[attr.aria-disabled]': 'disabled.toString()' }, providers: [MdcRipple], + encapsulation: ViewEncapsulation.None, }) export class MdcButton implements AfterViewInit { - private disabled_: boolean = false; + private _disabled: boolean = false; @Input() raised: boolean = false; @Input() primary: boolean = false; @@ -36,10 +37,10 @@ export class MdcButton implements AfterViewInit { @Input() unelevated: boolean = false; @Input() stroked: boolean = false; @Input() - get disabled(): boolean { return this.disabled_; } - set disabled(value) { - this.disabled_ = toBoolean(value); - if (this.disabled_) { + get disabled(): boolean { return this._disabled; } + set disabled(value: boolean) { + this._disabled = toBoolean(value); + if (this._disabled) { this.renderer.setAttribute(this.elementRef.nativeElement, "disabled", 'true'); } else { this.renderer.removeAttribute(this.elementRef.nativeElement, "disabled"); @@ -47,7 +48,7 @@ export class MdcButton implements AfterViewInit { } @Input() get disableRipple(): boolean { return this.ripple.disabled; } - set disableRipple(value) { + set disableRipple(value: boolean) { this.ripple.disabled = toBoolean(value); } @HostBinding('tabindex') get tabindex(): number { @@ -76,13 +77,13 @@ export class MdcButton implements AfterViewInit { return this.stroked ? 'mdc-button--stroked' : ''; } @HostListener('click', ['$event']) onclick(evt: Event) { - this.handleClick_(evt); + this._onClick(evt); } @HostListener('keypress', ['$event']) onkeypress(evt: KeyboardEvent) { - this.handleKeyPress_(evt); + this._onKeyPress(evt); } @HostListener('blur', ['$event']) blur(evt: FocusEvent) { - this.handleBlur_(evt); + this._onBlur(evt); } @ContentChild(MdcIcon) buttonIcon: MdcIcon; @@ -91,7 +92,7 @@ export class MdcButton implements AfterViewInit { public elementRef: ElementRef, public ripple: MdcRipple) { } - ngAfterViewInit() { + ngAfterViewInit(): void { if (this.buttonIcon) { this.renderer.addClass(this.buttonIcon.elementRef.nativeElement, 'mdc-button__icon'); } @@ -100,7 +101,7 @@ export class MdcButton implements AfterViewInit { } } - private handleClick_(event: Event) { + private _onClick(event: Event): void { // A disabled button shouldn't apply any actions if (this.disabled) { event.preventDefault(); @@ -108,17 +109,17 @@ export class MdcButton implements AfterViewInit { } } - private handleKeyPress_(keyboardEvent: KeyboardEvent) { - let keyCode = keyboardEvent.keyCode; - if (keyCode == KeyCodes.ENTER || isSpaceKey(keyboardEvent)) { + private _onKeyPress(event: KeyboardEvent): void { + let keyCode = event.keyCode; + if (keyCode == KeyCodes.ENTER || isSpaceKey(event)) { this.ripple.active = true; if (keyCode != KeyCodes.ENTER) { - keyboardEvent.preventDefault(); + event.preventDefault(); } } } - private handleBlur_(focusEvent: FocusEvent) { + private _onBlur(event: FocusEvent): void { this.ripple.active = false; } } diff --git a/src/lib/button/index.ts b/src/lib/button/index.ts index 727f8c32d..5685f4b0e 100644 --- a/src/lib/button/index.ts +++ b/src/lib/button/index.ts @@ -1,11 +1,13 @@ import { NgModule } from '@angular/core'; import { MdcIconModule } from '../icon/index'; +import { MdcRippleModule } from '../core/ripple/index'; import { MdcButton } from './button'; @NgModule({ imports: [ MdcIconModule, + MdcRippleModule, ], exports: [ MdcIconModule, diff --git a/src/lib/card/card.ts b/src/lib/card/card.ts index 11d031d16..a01159f84 100644 --- a/src/lib/card/card.ts +++ b/src/lib/card/card.ts @@ -16,6 +16,8 @@ import { MdcButton } from '../button/button'; }) export class MdcCardPrimary { @HostBinding('class.mdc-card__primary') isHostClass = true; + + constructor(public elementRef: ElementRef) { } } @Directive({ @@ -23,6 +25,8 @@ export class MdcCardPrimary { }) export class MdcCardHorizontal { @HostBinding('class.mdc-card__horizontal-block') isHostClass = true; + + constructor(public elementRef: ElementRef) { } } @Directive({ @@ -34,6 +38,8 @@ export class MdcCardTitle { @HostBinding('class.mdc-card__title--large') get classTitleLarge(): string { return this.large ? 'mdc-card__title--large' : ''; } + + constructor(public elementRef: ElementRef) { } } @Directive({ @@ -41,6 +47,8 @@ export class MdcCardTitle { }) export class MdcCardSubtitle { @HostBinding('class.mdc-card__subtitle') isHostClass = true; + + constructor(public elementRef: ElementRef) { } } @Directive({ @@ -48,6 +56,8 @@ export class MdcCardSubtitle { }) export class MdcCardSupportingText { @HostBinding('class.mdc-card__supporting-text') isHostClass = true; + + constructor(public elementRef: ElementRef) { } } @Directive({ @@ -68,6 +78,8 @@ export class MdcCardMediaItem { @HostBinding('class.mdc-card__media-item--3x') get classMediaItemThree(): string { return this.size === 3 ? 'mdc-card__media-item--3x' : ''; } + + constructor(public elementRef: ElementRef) { } } @Directive({ @@ -75,17 +87,21 @@ export class MdcCardMediaItem { }) export class MdcCardMedia { @HostBinding('class.mdc-card__media') isHostClass = true; + + constructor(public elementRef: ElementRef) { } } @Directive({ selector: 'mdc-card-actions' }) export class MdcCardActions { - @Input() vertical: boolean; + @Input() vertical: boolean = false; @HostBinding('class.mdc-card__actions') isHostClass = true; @HostBinding('class.mdc-card__actions--vertical') get classCardActionVertical(): string { return this.vertical ? 'mdc-card__actions--vertical' : ''; } + + constructor(public elementRef: ElementRef) { } } @Directive({ @@ -108,7 +124,5 @@ export class MdcCardActionButton extends MdcButton { export class MdcCard { @HostBinding('class.mdc-card') isHostClass = true; - constructor( - private renderer_: Renderer2, - public elementRef: ElementRef) { } + constructor(public elementRef: ElementRef) { } } diff --git a/src/lib/card/index.ts b/src/lib/card/index.ts index 64c5340a3..c07cc7275 100644 --- a/src/lib/card/index.ts +++ b/src/lib/card/index.ts @@ -1,5 +1,7 @@ import { NgModule } from '@angular/core'; +import { MdcRippleModule } from '../core/ripple/index'; + import { MdcCard, MdcCardActionButton, @@ -27,6 +29,7 @@ const CARD_COMPONENTS = [ ]; @NgModule({ + imports: [MdcRippleModule], exports: [CARD_COMPONENTS], declarations: [CARD_COMPONENTS], }) diff --git a/src/lib/cdk/overlay/overlay-container.ts b/src/lib/cdk/overlay/overlay-container.ts index 720a09e91..3b8064d2a 100644 --- a/src/lib/cdk/overlay/overlay-container.ts +++ b/src/lib/cdk/overlay/overlay-container.ts @@ -15,24 +15,24 @@ import { @Injectable() export class OverlayContainer implements OnDestroy { - protected containerElement_: HTMLElement; + protected _containerElement: HTMLElement; ngOnDestroy() { - if (this.containerElement_ && this.containerElement_.parentNode) { - this.containerElement_.parentNode.removeChild(this.containerElement_); + if (this._containerElement && this._containerElement.parentNode) { + this._containerElement.parentNode.removeChild(this._containerElement); } } getContainerElement(): HTMLElement { - if (!this.containerElement_) { this._createContainer(); } - return this.containerElement_; + if (!this._containerElement) { this._createContainer(); } + return this._containerElement; } protected _createContainer(): void { let container = document.createElement('div'); document.body.appendChild(container); - this.containerElement_ = container; + this._containerElement = container; } } diff --git a/src/lib/cdk/overlay/overlay-ref.ts b/src/lib/cdk/overlay/overlay-ref.ts index 6578ecdb4..7da4b12a3 100644 --- a/src/lib/cdk/overlay/overlay-ref.ts +++ b/src/lib/cdk/overlay/overlay-ref.ts @@ -79,8 +79,8 @@ export class OverlayRef implements PortalHost { * Detaches an overlay from a portal. * @returns Resolves when the overlay has been detached. */ - detach(): Promise { - let detachmentResult = this._portalHost.detach(); + detach(): any { + const detachmentResult = this._portalHost.detach(); // Only emit after everything is detached. this._detachments.next(); diff --git a/src/lib/checkbox/checkbox-adapter.d.ts b/src/lib/checkbox/adapter.d.ts similarity index 100% rename from src/lib/checkbox/checkbox-adapter.d.ts rename to src/lib/checkbox/adapter.d.ts diff --git a/src/lib/checkbox/checkbox.component.ts b/src/lib/checkbox/checkbox.ts similarity index 72% rename from src/lib/checkbox/checkbox.component.ts rename to src/lib/checkbox/checkbox.ts index 3602bf420..b3e5c57f5 100644 --- a/src/lib/checkbox/checkbox.component.ts +++ b/src/lib/checkbox/checkbox.ts @@ -18,14 +18,14 @@ import { toBoolean } from '../common'; import { EventRegistry } from '../common/event-registry'; import { MdcRipple } from '../core/ripple/ripple.service'; -import { MDCCheckboxAdapter } from './checkbox-adapter'; +import { MDCCheckboxAdapter } from './adapter'; import { MDCCheckboxFoundation } from '@material/checkbox'; let nextUniqueId = 0; export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdcCheckboxComponent), + useExisting: forwardRef(() => MdcCheckbox), multi: true }; @@ -60,42 +60,42 @@ export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: Provider = {
`, - encapsulation: ViewEncapsulation.None, providers: [ MD_CHECKBOX_CONTROL_VALUE_ACCESSOR, MdcRipple, EventRegistry, - ] + ], + encapsulation: ViewEncapsulation.None, }) -export class MdcCheckboxComponent implements AfterViewInit, OnDestroy { +export class MdcCheckbox implements AfterViewInit, OnDestroy { private _uniqueId: string = `mdc-checkbox-${++nextUniqueId}`; @Input() id: string = this._uniqueId; get inputId(): string { return `${this.id || this._uniqueId}-input`; } @Input() name: string | null = null; @Input() - get checked() { return this._foundation.isChecked(); } - set checked(value) { + get checked(): boolean { return this._foundation.isChecked(); } + set checked(value: boolean) { this._foundation.setChecked(value); } @Input() - get value() { return this._foundation.getValue(); } - set value(value) { + get value(): any { return this._foundation.getValue(); } + set value(value: any) { this._foundation.setValue(value); } @Input() - get disabled() { return this._foundation.isDisabled(); } - set disabled(value) { + get disabled(): boolean { return this._foundation.isDisabled(); } + set disabled(value: boolean) { this._foundation.setDisabled(value); } @Input() - get indeterminate() { return this._foundation.isIndeterminate(); } - set indeterminate(value) { + get indeterminate(): boolean { return this._foundation.isIndeterminate(); } + set indeterminate(value: boolean) { this._foundation.setIndeterminate(value); } @Input() - get disableRipple() { return this.ripple.disabled; } - set disableRipple(value) { + get disableRipple(): boolean { return this.ripple.disabled; } + set disableRipple(value: boolean) { this.ripple.disabled = toBoolean(value); } @Input() tabIndex: number = 0; @@ -111,36 +111,30 @@ export class MdcCheckboxComponent implements AfterViewInit, OnDestroy { private _mdcAdapter: MDCCheckboxAdapter = { addClass: (className: string) => { - this._renderer.addClass(this.root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this.root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, registerAnimationEndHandler: (handler: EventListener) => { - if (this.root) { - this._registry.listen_(this._renderer, 'animationend', handler, this.root); - } + this._registry.listen(this._renderer, 'animationend', handler, this.elementRef.nativeElement); }, deregisterAnimationEndHandler: (handler: EventListener) => { - this._registry.unlisten_('animationend', handler); + this._registry.unlisten('animationend', handler); }, registerChangeHandler: (handler: EventListener) => { - if (this.root) { - this._registry.listen_(this._renderer, 'change', handler, this.inputEl); - } + this._registry.listen(this._renderer, 'change', handler, this.inputEl.nativeElement); }, deregisterChangeHandler: (handler: EventListener) => { - this._registry.unlisten_('change', handler); + this._registry.unlisten('change', handler); }, getNativeControl: () => { return this.inputEl.nativeElement; }, forceLayout: () => { - if (this.root) { - return this.root.nativeElement.offsetWidth; - } + return this.elementRef.nativeElement.offsetWidth; }, - isAttachedToDOM: () => !!this.root + isAttachedToDOM: () => !!this.elementRef }; private _foundation: { @@ -158,33 +152,33 @@ export class MdcCheckboxComponent implements AfterViewInit, OnDestroy { constructor( private _renderer: Renderer2, - public root: ElementRef, + public elementRef: ElementRef, public ripple: MdcRipple, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); this.ripple.init(true); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - onChange(evt: Event) { + onChange(evt: Event): void { evt.stopPropagation(); this._controlValueAccessorChangeFn((evt.target).checked); this.change.emit(evt); } - writeValue(value: any) { + writeValue(value: any): void { this.checked = !!value; } - registerOnChange(fn: (value: any) => void) { + registerOnChange(fn: (value: any) => void): void { this._controlValueAccessorChangeFn = fn; } - registerOnTouched(fn: any) { + registerOnTouched(fn: any): void { this.onTouched = fn; } diff --git a/src/lib/checkbox/index.ts b/src/lib/checkbox/index.ts index 498b819c9..e22c80e47 100644 --- a/src/lib/checkbox/index.ts +++ b/src/lib/checkbox/index.ts @@ -1,13 +1,13 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MdcCheckboxComponent } from './checkbox.component'; +import { MdcCheckbox } from './checkbox'; @NgModule({ imports: [FormsModule], - exports: [MdcCheckboxComponent], - declarations: [MdcCheckboxComponent] + exports: [MdcCheckbox], + declarations: [MdcCheckbox] }) export class MdcCheckboxModule { } -export * from './checkbox.component'; +export * from './checkbox'; diff --git a/src/lib/common/event-registry.ts b/src/lib/common/event-registry.ts index 9706ac5f2..57f80ccc5 100644 --- a/src/lib/common/event-registry.ts +++ b/src/lib/common/event-registry.ts @@ -12,15 +12,15 @@ export class EventRegistry { constructor() { } - listen_(renderer: Renderer2, type: string, listener: EventListener, target: any) { + listen(renderer: Renderer2, type: string, listener: EventListener, target: Element | Window | Document, passive?: any) { if (!this.unlisteners.has(type)) { this.unlisteners.set(type, new WeakMap()); } - const unlistener = renderer.listen(typeof target !== 'string' ? target.nativeElement : target, type, listener); - this.unlisteners.get(type).set(listener, unlistener); + target.addEventListener(type, listener, passive); + this.unlisteners.get(type).set(listener, () => { target.removeEventListener(type, listener, passive); }); } - unlisten_(type: string, listener: EventListener) { + unlisten(type: string, listener: EventListener) { if (!this.unlisteners.has(type)) { return; } diff --git a/src/lib/core/elevation/elevation.directive.ts b/src/lib/core/elevation/elevation.ts similarity index 62% rename from src/lib/core/elevation/elevation.directive.ts rename to src/lib/core/elevation/elevation.ts index c6e0833e3..fa6cc7567 100644 --- a/src/lib/core/elevation/elevation.directive.ts +++ b/src/lib/core/elevation/elevation.ts @@ -21,21 +21,20 @@ const MDC_ELEVATION_VALUES = Array.from(Array(25), (x, i) => i); @Directive({ selector: '[mdc-elevation]' }) -export class MdcElevationDirective implements OnChanges { - private nativeEl: ElementRef; +export class MdcElevation implements OnChanges { private _mdcElevation: number = 0; @Input('mdc-elevation') - get mdcElevation() { return this._mdcElevation; } + get mdcElevation(): number { return this._mdcElevation; } set mdcElevation(value: number) { this._mdcElevation = toNumber(value); } - constructor(private _renderer: Renderer2, private _root: ElementRef) { - this.nativeEl = this._root.nativeElement; - } + constructor( + private _renderer: Renderer2, + public elementRef: ElementRef) { } - public ngOnChanges(changes: { [key: string]: SimpleChange }) { + public ngOnChanges(changes: { [key: string]: SimpleChange }): void { let change = changes['mdcElevation']; if (MDC_ELEVATION_VALUES.indexOf(Number(this.mdcElevation)) === -1) { @@ -43,8 +42,8 @@ export class MdcElevationDirective implements OnChanges { } if (!change.isFirstChange()) { - this._renderer.removeClass(this.nativeEl, `mdc-elevation--z${change.previousValue}`); + this._renderer.removeClass(this.elementRef.nativeElement, `mdc-elevation--z${change.previousValue}`); } - this._renderer.addClass(this.nativeEl, `mdc-elevation--z${change.currentValue}`); + this._renderer.addClass(this.elementRef.nativeElement, `mdc-elevation--z${change.currentValue}`); } } diff --git a/src/lib/core/elevation/index.ts b/src/lib/core/elevation/index.ts index 8b43c584b..1717e32bb 100644 --- a/src/lib/core/elevation/index.ts +++ b/src/lib/core/elevation/index.ts @@ -2,12 +2,12 @@ import { NgModule } from '@angular/core'; import { MdcElevationTransition, - MdcElevationDirective -} from './elevation.directive'; + MdcElevation +} from './elevation'; const ELEVATION_DIRECTIVES = [ MdcElevationTransition, - MdcElevationDirective + MdcElevation ]; @NgModule({ @@ -16,4 +16,4 @@ const ELEVATION_DIRECTIVES = [ }) export class MdcElevationModule { } -export * from './elevation.directive'; +export * from './elevation'; diff --git a/src/lib/core/material-icon/index.ts b/src/lib/core/material-icon/index.ts index 71dee7746..b7edaa0f5 100644 --- a/src/lib/core/material-icon/index.ts +++ b/src/lib/core/material-icon/index.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { MdcMaterialIcon } from './material-icon.directive'; +import { MdcMaterialIcon } from './material-icon'; @NgModule({ exports: [MdcMaterialIcon], @@ -8,4 +8,4 @@ import { MdcMaterialIcon } from './material-icon.directive'; }) export class MdcMaterialIconModule { } -export * from './material-icon.directive'; +export * from './material-icon'; diff --git a/src/lib/core/material-icon/material-icon.directive.ts b/src/lib/core/material-icon/material-icon.ts similarity index 100% rename from src/lib/core/material-icon/material-icon.directive.ts rename to src/lib/core/material-icon/material-icon.ts diff --git a/src/lib/core/ripple/index.ts b/src/lib/core/ripple/index.ts index 04210584a..afea30ad4 100644 --- a/src/lib/core/ripple/index.ts +++ b/src/lib/core/ripple/index.ts @@ -1,5 +1,7 @@ import { NgModule } from '@angular/core'; +import { EventRegistry } from '../../common/event-registry'; + import { MdcRippleDirective, MdcSurfaceDirective, @@ -13,6 +15,7 @@ const RIPPLE_DIRECTIVES = [ @NgModule({ exports: [RIPPLE_DIRECTIVES], declarations: [RIPPLE_DIRECTIVES], + providers: [EventRegistry], }) export class MdcRippleModule { } diff --git a/src/lib/core/ripple/ripple.service.ts b/src/lib/core/ripple/ripple.service.ts index 7148afeb6..f36b8d2a0 100644 --- a/src/lib/core/ripple/ripple.service.ts +++ b/src/lib/core/ripple/ripple.service.ts @@ -5,15 +5,14 @@ import { Renderer2, } from '@angular/core'; import { toBoolean, isBrowser } from '../../common'; +import { EventRegistry } from '../../common/event-registry'; import { MDCRippleAdapter } from './adapter'; -import { supportsCssVariables } from '@material/ripple/util'; +import { supportsCssVariables, applyPassive } from '@material/ripple/util'; import { MDCRippleFoundation } from '@material/ripple'; @Injectable() export class MdcRipple implements OnDestroy { - private _interactionListenerFn: () => void; - private _resizeListenerFn: () => void; private _disabled: boolean = false; unbounded: boolean; @@ -42,36 +41,25 @@ export class MdcRipple implements OnDestroy { this._renderer.removeClass(this.elementRef.nativeElement, className); }, registerInteractionHandler: (evtType: string, handler: EventListener) => { - this._resizeListenerFn = this._renderer.listen(this.elementRef.nativeElement, evtType, handler); + const target = (evtType === 'mouseup' || evtType === 'pointerup') ? window : this.elementRef.nativeElement; + this._registry.listen(this._renderer, evtType, handler, target, applyPassive()); }, deregisterInteractionHandler: (evtType: string, handler: EventListener) => { - if (this._interactionListenerFn) { - this._interactionListenerFn(); - } + this._registry.unlisten(evtType, handler); }, registerResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._resizeListenerFn = this._renderer.listen(window, 'resize', handler); + this._registry.listen(this._renderer, 'resize', handler, window); } }, deregisterResizeHandler: (handler: EventListener) => { - if (isBrowser() && this._resizeListenerFn) { - this._resizeListenerFn(); - } + this._registry.unlisten('resize', handler); }, updateCssVariable: (varName: string, value: string) => { this.elementRef.nativeElement.style.setProperty(varName, value); }, computeBoundingRect: () => { - const { left, top, height, width } = this.elementRef.nativeElement.getBoundingClientRect(); - return { - top, - left, - right: left, - bottom: top, - width: width, - height: height, - }; + return this.elementRef.nativeElement.getBoundingClientRect(); }, getWindowPageOffset: () => { return { @@ -91,8 +79,8 @@ export class MdcRipple implements OnDestroy { constructor( private _renderer: Renderer2, - public elementRef: ElementRef) { - } + private _registry: EventRegistry, + public elementRef: ElementRef) { } ngOnDestroy() { this._foundation.destroy(); diff --git a/src/lib/core/theme/index.ts b/src/lib/core/theme/index.ts index 6ecb194f0..8e935c558 100644 --- a/src/lib/core/theme/index.ts +++ b/src/lib/core/theme/index.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { MdcThemeDark } from './theme-dark.directive'; +import { MdcThemeDark } from './theme-dark'; const THEME_DIRECTIVES = [ MdcThemeDark @@ -12,4 +12,4 @@ const THEME_DIRECTIVES = [ }) export class MdcThemeModule { } -export * from './theme-dark.directive'; +export * from './theme-dark'; diff --git a/src/lib/core/theme/theme-dark.directive.ts b/src/lib/core/theme/theme-dark.directive.ts deleted file mode 100644 index 54c979b21..000000000 --- a/src/lib/core/theme/theme-dark.directive.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { - Directive, - ElementRef, - Input, - OnChanges, - Renderer2, - SimpleChange, -} from '@angular/core'; -import { toBoolean } from '../../common'; - -@Directive({ - selector: '[mdc-theme-dark]' -}) -export class MdcThemeDark implements OnChanges { - private mdcThemeDark_: boolean; - - @Input('mdc-theme-dark') mdcThemeDark: boolean; - - constructor( - private renderer_: Renderer2, - public elementRef: ElementRef) { - } - - ngOnChanges(changes: { [key: string]: SimpleChange }) { - let change = changes['mdcThemeDark']; - - if (!toBoolean(change.currentValue)) { - this.renderer_.removeClass(this.elementRef.nativeElement, 'mdc-theme--dark'); - } else { - this.renderer_.addClass(this.elementRef.nativeElement, 'mdc-theme--dark'); - } - } -} diff --git a/src/lib/core/theme/theme-dark.ts b/src/lib/core/theme/theme-dark.ts new file mode 100644 index 000000000..06011f5a1 --- /dev/null +++ b/src/lib/core/theme/theme-dark.ts @@ -0,0 +1,31 @@ +import { + Directive, + ElementRef, + Input, + OnChanges, + Renderer2, + SimpleChange, +} from '@angular/core'; +import { toBoolean } from '../../common'; + +@Directive({ + selector: '[mdc-theme-dark]' +}) +export class MdcThemeDark implements OnChanges { + @Input('mdc-theme-dark') mdcThemeDark: boolean = false; + + constructor( + private _renderer: Renderer2, + public elementRef: ElementRef) { + } + + ngOnChanges(changes: { [key: string]: SimpleChange }): void { + let change = changes['mdcThemeDark']; + + if (change) { + !toBoolean(change.currentValue) ? + this._renderer.removeClass(this.elementRef.nativeElement, 'mdc-theme--dark') : + this._renderer.addClass(this.elementRef.nativeElement, 'mdc-theme--dark'); + } + } +} diff --git a/src/lib/core/typography/index.ts b/src/lib/core/typography/index.ts index 432554a81..2e8baeff0 100644 --- a/src/lib/core/typography/index.ts +++ b/src/lib/core/typography/index.ts @@ -1,36 +1,36 @@ import { NgModule } from '@angular/core'; import { - MdcAdjustMarginDirective, - MdcBody1Directive, - MdcBody2Directive, - MdcButtonDirective, - MdcCaptionDirective, - MdcDisplay1Directive, - MdcDisplay2Directive, - MdcDisplay3Directive, - MdcDisplay4Directive, - MdcHeadlineDirective, - MdcSubheading1Directive, - MdcSubheading2Directive, - MdcTitleDirective, + MdcAdjustMargin, + MdcBody1, + MdcBody2, + MdcTypographyButton, + MdcCaption, + MdcDisplay1, + MdcDisplay2, + MdcDisplay3, + MdcDisplay4, + MdcHeadline, + MdcSubheading1, + MdcSubheading2, + MdcTitle, MdcTypography, -} from './typography.directive'; +} from './typography'; const TYPOGRAPHY_DIRECTIVES = [ - MdcAdjustMarginDirective, - MdcBody1Directive, - MdcBody2Directive, - MdcButtonDirective, - MdcCaptionDirective, - MdcDisplay1Directive, - MdcDisplay2Directive, - MdcDisplay3Directive, - MdcDisplay4Directive, - MdcHeadlineDirective, - MdcSubheading1Directive, - MdcSubheading2Directive, - MdcTitleDirective, + MdcAdjustMargin, + MdcBody1, + MdcBody2, + MdcTypographyButton, + MdcCaption, + MdcDisplay1, + MdcDisplay2, + MdcDisplay3, + MdcDisplay4, + MdcHeadline, + MdcSubheading1, + MdcSubheading2, + MdcTitle, MdcTypography, ]; @@ -40,4 +40,4 @@ const TYPOGRAPHY_DIRECTIVES = [ }) export class MdcTypographyModule { } -export * from './typography.directive'; +export * from './typography'; diff --git a/src/lib/core/typography/typography.directive.ts b/src/lib/core/typography/typography.ts similarity index 79% rename from src/lib/core/typography/typography.directive.ts rename to src/lib/core/typography/typography.ts index 2b7fc6fc6..686dfc523 100644 --- a/src/lib/core/typography/typography.directive.ts +++ b/src/lib/core/typography/typography.ts @@ -13,90 +13,90 @@ export class MdcTypography { @Directive({ selector: '[mdc-typography-adjust-margin]' }) -export class MdcAdjustMarginDirective { +export class MdcAdjustMargin { @HostBinding('class.mdc-typography--adjust-margin') isHostClass = true; } @Directive({ selector: '[mdc-typography-display4]' }) -export class MdcDisplay4Directive { +export class MdcDisplay4 { @HostBinding('class.mdc-typography--display4') isHostClass = true; } @Directive({ selector: '[mdc-typography-display3]' }) -export class MdcDisplay3Directive { +export class MdcDisplay3 { @HostBinding('class.mdc-typography--display3') isHostClass = true; } @Directive({ selector: '[mdc-typography-display2]' }) -export class MdcDisplay2Directive { +export class MdcDisplay2 { @HostBinding('class.mdc-typography--display2') isHostClass = true; } @Directive({ selector: '[mdc-typography-display1]' }) -export class MdcDisplay1Directive { +export class MdcDisplay1 { @HostBinding('class.mdc-typography--display1') isHostClass = true; } @Directive({ selector: '[mdc-typography-headline]' }) -export class MdcHeadlineDirective { +export class MdcHeadline { @HostBinding('class.mdc-typography--headline') isHostClass = true; } @Directive({ selector: '[mdc-typography-title]' }) -export class MdcTitleDirective { +export class MdcTitle { @HostBinding('class.mdc-typography--title') isHostClass = true; } @Directive({ selector: '[mdc-typography-subheading2]' }) -export class MdcSubheading2Directive { +export class MdcSubheading2 { @HostBinding('class.mdc-typography--subheading2') isHostClass = true; } @Directive({ selector: '[mdc-typography-subheading1]' }) -export class MdcSubheading1Directive { +export class MdcSubheading1 { @HostBinding('class.mdc-typography--subheading1') isHostClass = true; } @Directive({ selector: '[mdc-typography-body2]' }) -export class MdcBody2Directive { +export class MdcBody2 { @HostBinding('class.mdc-typography--body2') isHostClass = true; } @Directive({ selector: '[mdc-typography-body1]' }) -export class MdcBody1Directive { +export class MdcBody1 { @HostBinding('class.mdc-typography--body1') isHostClass = true; } @Directive({ selector: '[mdc-typography-caption]' }) -export class MdcCaptionDirective { +export class MdcCaption { @HostBinding('class.mdc-typography--caption') isHostClass = true; } @Directive({ selector: '[mdc-typography-button]' }) -export class MdcButtonDirective { +export class MdcTypographyButton { @HostBinding('class.mdc-typography--button') isHostClass = true; } diff --git a/src/lib/dialog/dialog-adapter.d.ts b/src/lib/dialog/adapter.d.ts similarity index 100% rename from src/lib/dialog/dialog-adapter.d.ts rename to src/lib/dialog/adapter.d.ts diff --git a/src/lib/dialog/dialog.component.ts b/src/lib/dialog/dialog.ts similarity index 73% rename from src/lib/dialog/dialog.component.ts rename to src/lib/dialog/dialog.ts index 6f670445d..cb2860a66 100644 --- a/src/lib/dialog/dialog.component.ts +++ b/src/lib/dialog/dialog.ts @@ -23,13 +23,13 @@ import createFocusTrap from 'focus-trap'; import { MdcRipple } from '../core/ripple/ripple.service'; import { MdcButton } from '../button/button'; -import { MDCDialogAdapter } from './dialog-adapter'; +import { MDCDialogAdapter } from './adapter'; import { MDCDialogFoundation } from '@material/dialog'; @Directive({ selector: '[mdc-dialog-surface], mdc-dialog-surface' }) -export class MdcDialogSurfaceDirective { +export class MdcDialogSurface { @HostBinding('class.mdc-dialog__surface') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -38,7 +38,7 @@ export class MdcDialogSurfaceDirective { @Directive({ selector: '[mdc-dialog-header], mdc-dialog-header' }) -export class MdcDialogHeaderDirective { +export class MdcDialogHeader { @HostBinding('class.mdc-dialog__header') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -47,7 +47,7 @@ export class MdcDialogHeaderDirective { @Directive({ selector: '[mdc-dialog-header-title], mdc-dialog-header-title' }) -export class MdcDialogHeaderTitleDirective { +export class MdcDialogHeaderTitle { @HostBinding('class.mdc-dialog__header__title') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -56,8 +56,8 @@ export class MdcDialogHeaderTitleDirective { @Directive({ selector: '[mdc-dialog-body], mdc-dialog-body' }) -export class MdcDialogBodyDirective { - @Input() scrollable: boolean; +export class MdcDialogBody { + @Input() scrollable: boolean = false; @HostBinding('class.mdc-dialog__body') isHostClass = true; @HostBinding('class.mdc-dialog__body--scrollable') get classScrollable(): string { return this.scrollable ? 'mdc-dialog__body--scrollable' : ''; @@ -69,7 +69,7 @@ export class MdcDialogBodyDirective { @Directive({ selector: '[mdc-dialog-footer], mdc-dialog-footer' }) -export class MdcDialogFooterDirective { +export class MdcDialogFooter { @HostBinding('class.mdc-dialog__footer') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -78,7 +78,7 @@ export class MdcDialogFooterDirective { @Directive({ selector: '[mdc-dialog-backdrop], mdc-dialog-backdrop' }) -export class MdcDialogBackdropDirective { +export class MdcDialogBackdrop { @HostBinding('class.mdc-dialog__backdrop') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -88,14 +88,14 @@ export class MdcDialogBackdropDirective { selector: 'button[mdc-dialog-button], a[mdc-dialog-button]', providers: [MdcRipple] }) -export class MdcDialogButtonDirective extends MdcButton { +export class MdcDialogButton extends MdcButton { @Input() accept: boolean = false; @Input() cancel: boolean = false; @Input() action: boolean = false; @Input() focused: boolean = false; @HostBinding('class.mdc-dialog__footer__button') get isFooterButton(): string { - return this.renderer.parentNode(this.elementRef) === MdcDialogFooterDirective ? 'mdc-dialog__footer__button' : ''; + return this.renderer.parentNode(this.elementRef) === MdcDialogFooter ? 'mdc-dialog__footer__button' : ''; } @HostBinding('class.mdc-dialog__action') get classAction(): string { return this.action ? 'mdc-dialog__action' : ''; @@ -127,8 +127,8 @@ export class MdcDialogButtonDirective extends MdcButton { encapsulation: ViewEncapsulation.None, providers: [EventRegistry], }) -export class MdcDialogComponent implements AfterViewInit, OnDestroy { - private focusTrap_: { +export class MdcDialog implements AfterViewInit, OnDestroy { + private _focusTrap: { activate: Function; deactivate: Function; pause: Function; @@ -137,31 +137,31 @@ export class MdcDialogComponent implements AfterViewInit, OnDestroy { @Input() clickOutsideToClose: boolean = true; @Input() escapeToClose: boolean = true; - @Output('accept') accept_: EventEmitter = new EventEmitter(); - @Output('cancel') cancel_: EventEmitter = new EventEmitter(); + @Output('accept') _accept: EventEmitter = new EventEmitter(); + @Output('cancel') _cancel: EventEmitter = new EventEmitter(); @HostBinding('class.mdc-dialog') isHostClass = true; @HostBinding('attr.role') role: string = 'alertdialog'; @HostBinding('attr.aria-hidden') ariaHidden: string = 'true'; - @HostBinding('tabindex') tabindex: number = -1; - @ViewChild(MdcDialogSurfaceDirective) dialogSurface: MdcDialogSurfaceDirective; - @ContentChild(MdcDialogBodyDirective) dialogBody: MdcDialogBodyDirective; - @ContentChildren(MdcDialogButtonDirective, { descendants: true }) dialogButtons: QueryList; + @HostBinding('tabindex') tabIndex: number = -1; + @ViewChild(MdcDialogSurface) dialogSurface: MdcDialogSurface; + @ContentChild(MdcDialogBody) dialogBody: MdcDialogBody; + @ContentChildren(MdcDialogButton, { descendants: true }) dialogButtons: QueryList; private _mdcAdapter: MDCDialogAdapter = { addClass: (className: string) => { - this.renderer_.addClass(this.elementRef.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this.renderer_.removeClass(this.elementRef.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, addBodyClass: (className: string) => { if (isBrowser()) { - this.renderer_.addClass(document.body, className); + this._renderer.addClass(document.body, className); } }, removeBodyClass: (className: string) => { if (isBrowser()) { - this.renderer_.removeClass(document.body, className); + this._renderer.removeClass(document.body, className); } }, eventTargetHasClass: (target: HTMLElement, className: string) => target.classList.contains(className), @@ -173,46 +173,46 @@ export class MdcDialogComponent implements AfterViewInit, OnDestroy { this.cancel(); } }; - this.registry_.listen_(this.renderer_, evt, handler, this.elementRef); + this._registry.listen(this._renderer, evt, handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (evt: string, handler: EventListener) => { - this.registry_.unlisten_(evt, handler); + this._registry.unlisten(evt, handler); }, registerSurfaceInteractionHandler: (evt: string, handler: EventListener) => { - this.registry_.listen_(this.renderer_, evt, handler, this.dialogSurface.elementRef); + this._registry.listen(this._renderer, evt, handler, this.dialogSurface.elementRef.nativeElement); }, deregisterSurfaceInteractionHandler: (evt: string, handler: EventListener) => { - this.registry_.unlisten_(evt, handler); + this._registry.unlisten(evt, handler); }, registerDocumentKeydownHandler: (handler: EventListener) => { if (!isBrowser()) { return; } - handler = this.escapeToClose ? handler : this.handleKeyDown_; - this.registry_.listen_(this.renderer_, 'keydown', handler, 'document'); + handler = this.escapeToClose ? handler : this._onKeyDown; + this._registry.listen(this._renderer, 'keydown', handler, document); }, deregisterDocumentKeydownHandler: (handler: EventListener) => { if (!isBrowser()) { return; } - handler = this.escapeToClose ? handler : this.handleKeyDown_; - this.registry_.unlisten_('keydown', handler); + handler = this.escapeToClose ? handler : this._onKeyDown; + this._registry.unlisten('keydown', handler); }, registerTransitionEndHandler: (handler: EventListener) => { if (this.dialogSurface) { - this.registry_.listen_(this.renderer_, 'transitionend', handler, this.dialogSurface.elementRef); + this._registry.listen(this._renderer, 'transitionend', handler, this.dialogSurface.elementRef.nativeElement); } }, deregisterTransitionEndHandler: (handler: EventListener) => { if (this.dialogSurface) { - this.registry_.unlisten_('transitionend', handler); + this._registry.unlisten('transitionend', handler); } }, - notifyAccept: () => this.accept_.emit('MDCDialog:accept'), - notifyCancel: () => this.cancel_.emit('MDCDialog:cancel'), + notifyAccept: () => this._accept.emit('MDCDialog:accept'), + notifyCancel: () => this._cancel.emit('MDCDialog:cancel'), trapFocusOnSurface: () => { - this.focusTrap_.activate(); + this._focusTrap.activate(); }, untrapFocusOnSurface: () => { - this.focusTrap_.deactivate(); + this._focusTrap.deactivate(); }, isDialog: (el: Element) => { return this.dialogSurface ? el === this.dialogSurface.elementRef.nativeElement : false; @@ -233,19 +233,19 @@ export class MdcDialogComponent implements AfterViewInit, OnDestroy { } = new MDCDialogFoundation(this._mdcAdapter); constructor( - private renderer_: Renderer2, + private _renderer: Renderer2, public elementRef: ElementRef, - private registry_: EventRegistry) { } + private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - private handleKeyDown_(keyboardEvent: KeyboardEvent) { + private _onKeyDown(keyboardEvent: KeyboardEvent): void { let keyCode = keyboardEvent.keyCode; if (keyCode === KeyCodes.ESCAPE) { @@ -256,7 +256,7 @@ export class MdcDialogComponent implements AfterViewInit, OnDestroy { show(): void { const focusedEl = this.dialogButtons.find((_) => _.focused || _.accept); - this.focusTrap_ = createFocusTrap(this.dialogSurface.elementRef.nativeElement, { + this._focusTrap = createFocusTrap(this.dialogSurface.elementRef.nativeElement, { initialFocus: focusedEl ? focusedEl.elementRef.nativeElement : this.elementRef.nativeElement, clickOutsideDeactivates: this.clickOutsideToClose, escapeDeactivates: this.escapeToClose, diff --git a/src/lib/dialog/index.ts b/src/lib/dialog/index.ts index 314f16fbc..918e9aafd 100644 --- a/src/lib/dialog/index.ts +++ b/src/lib/dialog/index.ts @@ -1,25 +1,25 @@ import { NgModule } from '@angular/core'; import { - MdcDialogBackdropDirective, - MdcDialogBodyDirective, - MdcDialogComponent, - MdcDialogFooterDirective, - MdcDialogHeaderDirective, - MdcDialogSurfaceDirective, - MdcDialogHeaderTitleDirective, - MdcDialogButtonDirective, -} from './dialog.component'; + MdcDialog, + MdcDialogBackdrop, + MdcDialogBody, + MdcDialogButton, + MdcDialogFooter, + MdcDialogHeader, + MdcDialogHeaderTitle, + MdcDialogSurface, +} from './dialog'; const DIALOG_COMPONENTS = [ - MdcDialogBackdropDirective, - MdcDialogBodyDirective, - MdcDialogComponent, - MdcDialogFooterDirective, - MdcDialogHeaderDirective, - MdcDialogSurfaceDirective, - MdcDialogHeaderTitleDirective, - MdcDialogButtonDirective, + MdcDialog, + MdcDialogBackdrop, + MdcDialogBody, + MdcDialogButton, + MdcDialogFooter, + MdcDialogHeader, + MdcDialogHeaderTitle, + MdcDialogSurface, ]; @NgModule({ @@ -28,4 +28,4 @@ const DIALOG_COMPONENTS = [ }) export class MdcDialogModule { } -export * from './dialog.component'; +export * from './dialog'; diff --git a/src/lib/drawer/drawer-adapter.d.ts b/src/lib/drawer/adapter.d.ts similarity index 100% rename from src/lib/drawer/drawer-adapter.d.ts rename to src/lib/drawer/adapter.d.ts diff --git a/src/lib/drawer/constants.ts b/src/lib/drawer/constants.ts new file mode 100644 index 000000000..275fcb7eb --- /dev/null +++ b/src/lib/drawer/constants.ts @@ -0,0 +1,3 @@ +export const FOCUSABLE_ELEMENTS = + 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), ' + + 'button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]'; diff --git a/src/lib/drawer/index.ts b/src/lib/drawer/index.ts index 100022500..96489745c 100644 --- a/src/lib/drawer/index.ts +++ b/src/lib/drawer/index.ts @@ -1,50 +1,50 @@ import { NgModule } from '@angular/core'; import { - MdcPermanentDrawerComponent, - MdcPermanentDrawerSpacerDirective, - MdcPermanentDrawerContentDirective, - MdcPermanentDrawerSelectedDirective, -} from './permanent/drawer-permanent.component'; + MdcPermanentDrawer, + MdcPermanentDrawerSpacer, + MdcPermanentDrawerContent, + MdcPermanentDrawerSelected, +} from './permanent/drawer-permanent'; import { - MdcTemporaryDrawerComponent, - MdcTemporaryDrawerContentDirective, - MdcTemporaryDrawerNavigationDirective, - MdcTemporaryDrawerHeaderDirective, - MdcTemporaryDrawerSpacerDirective, - MdcTemporaryDrawerHeaderContentDirective, - MdcTemporaryDrawerSelectedDirective, -} from './temporary/drawer-temporary.component'; + MdcTemporaryDrawer, + MdcTemporaryDrawerContent, + MdcTemporaryDrawerNavigation, + MdcTemporaryDrawerHeader, + MdcTemporaryDrawerSpacer, + MdcTemporaryDrawerHeaderContent, + MdcTemporaryDrawerSelected, +} from './temporary/drawer-temporary'; import { - MdcPersistentDrawerComponent, - MdcPersistentDrawerHeaderDirective, - MdcPersistentDrawerNavigationDirective, - MdcPersistentDrawerHeaderContentDirective, - MdcPersistentDrawerContentDirective, - MdcPersistentDrawerSelectedDirective, - MdcPersistentDrawerSpacerDirective, -} from './persistent/drawer-persistent.component'; + MdcPersistentDrawer, + MdcPersistentDrawerHeader, + MdcPersistentDrawerNavigation, + MdcPersistentDrawerHeaderContent, + MdcPersistentDrawerContent, + MdcPersistentDrawerSelected, + MdcPersistentDrawerSpacer, +} from './persistent/drawer-persistent'; const DRAWER_COMPONENTS = [ - MdcPermanentDrawerComponent, - MdcPermanentDrawerSpacerDirective, - MdcPermanentDrawerContentDirective, - MdcPermanentDrawerSelectedDirective, - MdcTemporaryDrawerComponent, - MdcTemporaryDrawerNavigationDirective, - MdcTemporaryDrawerContentDirective, - MdcTemporaryDrawerHeaderDirective, - MdcTemporaryDrawerSpacerDirective, - MdcTemporaryDrawerHeaderContentDirective, - MdcTemporaryDrawerSelectedDirective, - MdcPersistentDrawerComponent, - MdcPersistentDrawerHeaderDirective, - MdcPersistentDrawerNavigationDirective, - MdcPersistentDrawerHeaderContentDirective, - MdcPersistentDrawerContentDirective, - MdcPersistentDrawerSpacerDirective, - MdcPersistentDrawerSelectedDirective, + MdcPermanentDrawer, + MdcPermanentDrawerSpacer, + MdcPermanentDrawerContent, + MdcPermanentDrawerSelected, + MdcTemporaryDrawer, + MdcTemporaryDrawerContent, + MdcTemporaryDrawerNavigation, + MdcTemporaryDrawerHeader, + MdcTemporaryDrawerSpacer, + MdcTemporaryDrawerHeaderContent, + MdcTemporaryDrawerSelected, + MdcPersistentDrawer, + MdcPersistentDrawerHeader, + MdcPersistentDrawerNavigation, + MdcPersistentDrawerHeaderContent, + MdcPersistentDrawerContent, + MdcPersistentDrawerSelected, + MdcPersistentDrawerSpacer, ]; @NgModule({ @@ -53,6 +53,6 @@ const DRAWER_COMPONENTS = [ }) export class MdcDrawerModule { } -export * from './permanent/drawer-permanent.component'; -export * from './temporary/drawer-temporary.component'; -export * from './persistent/drawer-persistent.component'; +export * from './permanent/drawer-permanent'; +export * from './temporary/drawer-temporary'; +export * from './persistent/drawer-persistent'; diff --git a/src/lib/drawer/permanent/drawer-permanent.component.ts b/src/lib/drawer/permanent/drawer-permanent.ts similarity index 74% rename from src/lib/drawer/permanent/drawer-permanent.component.ts rename to src/lib/drawer/permanent/drawer-permanent.ts index 9478479a8..c78fb1ad8 100644 --- a/src/lib/drawer/permanent/drawer-permanent.component.ts +++ b/src/lib/drawer/permanent/drawer-permanent.ts @@ -1,16 +1,14 @@ import { - Component, Directive, ElementRef, HostBinding, Input, - ViewEncapsulation } from '@angular/core'; @Directive({ selector: '[mdc-permanent-drawer-spacer], mdc-permanent-drawer-spacer' }) -export class MdcPermanentDrawerSpacerDirective { +export class MdcPermanentDrawerSpacer { @HostBinding('class.mdc-permanent-drawer__toolbar-spacer') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -19,7 +17,7 @@ export class MdcPermanentDrawerSpacerDirective { @Directive({ selector: '[mdc-permanent-drawer-content], mdc-permanent-drawer-content' }) -export class MdcPermanentDrawerContentDirective { +export class MdcPermanentDrawerContent { @HostBinding('class.mdc-permanent-drawer__content') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -28,18 +26,16 @@ export class MdcPermanentDrawerContentDirective { @Directive({ selector: '[mdc-permanent-drawer-selected]' }) -export class MdcPermanentDrawerSelectedDirective { +export class MdcPermanentDrawerSelected { @HostBinding('class.mdc-permanent-drawer--selected') isHostClass = true; constructor(public elementRef: ElementRef) { } } -@Component({ +@Directive({ selector: 'mdc-permanent-drawer', - template: '', - encapsulation: ViewEncapsulation.None }) -export class MdcPermanentDrawerComponent { +export class MdcPermanentDrawer { @Input() fixed: boolean = false; @HostBinding('class.mdc-permanent-drawer') isHostClass = true; @HostBinding('attr.role') role: string = 'navigation'; @@ -47,5 +43,5 @@ export class MdcPermanentDrawerComponent { return this.fixed ? 'mdc-permanent-drawer--fixed' : ''; } - constructor(private _root: ElementRef) { } + constructor(public elementRef: ElementRef) { } } diff --git a/src/lib/drawer/persistent/drawer-persistent.component.ts b/src/lib/drawer/persistent/drawer-persistent.ts similarity index 71% rename from src/lib/drawer/persistent/drawer-persistent.component.ts rename to src/lib/drawer/persistent/drawer-persistent.ts index 40704b332..291de3b78 100644 --- a/src/lib/drawer/persistent/drawer-persistent.component.ts +++ b/src/lib/drawer/persistent/drawer-persistent.ts @@ -15,13 +15,14 @@ import { import { isBrowser } from '../../common'; import { EventRegistry } from '../../common/event-registry'; -import { MDCDrawerPersistentAdapter } from '../drawer-adapter'; +import { FOCUSABLE_ELEMENTS } from '../constants'; +import { MDCDrawerPersistentAdapter } from '../adapter'; import { MDCPersistentDrawerFoundation, util } from '@material/drawer'; @Directive({ selector: 'mdc-persistent-drawer-nav' }) -export class MdcPersistentDrawerNavigationDirective { +export class MdcPersistentDrawerNavigation { @HostBinding('class.mdc-persistent-drawer__drawer') isHostClass = true; @HostBinding('attr.role') role: string = 'navigation'; @@ -31,7 +32,7 @@ export class MdcPersistentDrawerNavigationDirective { @Directive({ selector: '[mdc-persistent-drawer-spacer], mdc-persistent-drawer-spacer' }) -export class MdcPersistentDrawerSpacerDirective { +export class MdcPersistentDrawerSpacer { @HostBinding('class.mdc-persistent-drawer__toolbar-spacer') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -40,7 +41,7 @@ export class MdcPersistentDrawerSpacerDirective { @Directive({ selector: '[mdc-persistent-drawer-header], mdc-persistent-drawer-header' }) -export class MdcPersistentDrawerHeaderDirective { +export class MdcPersistentDrawerHeader { @HostBinding('class.mdc-persistent-drawer__header') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -49,7 +50,7 @@ export class MdcPersistentDrawerHeaderDirective { @Directive({ selector: '[mdc-persistent-drawer-header-content], mdc-persistent-drawer-header-content' }) -export class MdcPersistentDrawerHeaderContentDirective { +export class MdcPersistentDrawerHeaderContent { @HostBinding('class.mdc-persistent-drawer__header-content') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -58,7 +59,7 @@ export class MdcPersistentDrawerHeaderContentDirective { @Directive({ selector: '[mdc-persistent-drawer-content], mdc-persistent-drawer-content' }) -export class MdcPersistentDrawerContentDirective { +export class MdcPersistentDrawerContent { @HostBinding('class.mdc-persistent-drawer__content') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -67,7 +68,7 @@ export class MdcPersistentDrawerContentDirective { @Directive({ selector: '[mdc-persistent-drawer-selected]' }) -export class MdcPersistentDrawerSelectedDirective { +export class MdcPersistentDrawerSelected { @HostBinding('class.mdc-persistent-drawer--selected') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -84,66 +85,61 @@ export class MdcPersistentDrawerSelectedDirective { encapsulation: ViewEncapsulation.None, providers: [EventRegistry], }) -export class MdcPersistentDrawerComponent implements AfterViewInit, OnDestroy { +export class MdcPersistentDrawer implements AfterViewInit, OnDestroy { @Output() opened: EventEmitter = new EventEmitter(); @Output() closed: EventEmitter = new EventEmitter(); @HostBinding('class.mdc-persistent-drawer') isHostClass = true; - @ViewChild(MdcPersistentDrawerNavigationDirective) drawerNav: MdcPersistentDrawerNavigationDirective; + @ViewChild(MdcPersistentDrawerNavigation) drawerNav: MdcPersistentDrawerNavigation; private _mdcAdapter: MDCDrawerPersistentAdapter = { addClass: (className: string) => { - this._renderer.addClass(this._root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this._root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, hasClass: (className: string) => { - return this._root.nativeElement.classList.contains(className); + return this.elementRef.nativeElement.classList.contains(className); }, hasNecessaryDom: () => !!this.drawerNav, registerInteractionHandler: (evt: string, handler: EventListener) => { - if (this._root) { - this._registry.listen_(this._renderer, util.remapEvent(evt), handler, this._root); - } + this._registry.listen(this._renderer, util.remapEvent(evt), handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (evt: string, handler: EventListener) => { - this._registry.unlisten_(evt, handler); + this._registry.unlisten(evt, handler); }, registerDrawerInteractionHandler: (evt: string, handler: EventListener) => { - if (this._root) { - this._registry.listen_(this._renderer, util.remapEvent(evt), handler, this._root); - } + this._registry.listen(this._renderer, util.remapEvent(evt), handler, this.elementRef.nativeElement); }, deregisterDrawerInteractionHandler: (evt: string, handler: EventListener) => { - this._registry.unlisten_(evt, handler); + this._registry.unlisten(evt, handler); }, registerTransitionEndHandler: (handler: EventListener) => { - if (this._root) { - this._registry.listen_(this._renderer, 'transitionend', handler, this._root); - } + this._registry.listen(this._renderer, 'transitionend', handler, this.elementRef.nativeElement); }, deregisterTransitionEndHandler: (handler: EventListener) => { - this._registry.unlisten_('transitionend', handler); + this._registry.unlisten('transitionend', handler); }, registerDocumentKeydownHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, 'keydown', handler, 'document'); + this._registry.listen(this._renderer, 'keydown', handler, document); } }, deregisterDocumentKeydownHandler: (handler: EventListener) => { - this._registry.unlisten_('keydown', handler); + this._registry.unlisten('keydown', handler); }, getDrawerWidth: () => { return this.drawerNav ? this.drawerNav.elementRef.nativeElement.offsetWidth : 0; }, setTranslateX: (value) => { if (this.drawerNav) { - this._renderer.setProperty(this.drawerNav.elementRef, util.getTransformPropertyName(), value === null ? null : `translateX(${value}px)`); + this._renderer.setProperty(this.drawerNav.elementRef, util.getTransformPropertyName(), + value === null ? null : `translateX(${value}px)`); } }, getFocusableElements: () => { return this.drawerNav ? - this.drawerNav.elementRef.nativeElement.querySelectorAll(MDCPersistentDrawerFoundation.strings.FOCUSABLE_ELEMENTS) : null; + this.drawerNav.elementRef.nativeElement.querySelectorAll(FOCUSABLE_ELEMENTS) : null; }, saveElementTabState: (el: Element) => { util.saveElementTabState(el); @@ -157,7 +153,7 @@ export class MdcPersistentDrawerComponent implements AfterViewInit, OnDestroy { notifyOpen: () => this.opened.emit(), notifyClose: () => this.closed.emit(), isRtl: () => { - return getComputedStyle(this._root.nativeElement).getPropertyValue('direction') === 'rtl'; + return getComputedStyle(this.elementRef.nativeElement).getPropertyValue('direction') === 'rtl'; }, isDrawer: (el) => { return this.drawerNav ? el === this.drawerNav.elementRef.nativeElement : false; @@ -174,24 +170,24 @@ export class MdcPersistentDrawerComponent implements AfterViewInit, OnDestroy { constructor( private _renderer: Renderer2, - private _root: ElementRef, + public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - isOpen() { + isOpen(): boolean { return this._foundation.isOpen(); } - open() { + open(): void { this._foundation.open(); } - close() { + close(): void { this._foundation.close(); } } diff --git a/src/lib/drawer/temporary/drawer-temporary.component.ts b/src/lib/drawer/temporary/drawer-temporary.ts similarity index 73% rename from src/lib/drawer/temporary/drawer-temporary.component.ts rename to src/lib/drawer/temporary/drawer-temporary.ts index 399e9aa34..bbb10469c 100644 --- a/src/lib/drawer/temporary/drawer-temporary.component.ts +++ b/src/lib/drawer/temporary/drawer-temporary.ts @@ -15,13 +15,14 @@ import { import { isBrowser } from '../../common'; import { EventRegistry } from '../../common/event-registry'; -import { MDCDrawerTemporaryAdapter } from '../drawer-adapter'; +import { FOCUSABLE_ELEMENTS } from '../constants'; +import { MDCDrawerTemporaryAdapter } from '../adapter'; import { MDCTemporaryDrawerFoundation, util } from '@material/drawer'; @Directive({ selector: 'mdc-temporary-drawer-nav' }) -export class MdcTemporaryDrawerNavigationDirective { +export class MdcTemporaryDrawerNavigation { @HostBinding('class.mdc-temporary-drawer__drawer') isHostClass = true; @HostBinding('attr.role') role: string = 'navigation'; constructor(public elementRef: ElementRef) { } @@ -30,7 +31,7 @@ export class MdcTemporaryDrawerNavigationDirective { @Directive({ selector: '[mdc-temporary-drawer-spacer], mdc-temporary-drawer-spacer' }) -export class MdcTemporaryDrawerSpacerDirective { +export class MdcTemporaryDrawerSpacer { @HostBinding('class.mdc-temporary-drawer__toolbar-spacer') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -39,7 +40,7 @@ export class MdcTemporaryDrawerSpacerDirective { @Directive({ selector: '[mdc-temporary-drawer-content], mdc-temporary-drawer-content' }) -export class MdcTemporaryDrawerContentDirective { +export class MdcTemporaryDrawerContent { @HostBinding('class.mdc-temporary-drawer__content') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -48,7 +49,7 @@ export class MdcTemporaryDrawerContentDirective { @Directive({ selector: '[mdc-temporary-drawer-header], mdc-temporary-drawer-header' }) -export class MdcTemporaryDrawerHeaderDirective { +export class MdcTemporaryDrawerHeader { @HostBinding('class.mdc-temporary-drawer__header') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -57,7 +58,7 @@ export class MdcTemporaryDrawerHeaderDirective { @Directive({ selector: '[mdc-temporary-drawer-header-content], mdc-temporary-drawer-header-content' }) -export class MdcTemporaryDrawerHeaderContentDirective { +export class MdcTemporaryDrawerHeaderContent { @HostBinding('class.mdc-temporary-drawer__header-content') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -66,7 +67,7 @@ export class MdcTemporaryDrawerHeaderContentDirective { @Directive({ selector: '[mdc-temporary-drawer-selected]' }) -export class MdcTemporaryDrawerSelectedDirective { +export class MdcTemporaryDrawerSelected { @HostBinding('class.mdc-temporary-drawer--selected') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -83,25 +84,25 @@ export class MdcTemporaryDrawerSelectedDirective { encapsulation: ViewEncapsulation.None, providers: [EventRegistry], }) -export class MdcTemporaryDrawerComponent implements AfterViewInit, OnDestroy { +export class MdcTemporaryDrawer implements AfterViewInit, OnDestroy { @Output() opened: EventEmitter = new EventEmitter(); @Output() closed: EventEmitter = new EventEmitter(); @HostBinding('class.mdc-temporary-drawer') isHostClass = true; - @ViewChild(MdcTemporaryDrawerNavigationDirective) drawerNav: MdcTemporaryDrawerNavigationDirective; + @ViewChild(MdcTemporaryDrawerNavigation) drawerNav: MdcTemporaryDrawerNavigation; @Input() closeOnClick: boolean = true; - private get drawerElement() { + private get drawerElement(): ElementRef { return this.drawerNav && this.drawerNav.elementRef; } private _mdcAdapter: MDCDrawerTemporaryAdapter = { addClass: (className: string) => { - this._renderer.addClass(this._root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this._root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, hasClass: (className: string) => { - return this._root.nativeElement.classList.contains(className); + return this.elementRef.nativeElement.classList.contains(className); }, addBodyClass: (className: string) => { if (isBrowser()) { @@ -115,36 +116,34 @@ export class MdcTemporaryDrawerComponent implements AfterViewInit, OnDestroy { }, hasNecessaryDom: () => !!this.drawerNav, registerInteractionHandler: (evt: string, handler: EventListener) => { - if (this._root) { - this._registry.listen_(this._renderer, util.remapEvent(evt), handler, this._root); - } + this._registry.listen(this._renderer, util.remapEvent(evt), handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (evt: string, handler: EventListener) => { - this._registry.unlisten_(evt, handler); + this._registry.unlisten(evt, handler); }, registerDrawerInteractionHandler: (evt: string, handler: EventListener) => { if (this.drawerElement) { - this._registry.listen_(this._renderer, util.remapEvent(evt), handler, this.drawerElement); + this._registry.listen(this._renderer, util.remapEvent(evt), handler, this.drawerElement.nativeElement); } }, deregisterDrawerInteractionHandler: (evt: string, handler: EventListener) => { - this._registry.unlisten_(evt, handler); + this._registry.unlisten(evt, handler); }, registerTransitionEndHandler: (handler: EventListener) => { if (this.drawerElement) { - this._registry.listen_(this._renderer, 'transitionend', handler, this.drawerElement); + this._registry.listen(this._renderer, 'transitionend', handler, this.drawerElement.nativeElement); } }, deregisterTransitionEndHandler: (handler: EventListener) => { - this._registry.unlisten_('transitionend', handler); + this._registry.unlisten('transitionend', handler); }, registerDocumentKeydownHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, 'keydown', handler, 'document'); + this._registry.listen(this._renderer, 'keydown', handler, document); } }, deregisterDocumentKeydownHandler: (handler: EventListener) => { - this._registry.unlisten_('keydown', handler); + this._registry.unlisten('keydown', handler); }, getDrawerWidth: () => { return this.drawerNav ? this.drawerNav.elementRef.nativeElement.offsetWidth : 0; @@ -156,12 +155,12 @@ export class MdcTemporaryDrawerComponent implements AfterViewInit, OnDestroy { }, updateCssVariable: (value: string) => { if (util.supportsCssCustomProperties()) { - this._renderer.setStyle(this._root.nativeElement, MDCTemporaryDrawerFoundation.strings.OPACITY_VAR_NAME, value); + this._renderer.setStyle(this.elementRef.nativeElement, '--mdc-temporary-drawer-opacity', value); } }, getFocusableElements: () => { return this.drawerNav ? - this.drawerNav.elementRef.nativeElement.querySelectorAll(MDCTemporaryDrawerFoundation.strings.FOCUSABLE_ELEMENTS) : null; + this.drawerNav.elementRef.nativeElement.querySelectorAll(FOCUSABLE_ELEMENTS) : null; }, saveElementTabState: (el: Element) => { util.saveElementTabState(el); @@ -175,7 +174,7 @@ export class MdcTemporaryDrawerComponent implements AfterViewInit, OnDestroy { notifyOpen: () => this.opened.emit(), notifyClose: () => this.closed.emit(), isRtl: () => { - return getComputedStyle(this._root.nativeElement).getPropertyValue('direction') === 'rtl'; + return getComputedStyle(this.elementRef.nativeElement).getPropertyValue('direction') === 'rtl'; }, isDrawer: (el) => { return this.drawerNav ? el === this.drawerNav.elementRef.nativeElement : false; @@ -192,29 +191,31 @@ export class MdcTemporaryDrawerComponent implements AfterViewInit, OnDestroy { constructor( private _renderer: Renderer2, - private _root: ElementRef, + public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); - this._registry.listen_(this._renderer, "click", (evt) => { + this._registry.listen(this._renderer, "click", (evt) => { if (this.closeOnClick) { this._foundation.close(); } - }, this.drawerElement); + }, this.drawerElement.nativeElement); } - ngOnDestroy() { + + ngOnDestroy(): void { this._foundation.destroy(); } - open() { + open(): void { this._foundation.open(); } - close() { + + close(): void { this._foundation.close(); } - isOpen() { + isOpen(): boolean { return this._foundation.isOpen(); } } diff --git a/src/lib/fab/fab.component.ts b/src/lib/fab/fab.ts similarity index 53% rename from src/lib/fab/fab.component.ts rename to src/lib/fab/fab.ts index 12f70cb8e..9565b713f 100644 --- a/src/lib/fab/fab.component.ts +++ b/src/lib/fab/fab.ts @@ -22,28 +22,26 @@ export type FabPosition = 'bottom-left' | 'bottom-right' | null; @Component({ selector: 'button[mdc-fab], a[mdc-fab]', template: '', - providers: [MdcRipple] + providers: [MdcRipple], + encapsulation: ViewEncapsulation.None, }) -export class MdcFabComponent implements AfterViewInit { - private exited_: boolean = false; - private position_: FabPosition = null; +export class MdcFab implements AfterViewInit { + private _exited: boolean = false; + private _position: FabPosition = null; @Input() mini: boolean = false; @Input() - get exited(): boolean { return this.exited_; } + get exited(): boolean { return this._exited; } set exited(value: boolean) { - this.exited_ = toBoolean(value); + this._exited = toBoolean(value); } @Input() - get position(): FabPosition { return this.position_; } + get position(): FabPosition { return this._position; } set position(value: FabPosition) { - if (value !== this.position_) { - if (value) { - this.renderer_.addClass(this.elementRef.nativeElement, `mdc-fab--${value}`); - } else { - this.renderer_.removeClass(this.elementRef.nativeElement, `mdc-fab--${this.position_}`); - } - this.position_ = value; + if (value !== this._position) { + value ? this._renderer.addClass(this.elementRef.nativeElement, `mdc-fab--${value}`) + : this._renderer.removeClass(this.elementRef.nativeElement, `mdc-fab--${this._position}`); + this._position = value; } } @Input('attr.tabindex') tabIndex: number = 0; @@ -52,48 +50,46 @@ export class MdcFabComponent implements AfterViewInit { return this.mini ? 'mdc-fab--mini' : ''; } @HostBinding('class.mdc-fab--exited') get classExited(): string { - this.tabIndex = this.exited_ ? -1 : this.tabIndex; - return this.exited_ ? 'mdc-fab--exited' : ''; + this.tabIndex = this._exited ? -1 : this.tabIndex; + return this._exited ? 'mdc-fab--exited' : ''; } @HostListener('keypress', ['$event']) onkeypress(evt: KeyboardEvent) { - this.handleKeyPress(evt); + this._onKeyPress(evt); } @HostListener('blur', ['$event']) blur(evt: FocusEvent) { - this.handleBlur(evt); + this._onBlur(evt); } @ContentChild(MdcIcon) fabIcon: MdcIcon; constructor( - private renderer_: Renderer2, + private _renderer: Renderer2, public elementRef: ElementRef, - private ripple_: MdcRipple) { - this.ripple_.init(); + private _ripple: MdcRipple) { + this._ripple.init(); } - ngAfterViewInit() { + ngAfterViewInit(): void { if (this.fabIcon) { - this.renderer_.addClass(this.fabIcon.elementRef.nativeElement, 'mdc-fab__icon'); - if (this.fabIcon.hasFontIcon()) { - this.renderer_.addClass(this.elementRef.nativeElement, 'mdc-fab__icon--size'); - } + this._renderer.addClass(this.fabIcon.elementRef.nativeElement, 'mdc-fab__icon'); + this._renderer.addClass(this.elementRef.nativeElement, 'mdc-fab__icon--size'); } } toggleExited(exited?: boolean): void { - this.exited_ = exited != null ? exited : !this.exited_; + this._exited = exited != null ? exited : !this._exited; } - private handleKeyPress(keyboardEvent: KeyboardEvent) { + private _onKeyPress(keyboardEvent: KeyboardEvent): void { let keyCode = keyboardEvent.keyCode; if (keyCode == KeyCodes.ENTER || isSpaceKey(keyboardEvent)) { - this.ripple_.active = true; + this._ripple.active = true; if (keyCode != KeyCodes.ENTER) { keyboardEvent.preventDefault(); } } } - private handleBlur(focusEvent: FocusEvent) { - this.ripple_.active = false; + private _onBlur(focusEvent: FocusEvent): void { + this._ripple.active = false; } } diff --git a/src/lib/fab/index.ts b/src/lib/fab/index.ts index 8e3033838..fdf01c73a 100644 --- a/src/lib/fab/index.ts +++ b/src/lib/fab/index.ts @@ -1,18 +1,20 @@ import { NgModule } from '@angular/core'; import { MdcIconModule } from '../icon/index'; -import { MdcFabComponent } from './fab.component'; +import { MdcRippleModule } from '../core/ripple/index'; +import { MdcFab } from './fab'; @NgModule({ imports: [ MdcIconModule, + MdcRippleModule, ], exports: [ MdcIconModule, - MdcFabComponent + MdcFab ], - declarations: [MdcFabComponent], + declarations: [MdcFab], }) export class MdcFabModule { } -export * from './fab.component'; +export * from './fab'; diff --git a/src/lib/form-field/form-field-adapter.d.ts b/src/lib/form-field/adapter.d.ts similarity index 100% rename from src/lib/form-field/form-field-adapter.d.ts rename to src/lib/form-field/adapter.d.ts diff --git a/src/lib/form-field/form-field.directive.ts b/src/lib/form-field/form-field.ts similarity index 77% rename from src/lib/form-field/form-field.directive.ts rename to src/lib/form-field/form-field.ts index 12fd03f0e..3c78bc804 100644 --- a/src/lib/form-field/form-field.directive.ts +++ b/src/lib/form-field/form-field.ts @@ -10,32 +10,32 @@ import { } from '@angular/core'; import { EventRegistry } from '../common/event-registry'; -import { MdcCheckboxComponent } from '../checkbox/checkbox.component'; -import { MdcRadioComponent } from '../radio/radio.component'; -import { MdcSwitchComponent } from '../switch/switch.component'; +import { MdcCheckbox } from '../checkbox/checkbox'; +import { MdcRadio } from '../radio/radio'; +import { MdcSwitch } from '../switch/switch'; -import { MDCFormFieldAdapter } from './form-field-adapter'; +import { MDCFormFieldAdapter } from './adapter'; import { MDCFormFieldFoundation } from '@material/form-field'; @Directive({ selector: 'mdc-form-field', providers: [EventRegistry], }) -export class MdcFormFieldDirective implements AfterContentInit, OnDestroy { +export class MdcFormField implements AfterContentInit, OnDestroy { @Input() alignEnd: boolean = false; @HostBinding('class') get className(): string { return `mdc-form-field${this.alignEnd ? ' mdc-form-field--align-end' : ''}`; } - @ContentChild(MdcCheckboxComponent) inputCheckbox: MdcCheckboxComponent; - @ContentChild(MdcRadioComponent) inputRadio: MdcRadioComponent; - @ContentChild(MdcSwitchComponent) inputSwitch: MdcSwitchComponent; + @ContentChild(MdcCheckbox) inputCheckbox: MdcCheckbox; + @ContentChild(MdcRadio) inputRadio: MdcRadio; + @ContentChild(MdcSwitch) inputSwitch: MdcSwitch; private _mdcAdapter: MDCFormFieldAdapter = { registerInteractionHandler: (type: string, handler: EventListener) => { - this._registry.listen_(this._renderer, type, handler, this._root); + this._registry.listen(this._renderer, type, handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (type: string, handler: EventListener) => { - this._registry.unlisten_(type, handler); + this._registry.unlisten(type, handler); }, activateInputRipple: () => { if (this.inputCheckbox) { @@ -70,28 +70,28 @@ export class MdcFormFieldDirective implements AfterContentInit, OnDestroy { constructor( private _renderer: Renderer2, - private _root: ElementRef, + public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterContentInit() { + ngAfterContentInit(): void { this._foundation.init(); if (this.inputCheckbox) { - let checkBoxLabel = this._renderer.nextSibling(this.inputCheckbox.root.nativeElement); + let checkBoxLabel = this._renderer.nextSibling(this.inputCheckbox.elementRef.nativeElement); if (checkBoxLabel && checkBoxLabel.nextSibling) { if (checkBoxLabel.nextSibling.tagName === 'LABEL') { this._renderer.setAttribute(checkBoxLabel.nextSibling, 'for', this.inputCheckbox.inputId); } } } else if (this.inputRadio) { - let radioLabel = this._renderer.nextSibling(this.inputRadio.root.nativeElement); + let radioLabel = this._renderer.nextSibling(this.inputRadio.elementRef.nativeElement); if (radioLabel && radioLabel.nextSibling) { if (radioLabel.nextSibling.tagName === 'LABEL') { this._renderer.setAttribute(radioLabel.nextSibling, 'for', this.inputRadio.inputId); } } } else if (this.inputSwitch) { - let switchLabel = this._renderer.nextSibling(this.inputSwitch.root.nativeElement); + let switchLabel = this._renderer.nextSibling(this.inputSwitch.elementRef.nativeElement); if (switchLabel && switchLabel.nextSibling) { if (switchLabel.nextSibling.tagName === 'LABEL') { this._renderer.setAttribute(switchLabel.nextSibling, 'for', this.inputSwitch.inputId); @@ -100,7 +100,7 @@ export class MdcFormFieldDirective implements AfterContentInit, OnDestroy { } } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } } diff --git a/src/lib/form-field/index.ts b/src/lib/form-field/index.ts index 45a8c4415..b8840a0c3 100644 --- a/src/lib/form-field/index.ts +++ b/src/lib/form-field/index.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core'; -import { MdcFormFieldDirective } from './form-field.directive'; +import { MdcFormField } from './form-field'; @NgModule({ - exports: [MdcFormFieldDirective], - declarations: [MdcFormFieldDirective] + exports: [MdcFormField], + declarations: [MdcFormField] }) export class MdcFormFieldModule { } -export * from './form-field.directive'; +export * from './form-field'; diff --git a/src/lib/icon-toggle/icon-toggle.component.ts b/src/lib/icon-toggle/icon-toggle.ts similarity index 61% rename from src/lib/icon-toggle/icon-toggle.component.ts rename to src/lib/icon-toggle/icon-toggle.ts index 0098b2eee..ee0282ad1 100644 --- a/src/lib/icon-toggle/icon-toggle.component.ts +++ b/src/lib/icon-toggle/icon-toggle.ts @@ -19,28 +19,31 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; import { toBoolean } from '../common'; import { EventRegistry } from '../common/event-registry'; import { MdcRipple } from '../core/ripple/ripple.service'; +import { MdcIcon } from '../icon/icon'; import { MDCIconToggleAdapter } from './adapter'; import { MDCIconToggleFoundation } from '@material/icon-toggle'; export const MD_ICON_TOGGLE_CONTROL_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdcIconToggleComponent), + useExisting: forwardRef(() => MdcIconToggle), multi: true }; @Component({ selector: 'mdc-icon-toggle', - template: ``, - encapsulation: ViewEncapsulation.None, + template: '', providers: [ MD_ICON_TOGGLE_CONTROL_VALUE_ACCESSOR, MdcRipple, EventRegistry, ], + encapsulation: ViewEncapsulation.None, }) -export class MdcIconToggleComponent implements AfterViewInit, OnChanges, OnDestroy { - private value_: boolean = false; +export class MdcIconToggle implements AfterViewInit, OnChanges, OnDestroy { + private _value: boolean = false; + private _onTouched: () => any = () => { }; + private _controlValueAccessorChangeFn: (value: any) => void = (value) => { }; @Input() iconOn: string; @Input() iconOff: string; @@ -48,24 +51,19 @@ export class MdcIconToggleComponent implements AfterViewInit, OnChanges, OnDestr @Input() labelOff: string; @Input() cssClassOn: string; @Input() cssClassOff: string; - @Input() primary: boolean; - @Input() secondary: boolean; + @Input() primary: boolean = false; + @Input() secondary: boolean = false; @Input() iconClass: string; - get value(): boolean { return this.value_; } - set value(v) { - this.value_ = toBoolean(v); - } - @Input() - get disabled() { return this._foundation.isDisabled(); } - set disabled(value) { - this._foundation.setDisabled(value); + get value(): boolean { return this._value; } + set value(v: boolean) { + this._value = toBoolean(v); } @Input() - get disableRipple() { return this._ripple.disabled; } - set disableRipple(value) { - this._ripple.disabled = toBoolean(value); + get disabled(): boolean { return this._foundation.isDisabled(); } + set disabled(value: boolean) { + this._foundation.setDisabled(toBoolean(value)); } - @Output('change') change_: EventEmitter = new EventEmitter(); + @Output('change') _change: EventEmitter = new EventEmitter(); @HostBinding('class.mdc-icon-toggle') isHostClass = true; @HostBinding('attr.role') role: string = 'button'; @HostBinding('attr.aria-pressed') ariaPressed: string = 'false'; @@ -90,34 +88,30 @@ export class MdcIconToggleComponent implements AfterViewInit, OnChanges, OnDestr cssClass: this.cssClassOff }); } - @ViewChild('icon') iconInner: ElementRef; - - onTouched: () => any = () => { }; - - private _controlValueAccessorChangeFn: (value: any) => void = (value) => { }; + @ViewChild(MdcIcon) iconInner: MdcIcon; private _mdcAdapter: MDCIconToggleAdapter = { addClass: (className: string) => { - this._renderer.addClass(this.iconClass ? this.iconInner.nativeElement : this._root.nativeElement, className); + this._renderer.addClass(this.iconClass ? this.iconInner.elementRef.nativeElement : this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this.iconClass ? this.iconInner.nativeElement : this._root.nativeElement, className); + this._renderer.removeClass(this.iconClass ? this.iconInner.elementRef.nativeElement : this.elementRef.nativeElement, className); }, registerInteractionHandler: (type: string, handler: EventListener) => { - this._registry.listen_(this._renderer, type, handler, this._root); + this._registry.listen(this._renderer, type, handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (type: string, handler: EventListener) => { - this._registry.unlisten_(type, handler); + this._registry.unlisten(type, handler); }, - setText: (text) => this.iconInner.nativeElement.textContent = text, - getTabIndex: () => this._root.nativeElement.tabIndex, - setTabIndex: (tabIndex) => this._root.nativeElement.tabIndex = tabIndex, - getAttr: (name) => this._root.nativeElement.getAttribute(name), - setAttr: (name, value) => this._renderer.setAttribute(this._root.nativeElement, name, value), - rmAttr: (name) => this._renderer.removeAttribute(this._root.nativeElement, name), + setText: (text: string) => this.iconInner.elementRef.nativeElement.textContent = text, + getTabIndex: () => this.elementRef.nativeElement.tabIndex, + setTabIndex: (tabIndex: number) => this.elementRef.nativeElement.tabIndex = tabIndex, + getAttr: (name: string) => this.elementRef.nativeElement.getAttribute(name), + setAttr: (name: string, value: string) => this._renderer.setAttribute(this.elementRef.nativeElement, name, value), + rmAttr: (name: string) => this._renderer.removeAttribute(this.elementRef.nativeElement, name), notifyChange: (evtData: { isOn: boolean }) => { this._controlValueAccessorChangeFn(evtData.isOn); - this.change_.emit(evtData.isOn); + this._change.emit(evtData.isOn); } }; @@ -134,40 +128,40 @@ export class MdcIconToggleComponent implements AfterViewInit, OnChanges, OnDestr constructor( private _renderer: Renderer2, - private _root: ElementRef, - private _ripple: MdcRipple, + public elementRef: ElementRef, + public ripple: MdcRipple, private _registry: EventRegistry) { } - ngOnChanges(changes: { [key: string]: SimpleChange }) { + ngOnChanges(changes: { [key: string]: SimpleChange }): void { let change = changes['iconClass']; if (change) { - this._renderer.addClass(this.iconInner.nativeElement, this.iconClass); + this._renderer.addClass(this.iconInner.elementRef.nativeElement, this.iconClass); } } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); - this._ripple.init(true); - this._ripple.active = !this._foundation.isKeyboardActivated(); + this.ripple.init(true); + this.ripple.active = !this._foundation.isKeyboardActivated(); this._foundation.toggle(this._foundation.isOn()); this._foundation.refreshToggleData(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - writeValue(value: boolean) { - this.value_ = value; + writeValue(value: boolean): void { + this._value = value; } - registerOnChange(fn: (value: any) => void) { + registerOnChange(fn: (value: any) => void): void { this._controlValueAccessorChangeFn = fn; } - registerOnTouched(fn: any) { - this.onTouched = fn; + registerOnTouched(fn: any): void { + this._onTouched = fn; } toggle(isOn?: boolean): void { diff --git a/src/lib/icon-toggle/index.ts b/src/lib/icon-toggle/index.ts index 9800fe466..c81784974 100644 --- a/src/lib/icon-toggle/index.ts +++ b/src/lib/icon-toggle/index.ts @@ -1,17 +1,21 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MdcIconToggleComponent } from './icon-toggle.component'; +import { MdcIconToggle } from './icon-toggle'; +import { MdcIconModule } from '../icon/index'; const ICON_TOGGLE_COMPONENTS = [ - MdcIconToggleComponent, + MdcIconToggle, ]; @NgModule({ - imports: [FormsModule], - exports: ICON_TOGGLE_COMPONENTS, + imports: [FormsModule, MdcIconModule], + exports: [ + ICON_TOGGLE_COMPONENTS, + MdcIconModule, + ], declarations: ICON_TOGGLE_COMPONENTS }) export class MdcIconToggleModule { } -export * from './icon-toggle.component'; +export * from './icon-toggle'; diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts index dded660ad..80ae1be43 100644 --- a/src/lib/icon/icon.ts +++ b/src/lib/icon/icon.ts @@ -1,10 +1,10 @@ import { Directive, ElementRef, + HostBinding, Input, OnChanges, OnInit, - HostBinding, Renderer2, SimpleChanges, } from '@angular/core'; @@ -13,10 +13,9 @@ import { selector: 'mdc-icon', }) export class MdcIcon implements OnChanges, OnInit { - private previousFontSetClass_: string; - private previousFontIconClass_: string; + private _previousFontSetClass: string; + private _previousFontIconClass: string; - @Input() svgIcon: string; @Input() fontSet: string = 'material-icons'; @Input() fontIcon: string; @HostBinding('class.material-icons') get classMaterialIcon(): string { @@ -24,79 +23,44 @@ export class MdcIcon implements OnChanges, OnInit { } constructor( - private renderer_: Renderer2, + private _renderer: Renderer2, public elementRef: ElementRef) { - renderer_.setAttribute(elementRef.nativeElement, 'aria-hidden', 'true'); + _renderer.setAttribute(elementRef.nativeElement, 'aria-hidden', 'true'); } ngOnChanges(changes: SimpleChanges) { - // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations. - if (changes.svgIcon) { - this.clearSvgElement_(); - } - - if (this.hasFontIcon()) { - const fontSet = changes['fontSet'] ? changes['fontSet'].currentValue : this.fontSet; - const fontIcon = changes['fontIcon'] ? changes['fontIcon'].currentValue : this.fontIcon; - this.updateFontIconClasses_(fontSet, fontIcon); - } + const fontSet = changes['fontSet'] ? changes['fontSet'].currentValue : this.fontSet; + const fontIcon = changes['fontIcon'] ? changes['fontIcon'].currentValue : this.fontIcon; + this._updateFontIconClasses(fontSet, fontIcon); } ngOnInit() { - // Update font classes because ngOnChanges won't be called if none of the inputs are present, - // e.g. arrow In this case we need to add a CSS class for the default font. - if (this.hasFontIcon()) { - this.updateFontIconClasses_(this.fontSet, this.fontIcon); - } - } - - hasFontIcon(): boolean { - return !this.svgIcon; + this._updateFontIconClasses(this.fontSet, this.fontIcon); } - private setSvgElement_(svg: SVGElement) { - this.clearSvgElement_(); - this.renderer_.appendChild(this.elementRef.nativeElement, svg); - } - - private clearSvgElement_() { - const layoutElement = this.elementRef.nativeElement; - const childCount = layoutElement.childNodes.length; - - // Remove existing child nodes and add the new SVG element. Note that we can't - // use innerHTML, because IE will throw if the element has a data binding. - for (let i = 0; i < childCount; i++) { - this.renderer_.removeChild(layoutElement, layoutElement.childNodes[i]); - } - } - - private updateFontIconClasses_(fontSet: string | null, fontIcon: string | null) { - if (!this.hasFontIcon()) { - return; - } - + private _updateFontIconClasses(fontSet: string | null, fontIcon: string | null): void { const elem = this.elementRef.nativeElement; - if (fontSet != this.previousFontSetClass_) { - if (this.previousFontSetClass_) { - this.renderer_.removeClass(elem, this.previousFontSetClass_); + if (fontSet != this._previousFontSetClass) { + if (this._previousFontSetClass) { + this._renderer.removeClass(elem, this._previousFontSetClass); } if (fontSet) { - this.renderer_.addClass(elem, fontSet); + this._renderer.addClass(elem, fontSet); } - this.previousFontSetClass_ = fontSet; + this._previousFontSetClass = fontSet; } - if (this.fontIcon != this.previousFontIconClass_) { - if (this.previousFontIconClass_) { - this.renderer_.removeClass(elem, this.previousFontIconClass_); + if (this.fontIcon != this._previousFontIconClass) { + if (this._previousFontIconClass) { + this._renderer.removeClass(elem, this._previousFontIconClass); } if (this.fontIcon) { for (let iconClass of this.fontIcon.split(" ")) { - this.renderer_.addClass(elem, iconClass); + this._renderer.addClass(elem, iconClass); } } - this.previousFontIconClass_ = this.fontIcon; + this._previousFontIconClass = this.fontIcon; } } } diff --git a/src/lib/linear-progress/linear-progress-adapter.d.ts b/src/lib/linear-progress/adapter.d.ts similarity index 100% rename from src/lib/linear-progress/linear-progress-adapter.d.ts rename to src/lib/linear-progress/adapter.d.ts diff --git a/src/lib/linear-progress/index.ts b/src/lib/linear-progress/index.ts index 02c649ccc..58c530472 100644 --- a/src/lib/linear-progress/index.ts +++ b/src/lib/linear-progress/index.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core'; -import { MdcLinearProgressComponent } from './linear-progress.component'; +import { MdcLinearProgress } from './linear-progress'; @NgModule({ - exports: [MdcLinearProgressComponent], - declarations: [MdcLinearProgressComponent], + exports: [MdcLinearProgress], + declarations: [MdcLinearProgress], }) export class MdcLinearProgressModule { } -export * from './linear-progress.component'; +export * from './linear-progress'; diff --git a/src/lib/linear-progress/linear-progress.component.ts b/src/lib/linear-progress/linear-progress.ts similarity index 68% rename from src/lib/linear-progress/linear-progress.component.ts rename to src/lib/linear-progress/linear-progress.ts index 93001b6eb..14804002c 100644 --- a/src/lib/linear-progress/linear-progress.component.ts +++ b/src/lib/linear-progress/linear-progress.ts @@ -7,7 +7,7 @@ import { Renderer2, ViewEncapsulation } from '@angular/core'; -import { MDCLinearProgressAdapter } from './linear-progress-adapter'; +import { MDCLinearProgressAdapter } from './adapter'; import { MDCLinearProgressFoundation } from '@material/linear-progress'; @@ -26,23 +26,23 @@ import { MDCLinearProgressFoundation } from '@material/linear-progress'; `, encapsulation: ViewEncapsulation.None }) -export class MdcLinearProgressComponent implements AfterViewInit { - private indeterminate_: boolean; - private reversed_: boolean; +export class MdcLinearProgress implements AfterViewInit { + private _indeterminate: boolean = false; + private _reversed: boolean = false; @Input() - get indeterminate() { return this.indeterminate_; } - set indeterminate(value) { + get indeterminate(): boolean { return this._indeterminate; } + set indeterminate(value: boolean) { this._foundation.setDeterminate(!value); - this.indeterminate_ = !value; + this._indeterminate = !value; } @Input() - get reversed() { return this.reversed_; } - set reversed(value) { + get reversed(): boolean { return this._reversed; } + set reversed(value: boolean) { this._foundation.setReverse(value); - this.reversed_ = value; + this._reversed = value; } - @Input() secondary: boolean; + @Input() secondary: boolean = false; @HostBinding('attr.role') role: string = 'progressbar'; @HostBinding('class.mdc-linear-progress') isHostClass = true; @HostBinding('class.mdc-linear-progress--accent') get classSecondary(): string { @@ -51,19 +51,19 @@ export class MdcLinearProgressComponent implements AfterViewInit { private _mdcAdapter: MDCLinearProgressAdapter = { addClass: (className: string) => { - this._renderer.addClass(this._root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, getPrimaryBar: () => { - return this._root.nativeElement.querySelector('.mdc-linear-progress__primary-bar'); + return this.elementRef.nativeElement.querySelector('.mdc-linear-progress__primary-bar'); }, getBuffer: () => { - return this._root.nativeElement.querySelector('.mdc-linear-progress__buffer'); + return this.elementRef.nativeElement.querySelector('.mdc-linear-progress__buffer'); }, hasClass: (className: string) => { - return this._renderer.parentNode(this._root.nativeElement).classList.contains(className); + return this._renderer.parentNode(this.elementRef.nativeElement).classList.contains(className); }, removeClass: (className: string) => { - this._renderer.removeClass(this._root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, setStyle: (el: Element, styleProperty: string, value: number) => { this._renderer.setStyle(el, styleProperty, value); @@ -82,9 +82,9 @@ export class MdcLinearProgressComponent implements AfterViewInit { constructor( private _renderer: Renderer2, - private _root: ElementRef) { } + public elementRef: ElementRef) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); } diff --git a/src/lib/list/index.ts b/src/lib/list/index.ts index 93b8d210f..33584973b 100644 --- a/src/lib/list/index.ts +++ b/src/lib/list/index.ts @@ -1,18 +1,20 @@ import { NgModule } from '@angular/core'; -import { MdcList } from './list.component'; +import { MdcRippleModule } from '../core/ripple/index'; + +import { + MdcList, + MdcListDivider, + MdcListGroup, + MdcListGroupSubheader, +} from './list'; import { MdcListItem, MdcListItemStart, MdcListItemEnd, MdcListItemText, MdcListItemTextSecondary, -} from './list-item.directive'; -import { - MdcListGroup, - MdcListGroupSubheader, -} from './list-group.directive'; -import { MdcListDivider } from './list-divider.component'; +} from './list-item'; const LIST_COMPONENTS = [ MdcList, @@ -27,12 +29,11 @@ const LIST_COMPONENTS = [ ]; @NgModule({ + imports: [MdcRippleModule], exports: LIST_COMPONENTS, declarations: LIST_COMPONENTS, }) export class MdcListModule { } -export * from './list.component'; -export * from './list-item.directive'; -export * from './list-divider.component'; -export * from './list-group.directive'; +export * from './list'; +export * from './list-item'; diff --git a/src/lib/list/list-divider.component.ts b/src/lib/list/list-divider.component.ts deleted file mode 100644 index 691a20110..000000000 --- a/src/lib/list/list-divider.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { - Component, - ElementRef, - Input, - Renderer2, -} from '@angular/core'; -import { toBoolean } from '../common'; - -@Component({ - selector: '[mdc-list-divider], mdc-list-divider', - template: - `
`, -}) -export class MdcListDivider { - private inset_: boolean; - - @Input() - get inset() { return this.inset_; } - set inset(value) { - this.inset_ = toBoolean(value); - if (this.inset_) { - this.renderer_.addClass(this.elementRef.nativeElement, 'mdc-list-divider--inset'); - } else { - this.renderer_.removeClass(this.elementRef.nativeElement, 'mdc-list-divider--inset'); - } - } - - constructor( - public elementRef: ElementRef, - private renderer_: Renderer2) { } -} diff --git a/src/lib/list/list-group.directive.ts b/src/lib/list/list-group.directive.ts deleted file mode 100644 index 850bdb4df..000000000 --- a/src/lib/list/list-group.directive.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { - Directive, - ElementRef, - HostBinding -} from '@angular/core'; - -@Directive({ - selector: '[mdc-list-group], mdc-list-group' -}) -export class MdcListGroup { - @HostBinding('class.mdc-list-group') isHostClass = true; - - constructor(public elementRef: ElementRef) { } -} - -@Directive({ - selector: '[mdc-list-group-subheader], mdc-list-group-subheader' -}) -export class MdcListGroupSubheader { - @HostBinding('class.mdc-list-group__subheader') isHostClass = true; - - constructor(public elementRef: ElementRef) { } -} diff --git a/src/lib/list/list-item.directive.ts b/src/lib/list/list-item.ts similarity index 73% rename from src/lib/list/list-item.directive.ts rename to src/lib/list/list-item.ts index 2f0b56f79..a202dc511 100644 --- a/src/lib/list/list-item.directive.ts +++ b/src/lib/list/list-item.ts @@ -13,7 +13,7 @@ import { } from '@angular/core'; import { toBoolean } from '../common'; import { MdcRipple } from '../core/ripple/ripple.service'; -import { MdcList } from './list.component'; +import { MdcList } from './list'; @Directive({ selector: '[mdc-list-item-start]' @@ -40,9 +40,9 @@ export class MdcListItemEnd { }) export class MdcListItem implements AfterViewInit, OnChanges { @Input() - get disableRipple() { return this.ripple_.disabled; } - set disableRipple(value) { - this.ripple_.disabled = toBoolean(value); + get disableRipple(): boolean { return this._ripple.disabled; } + set disableRipple(value: boolean) { + this._ripple.disabled = toBoolean(value); } @HostBinding('class.mdc-list-item') isHostClass = true; @HostBinding('attr.role') role: string = 'listitem'; @@ -50,25 +50,25 @@ export class MdcListItem implements AfterViewInit, OnChanges { constructor( public elementRef: ElementRef, - private renderer_: Renderer2, - private ripple_: MdcRipple, - @Inject(forwardRef(() => MdcList)) private mdcList_: MdcList) { } + private _renderer: Renderer2, + private _ripple: MdcRipple, + @Inject(forwardRef(() => MdcList)) private _mdcList: MdcList) { } - ngAfterViewInit() { + ngAfterViewInit(): void { if (this.elementRef.nativeElement.tagName === 'A') { - this.ripple_.init(); + this._ripple.init(); } - if (this.listItemStart && this.mdcList_.avatar) { - this.renderer_.addClass(this.listItemStart.elementRef.nativeElement, 'mdc-icon--avatar'); + if (this.listItemStart && this._mdcList.avatar) { + this._renderer.addClass(this.listItemStart.elementRef.nativeElement, 'mdc-icon--avatar'); } } - ngOnChanges(changes: { [key: string]: SimpleChange }) { + ngOnChanges(changes: { [key: string]: SimpleChange }): void { let change = changes['disableRipple']; if (toBoolean(change.currentValue)) { - this.ripple_.disabled = true; - } else if (!this.mdcList_.disableRipple) { - this.ripple_.disabled = false; + this._ripple.disabled = true; + } else if (!this._mdcList.disableRipple) { + this._ripple.disabled = false; } } } diff --git a/src/lib/list/list.component.ts b/src/lib/list/list.component.ts deleted file mode 100644 index e158b179e..000000000 --- a/src/lib/list/list.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { - Component, - ContentChildren, - ElementRef, - HostBinding, - Input, - OnChanges, - QueryList, - SimpleChange, -} from '@angular/core'; -import { MdcListItem } from './list-item.directive'; -import { toBoolean } from '../common'; - -@Component({ - selector: 'mdc-list', - template: ``, -}) -export class MdcList implements OnChanges { - private disableRipple_: boolean = false; - - @Input() dense: boolean = false; - @Input() twoLine: boolean = false; - @Input() avatar: boolean = false; - @Input() border: boolean = false; - @Input() - get disableRipple() { return this.disableRipple_; } - set disableRipple(value) { - this.disableRipple_ = toBoolean(value); - } - @HostBinding('class.mdc-list') isHostClass = true; - @HostBinding('attr.role') role: string = 'list'; - @HostBinding('class.mdc-list--dense') get classDenseList(): string { - return this.dense ? 'mdc-list--dense' : ''; - } - @HostBinding('class.mdc-list--two-line') get classTwoline(): string { - return this.twoLine ? 'mdc-list--two-line' : ''; - } - @HostBinding('class.mdc-list--avatar-list') get classAvatarList(): string { - return this.avatar ? 'mdc-list--avatar-list' : ''; - } - @HostBinding('class.mdc-list--border') get classBorder(): string { - return this.border ? 'mdc-list--border' : ''; - } - @ContentChildren(MdcListItem) listItems: QueryList; - - constructor(public elementRef: ElementRef) { } - - ngOnChanges(changes: { [key: string]: SimpleChange }) { - let change = changes['disableRipple']; - - if (change) { - this.disableRipples(toBoolean(change.currentValue)); - } - } - - disableRipples(value: boolean) { - if (this.listItems) { - this.listItems.forEach(_ => _.disableRipple = value); - } - } -} diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts new file mode 100644 index 000000000..c0a1b0fb8 --- /dev/null +++ b/src/lib/list/list.ts @@ -0,0 +1,100 @@ +import { + Component, + Directive, + ContentChildren, + ElementRef, + HostBinding, + Input, + OnChanges, + QueryList, + SimpleChange, + Renderer2, +} from '@angular/core'; +import { MdcListItem } from './list-item'; +import { toBoolean } from '../common'; + +@Directive({ + selector: '[mdc-list-group], mdc-list-group' +}) +export class MdcListGroup { + @HostBinding('class.mdc-list-group') isHostClass = true; + + constructor(public elementRef: ElementRef) { } +} + +@Directive({ + selector: '[mdc-list-group-subheader], mdc-list-group-subheader' +}) +export class MdcListGroupSubheader { + @HostBinding('class.mdc-list-group__subheader') isHostClass = true; + + constructor(public elementRef: ElementRef) { } +} + +@Component({ + selector: '[mdc-list-divider], mdc-list-divider', + template: '
', +}) +export class MdcListDivider { + private _inset: boolean = false; + + @Input() + get inset(): boolean { return this._inset; } + set inset(value: boolean) { + this._inset = toBoolean(value); + this._inset ? this._renderer.addClass(this.elementRef.nativeElement, 'mdc-list-divider--inset') + : this._renderer.removeClass(this.elementRef.nativeElement, 'mdc-list-divider--inset'); + } + + constructor( + public elementRef: ElementRef, + private _renderer: Renderer2) { } +} + +@Directive({ + selector: 'mdc-list', +}) +export class MdcList implements OnChanges { + private _disableRipple: boolean = false; + + @Input() dense: boolean = false; + @Input() twoLine: boolean = false; + @Input() avatar: boolean = false; + @Input() border: boolean = false; + @Input() + get disableRipple(): boolean { return this._disableRipple; } + set disableRipple(value: boolean) { + this._disableRipple = toBoolean(value); + } + @HostBinding('class.mdc-list') isHostClass = true; + @HostBinding('attr.role') role: string = 'list'; + @HostBinding('class.mdc-list--dense') get classDenseList(): string { + return this.dense ? 'mdc-list--dense' : ''; + } + @HostBinding('class.mdc-list--two-line') get classTwoline(): string { + return this.twoLine ? 'mdc-list--two-line' : ''; + } + @HostBinding('class.mdc-list--avatar-list') get classAvatarList(): string { + return this.avatar ? 'mdc-list--avatar-list' : ''; + } + @HostBinding('class.mdc-list--border') get classBorder(): string { + return this.border ? 'mdc-list--border' : ''; + } + @ContentChildren(MdcListItem) listItems: QueryList; + + constructor(public elementRef: ElementRef) { } + + ngOnChanges(changes: { [key: string]: SimpleChange }): void { + let change = changes['disableRipple']; + + if (change) { + this.disableRipples(toBoolean(change.currentValue)); + } + } + + disableRipples(value: boolean): void { + if (this.listItems) { + this.listItems.forEach(_ => _.disableRipple = value); + } + } +} diff --git a/src/lib/menu/menu.ts b/src/lib/menu/menu.ts index 3b50b6edd..a12d3e5a5 100644 --- a/src/lib/menu/menu.ts +++ b/src/lib/menu/menu.ts @@ -34,6 +34,8 @@ export enum MenuOpenFrom { }) export class MdcMenuAnchor { @HostBinding('class.mdc-menu-anchor') isHostClass = true; + + constructor(public elementRef: ElementRef) { } } @Component({ @@ -155,16 +157,16 @@ export class MdcMenu implements AfterViewInit, OnChanges, OnDestroy { return this.options ? this.options.length : 0; }, registerInteractionHandler: (type: string, handler: EventListener) => { - this._registry.listen_(this._renderer, type, handler, this.elementRef); + this._registry.listen(this._renderer, type, handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (type: string, handler: EventListener) => { - this._registry.unlisten_(type, handler); + this._registry.unlisten(type, handler); }, registerBodyClickHandler: (handler: EventListener) => { - this._registry.listen_(this._renderer, 'click', handler, 'body'); + this._registry.listen(this._renderer, 'click', handler, document.body); }, deregisterBodyClickHandler: (handler: EventListener) => { - this._registry.unlisten_('click', handler); + this._registry.unlisten('click', handler); }, getYParamsForItemAtIndex: (index: number) => { const { offsetTop: top, offsetHeight: height } = this.options.toArray()[index].elementRef.nativeElement; @@ -241,23 +243,23 @@ export class MdcMenu implements AfterViewInit, OnChanges, OnDestroy { public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - ngOnChanges(changes: { [key: string]: SimpleChange }) { - let _openFrom = changes['openFrom']; + ngOnChanges(changes: { [key: string]: SimpleChange }): void { + let change = changes['openFrom']; - if (_openFrom) { - if (_openFrom.previousValue) { - this._mdcAdapter.removeClass(`${MenuOpenFrom[_openFrom.previousValue]}`); + if (change) { + if (change.previousValue) { + this._mdcAdapter.removeClass(`${MenuOpenFrom[change.previousValue]}`); } - if (_openFrom.currentValue) { - this._mdcAdapter.addClass(`${MenuOpenFrom[_openFrom.currentValue]}`); + if (change.currentValue) { + this._mdcAdapter.addClass(`${MenuOpenFrom[change.currentValue]}`); } } } diff --git a/src/lib/public_api.ts b/src/lib/public_api.ts index dd6e44d5c..8a4203659 100644 --- a/src/lib/public_api.ts +++ b/src/lib/public_api.ts @@ -1,4 +1,5 @@ export * from './module'; + export * from './core/index'; export * from './button/index'; export * from './card/index'; diff --git a/src/lib/radio/radio-adapter.d.ts b/src/lib/radio/adapter.d.ts similarity index 100% rename from src/lib/radio/radio-adapter.d.ts rename to src/lib/radio/adapter.d.ts diff --git a/src/lib/radio/index.ts b/src/lib/radio/index.ts index 5c73c13fa..b9c2a4bad 100644 --- a/src/lib/radio/index.ts +++ b/src/lib/radio/index.ts @@ -1,11 +1,15 @@ import { NgModule } from '@angular/core'; -import { MdcRadioComponent } from './radio.component'; +import { MdcRadio } from './radio'; +import { MdcRippleModule } from '../core/ripple/index'; @NgModule({ - exports: [MdcRadioComponent], - declarations: [MdcRadioComponent] + imports: [ + MdcRippleModule, + ], + exports: [MdcRadio], + declarations: [MdcRadio] }) export class MdcRadioModule { } -export * from './radio.component'; +export * from './radio'; diff --git a/src/lib/radio/radio.component.ts b/src/lib/radio/radio.ts similarity index 74% rename from src/lib/radio/radio.component.ts rename to src/lib/radio/radio.ts index 7fe47e28a..c15a4bc32 100644 --- a/src/lib/radio/radio.component.ts +++ b/src/lib/radio/radio.ts @@ -17,14 +17,14 @@ import { NG_VALUE_ACCESSOR, RadioControlValueAccessor } from '@angular/forms'; import { toBoolean } from '../common'; import { MdcRipple } from '../core/ripple/ripple.service'; -import { MDCRadioAdapter } from './radio-adapter'; +import { MDCRadioAdapter } from './adapter'; import { MDCRadioFoundation } from '@material/radio'; let nextUniqueId = 0; export const MD_RADIO_CONTROL_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdcRadioComponent), + useExisting: forwardRef(() => MdcRadio), multi: true }; @@ -59,30 +59,32 @@ export const MD_RADIO_CONTROL_VALUE_ACCESSOR: Provider = { MdcRipple, ] }) -export class MdcRadioComponent implements AfterViewInit, OnDestroy { +export class MdcRadio implements AfterViewInit, OnDestroy { private _uniqueId: string = `mdc-radio-${++nextUniqueId}`; + private _controlValueAccessorChangeFn: (value: any) => void = () => { }; + onTouched: () => any = () => { }; @Input() id: string = this._uniqueId; get inputId(): string { return `${this.id || this._uniqueId}-input`; } @Input() name: string | null = null; @Input() - get checked() { return this._foundation.isChecked(); } - set checked(value) { - this._foundation.setChecked(value); + get checked(): boolean { return this._foundation.isChecked(); } + set checked(value: boolean) { + this._foundation.setChecked(toBoolean(value)); } @Input() - get value() { return this._foundation.getValue(); } - set value(value) { + get value(): any { return this._foundation.getValue(); } + set value(value: any) { this._foundation.setValue(value); } @Input() - get disabled() { return this._foundation.isDisabled(); } - set disabled(value) { - this.setDisabledState(value); + get disabled(): boolean { return this._foundation.isDisabled(); } + set disabled(value: boolean) { + this.setDisabledState(toBoolean(value)); } @Input() - get disableRipple() { return this.ripple.disabled; } - set disableRipple(value) { + get disableRipple(): boolean { return this.ripple.disabled; } + set disableRipple(value: boolean) { this.ripple.disabled = toBoolean(value); } @Input() tabIndex: number = 0; @@ -92,16 +94,12 @@ export class MdcRadioComponent implements AfterViewInit, OnDestroy { @HostBinding('class.mdc-radio') isHostClass = true; @ViewChild('inputEl') inputEl: ElementRef; - onTouched: () => any = () => { }; - - private _controlValueAccessorChangeFn: (value: any) => void = () => { }; - private _mdcAdapter: MDCRadioAdapter = { addClass: (className: string) => { - this._renderer.addClass(this.root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this.root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, getNativeControl: () => { return this.inputEl.nativeElement; @@ -121,40 +119,40 @@ export class MdcRadioComponent implements AfterViewInit, OnDestroy { constructor( private _renderer: Renderer2, - public root: ElementRef, + public elementRef: ElementRef, public ripple: MdcRipple) { this.ripple.init(true); } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - onChange(evt: Event) { + onChange(evt: Event): void { evt.stopPropagation(); this._controlValueAccessorChangeFn((evt.target).value); this.change.emit(evt); } - writeValue(value: any) { + writeValue(value: any): void { if (this.value === value) { this.checked = true; } } - registerOnChange(fn: (value: any) => void) { + registerOnChange(fn: (value: any) => void): void { this._controlValueAccessorChangeFn = fn; } - registerOnTouched(fn: any) { + registerOnTouched(fn: any): void { this.onTouched = fn; } - setDisabledState(isDisabled: boolean) { + setDisabledState(isDisabled: boolean): void { this._foundation.setDisabled(isDisabled); } diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index ac220acb8..b8a9daae8 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -99,9 +99,7 @@ export class MdcSelectItem { @Input() value: any; @Input() - get disabled(): boolean { - return this._disabled; - } + get disabled(): boolean { return this._disabled; } set disabled(value: boolean) { this._disabled = toBoolean(value); value ? this.tabIndex = -1 : this.tabIndex = 0; @@ -204,10 +202,10 @@ export class MdcSelect implements AfterViewInit, ControlValueAccessor, OnChanges return this.elementRef.nativeElement.getBoundingClientRect(); }, registerInteractionHandler: (type: string, handler: EventListener) => { - this._registry.listen_(this._renderer, type, handler, this.elementRef); + this._registry.listen(this._renderer, type, handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (type: string, handler: EventListener) => { - this._registry.unlisten_(type, handler); + this._registry.unlisten(type, handler); }, focus: () => this.elementRef.nativeElement.focus(), makeTabbable: () => this.elementRef.nativeElement.tabIndex = 0, @@ -259,10 +257,10 @@ export class MdcSelect implements AfterViewInit, ControlValueAccessor, OnChanges return this._getItemByIndex(index).elementRef.nativeElement.offsetTop; }, registerMenuInteractionHandler: (type: string, handler: EventListener) => { - this._registry.listen_(this._renderer, type, handler, this.selectMenu.elementRef); + this._registry.listen(this._renderer, type, handler, this.selectMenu.elementRef.nativeElement); }, deregisterMenuInteractionHandler: (type: string, handler: EventListener) => { - this._registry.unlisten_(type, handler); + this._registry.unlisten(type, handler); }, notifyChange: () => { this.change.emit({ @@ -291,7 +289,7 @@ export class MdcSelect implements AfterViewInit, ControlValueAccessor, OnChanges public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._itemsSubscription = this.options.changes.subscribe(_ => { this._foundation.resize(); }); @@ -299,7 +297,7 @@ export class MdcSelect implements AfterViewInit, ControlValueAccessor, OnChanges this._foundation.init(); } - ngOnDestroy() { + ngOnDestroy(): void { if (this._itemsSubscription) { this._itemsSubscription.unsubscribe(); } @@ -311,7 +309,7 @@ export class MdcSelect implements AfterViewInit, ControlValueAccessor, OnChanges this._foundation.destroy(); } - ngOnChanges(changes: { [key: string]: SimpleChange }) { + ngOnChanges(changes: { [key: string]: SimpleChange }): void { let _closeOnScroll = changes['closeOnScroll']; if (_closeOnScroll && isBrowser()) { diff --git a/src/lib/slider/index.ts b/src/lib/slider/index.ts index b091df773..799eabb08 100644 --- a/src/lib/slider/index.ts +++ b/src/lib/slider/index.ts @@ -11,7 +11,7 @@ import { MdcSliderTrackContainer, MdcSliderTrackMarker, MdcSliderTrackMarkerContainer, -} from './slider.component'; +} from './slider'; const SLIDER_COMPONENTS = [ MdcSlider, @@ -31,4 +31,4 @@ const SLIDER_COMPONENTS = [ }) export class MdcSliderModule { } -export * from './slider.component'; +export * from './slider'; diff --git a/src/lib/slider/slider.component.ts b/src/lib/slider/slider.ts similarity index 87% rename from src/lib/slider/slider.component.ts rename to src/lib/slider/slider.ts index 8c6a2d918..20d029c8a 100644 --- a/src/lib/slider/slider.component.ts +++ b/src/lib/slider/slider.ts @@ -178,59 +178,59 @@ export class MdcSlider implements AfterViewInit, OnDestroy, ControlValueAccessor private _mdcAdapter: MDCSliderAdapter = { hasClass: (className: string) => { - return this._root.nativeElement.classList.contains(className); + return this.elementRef.nativeElement.classList.contains(className); }, addClass: (className: string) => { - this._renderer.addClass(this._root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this._root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, getAttribute: (name: string) => { - return this._root.nativeElement.getAttribute(name); + return this.elementRef.nativeElement.getAttribute(name); }, setAttribute: (name: string, value: string) => { - this._renderer.setAttribute(this._root.nativeElement, name, value); + this._renderer.setAttribute(this.elementRef.nativeElement, name, value); }, removeAttribute: (name: string) => { - this._renderer.removeAttribute(this._root.nativeElement, name); + this._renderer.removeAttribute(this.elementRef.nativeElement, name); }, computeBoundingRect: () => { - return this._root.nativeElement.getBoundingClientRect(); + return this.elementRef.nativeElement.getBoundingClientRect(); }, - getTabIndex: () => this._root.nativeElement.tabIndex, + getTabIndex: () => this.elementRef.nativeElement.tabIndex, registerInteractionHandler: (type: string, handler: EventListener) => { - this._registry.listen_(this._renderer, type, handler, this._root); + this._registry.listen(this._renderer, type, handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (type: string, handler: EventListener) => { - this._registry.unlisten_(type, handler); + this._registry.unlisten(type, handler); }, registerThumbContainerInteractionHandler: (type: string, handler: EventListener) => { if (this.thumbContainer) { - this._registry.listen_(this._renderer, type, handler, this.thumbContainer.elementRef); + this._registry.listen(this._renderer, type, handler, this.thumbContainer.elementRef.nativeElement); } }, deregisterThumbContainerInteractionHandler: (type: string, handler: EventListener) => { - this._registry.unlisten_(type, handler); + this._registry.unlisten(type, handler); }, registerBodyInteractionHandler: (type: string, handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, type, handler, 'body'); + this._registry.listen(this._renderer, type, handler, document.body); } }, deregisterBodyInteractionHandler: (type: string, handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_(type, handler); + this._registry.unlisten(type, handler); } }, registerResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, 'resize', handler, 'window'); + this._registry.listen(this._renderer, 'resize', handler, window); } }, deregisterResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_('resize', handler); + this._registry.unlisten('resize', handler); } }, notifyInput: () => { @@ -295,29 +295,29 @@ export class MdcSlider implements AfterViewInit, OnDestroy, ControlValueAccessor constructor( private _renderer: Renderer2, - private _root: ElementRef, + public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { // these must be run AfterViewInit - do not change this._foundation.init(); this._foundation.setupTrackMarker(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - writeValue(value: any) { + writeValue(value: any): void { this.value = value; } - registerOnChange(fn: (value: any) => void) { + registerOnChange(fn: (value: any) => void): void { this._controlValueAccessorChangeFn = fn; } - registerOnTouched(fn: any) { + registerOnTouched(fn: any): void { this.onTouched = fn; } diff --git a/src/lib/snackbar/snackbar-adapter.d.ts b/src/lib/snackbar/adapter.d.ts similarity index 100% rename from src/lib/snackbar/snackbar-adapter.d.ts rename to src/lib/snackbar/adapter.d.ts diff --git a/src/lib/snackbar/snackbar-container.component.ts b/src/lib/snackbar/snackbar-container.component.ts index 39f0e3eac..22504f30f 100644 --- a/src/lib/snackbar/snackbar-container.component.ts +++ b/src/lib/snackbar/snackbar-container.component.ts @@ -22,7 +22,7 @@ export class MdcSnackbarContainer extends BasePortalHost { constructor( private _ngZone: NgZone, private _renderer: Renderer2, - private _elementRef: ElementRef) { + public elementRef: ElementRef) { super(); } diff --git a/src/lib/snackbar/snackbar.component.ts b/src/lib/snackbar/snackbar.component.ts index 131294c42..6d0f55aef 100644 --- a/src/lib/snackbar/snackbar.component.ts +++ b/src/lib/snackbar/snackbar.component.ts @@ -16,7 +16,7 @@ import { EventRegistry } from '../common/event-registry'; import { MDC_SNACK_BAR_DATA, MdcSnackbarConfig } from './snackbar-config'; import { MdcSnackbarRef } from './snackbar-ref'; -import { MDCSnackbarAdapter } from './snackbar-adapter'; +import { MDCSnackbarAdapter } from './adapter'; import { MDCSnackbarFoundation } from '@material/snackbar'; import { getCorrectEventName } from '@material/animation'; @@ -67,16 +67,16 @@ export class MdcSnackbarComponent implements OnInit, OnDestroy { private _mdcAdapter: MDCSnackbarAdapter = { addClass: (className: string) => { - this._renderer.addClass(this._root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this._root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, setAriaHidden: () => { - this._renderer.setAttribute(this._root.nativeElement, 'aria-hidden', 'true'); + this._renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true'); }, unsetAriaHidden: () => { - this._renderer.removeAttribute(this._root.nativeElement, 'aria-hidden'); + this._renderer.removeAttribute(this.elementRef.nativeElement, 'aria-hidden'); }, setActionAriaHidden: () => { if (this.actionButton) { @@ -107,51 +107,51 @@ export class MdcSnackbarComponent implements OnInit, OnDestroy { return isBrowser() ? document.hidden : false; }, registerCapturedBlurHandler: (handler: EventListener) => { - if (this._root && this.actionButton) { - this._registry.listen_(this._renderer, 'blur', handler, this.actionButton); + if (this.elementRef && this.actionButton) { + this._registry.listen(this._renderer, 'blur', handler, this.actionButton.nativeElement); } }, deregisterCapturedBlurHandler: (handler: EventListener) => { - if (this._root) { - this._registry.unlisten_('blur', handler); + if (this.elementRef) { + this._registry.unlisten('blur', handler); } }, registerVisibilityChangeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, 'visibilitychange', handler, 'document'); + this._registry.listen(this._renderer, 'visibilitychange', handler, document); } }, deregisterVisibilityChangeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_('visibilitychange', handler); + this._registry.unlisten('visibilitychange', handler); } }, registerCapturedInteractionHandler: (evtType: string, handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, evtType, handler, 'body'); + this._registry.listen(this._renderer, evtType, handler, document.body); } }, deregisterCapturedInteractionHandler: (evtType: string, handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_(evtType, handler); + this._registry.unlisten(evtType, handler); } }, registerActionClickHandler: (handler: EventListener) => { - if (this._root && this.actionButton) { - this._registry.listen_(this._renderer, 'click', handler, this.actionButton); + if (this.elementRef && this.actionButton) { + this._registry.listen(this._renderer, 'click', handler, this.actionButton.nativeElement); } }, deregisterActionClickHandler: (handler: EventListener) => { - this._registry.unlisten_('click', handler); + this._registry.unlisten('click', handler); }, registerTransitionEndHandler: (handler: EventListener) => { - if (this._root && isBrowser()) { - this._registry.listen_(this._renderer, getCorrectEventName(window, 'transitionend'), handler, this._root); + if (this.elementRef && isBrowser()) { + this._registry.listen(this._renderer, getCorrectEventName(window, 'transitionend'), handler, this.elementRef.nativeElement); } }, deregisterTransitionEndHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_(getCorrectEventName(window, 'transitionend'), handler); + this._registry.unlisten(getCorrectEventName(window, 'transitionend'), handler); this.snackbarRef.dismiss(); // remove container from dom host } } @@ -171,18 +171,18 @@ export class MdcSnackbarComponent implements OnInit, OnDestroy { @Inject(MDC_SNACK_BAR_DATA) data: any, @Inject(MdcSnackbarConfig) config: MdcSnackbarConfig, private _renderer: Renderer2, - private _root: ElementRef, + public elementRef: ElementRef, private _registry: EventRegistry) { this.data = data; this.config = config; } - ngOnInit() { + ngOnInit(): void { this._foundation.init(); this.show(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } diff --git a/src/lib/switch/index.ts b/src/lib/switch/index.ts index 726d122c2..44af19a14 100644 --- a/src/lib/switch/index.ts +++ b/src/lib/switch/index.ts @@ -1,11 +1,15 @@ import { NgModule } from '@angular/core'; -import { MdcSwitchComponent } from './switch.component'; +import { MdcSwitch } from './switch'; +import { MdcRippleModule } from '../core/ripple/index'; @NgModule({ - exports: [MdcSwitchComponent], - declarations: [MdcSwitchComponent], + imports: [ + MdcRippleModule, + ], + exports: [MdcSwitch], + declarations: [MdcSwitch], }) export class MdcSwitchModule { } -export * from './switch.component'; +export * from './switch'; diff --git a/src/lib/switch/switch.component.ts b/src/lib/switch/switch.ts similarity index 85% rename from src/lib/switch/switch.component.ts rename to src/lib/switch/switch.ts index 267b033d7..0542df1dc 100644 --- a/src/lib/switch/switch.component.ts +++ b/src/lib/switch/switch.ts @@ -19,7 +19,7 @@ import { MdcRipple } from '../core/ripple/ripple.service'; export const MD_SWITCH_CONTROL_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdcSwitchComponent), + useExisting: forwardRef(() => MdcSwitch), multi: true }; @@ -53,8 +53,10 @@ let nextUniqueId = 0; MdcRipple, ] }) -export class MdcSwitchComponent implements OnChanges { +export class MdcSwitch implements OnChanges { private _uniqueId: string = `mdc-switch-${++nextUniqueId}`; + private _controlValueAccessorChangeFn: (value: any) => void = (value) => { }; + onTouched: () => any = () => { }; @Input() id: string = this._uniqueId; get inputId(): string { return `${this.id || this._uniqueId}-input`; } @@ -65,8 +67,8 @@ export class MdcSwitchComponent implements OnChanges { @Input('aria-label') ariaLabel: string = ''; @Input('aria-labelledby') ariaLabelledby: string | null = null; @Input() - get disableRipple() { return this.ripple.disabled; } - set disableRipple(value) { + get disableRipple(): boolean { return this.ripple.disabled; } + set disableRipple(value: boolean) { this.ripple.disabled = toBoolean(value); } @Output() change: EventEmitter = new EventEmitter(); @@ -76,18 +78,14 @@ export class MdcSwitchComponent implements OnChanges { } @ViewChild('inputEl') inputEl: ElementRef; - onTouched: () => any = () => { }; - - private _controlValueAccessorChangeFn: (value: any) => void = (value) => { }; - constructor( private _renderer: Renderer2, - public root: ElementRef, + public elementRef: ElementRef, public ripple: MdcRipple) { this.ripple.init(true); } - ngOnChanges(changes: { [key: string]: SimpleChange }) { + ngOnChanges(changes: { [key: string]: SimpleChange }): void { let change = changes['disabled']; if (change) { @@ -95,22 +93,22 @@ export class MdcSwitchComponent implements OnChanges { } } - onChange(evt: Event) { + onChange(evt: Event): void { evt.stopPropagation(); this.checked = this.inputEl.nativeElement.checked; this._controlValueAccessorChangeFn((evt.target).checked); this.change.emit(evt); } - writeValue(value: string) { + writeValue(value: string): void { this.checked = !!value; } - registerOnChange(fn: (value: any) => void) { + registerOnChange(fn: (value: any) => void): void { this._controlValueAccessorChangeFn = fn; } - registerOnTouched(fn: any) { + registerOnTouched(fn: any): void { this.onTouched = fn; } diff --git a/src/lib/tabs/index.ts b/src/lib/tabs/index.ts index 43035f38d..1a960304a 100644 --- a/src/lib/tabs/index.ts +++ b/src/lib/tabs/index.ts @@ -3,31 +3,29 @@ import { NgModule } from '@angular/core'; import { MdcIconModule } from '../icon/index'; import { - MdcTabComponent, - MdcTabIconTextDirective, -} from './tab/tab.component'; + MdcTab, + MdcTabIconText, +} from './tab/tab'; -import { - MdcTabBarDirective, -} from './tab-bar/tab-bar.directive'; +import { MdcTabBar } from './tab-bar/tab-bar'; import { MdcTabBarScroller, - MdcTabBarScrollBackDirective, - MdcTabBarScrollForwardDirective, - MdcTabBarScrollFrameDirective, - MdcTabBarScrollIndicatorInnerDirective, -} from './tab-bar-scroller/tab-bar-scroller.component'; + MdcTabBarScrollBack, + MdcTabBarScrollForward, + MdcTabBarScrollFrame, + MdcTabBarScrollIndicatorInner, +} from './tab-bar-scroller/tab-bar-scroller'; const TAB_COMPONENTS = [ - MdcTabComponent, - MdcTabIconTextDirective, - MdcTabBarDirective, + MdcTab, + MdcTabIconText, + MdcTabBar, MdcTabBarScroller, - MdcTabBarScrollBackDirective, - MdcTabBarScrollForwardDirective, - MdcTabBarScrollFrameDirective, - MdcTabBarScrollIndicatorInnerDirective, + MdcTabBarScrollBack, + MdcTabBarScrollForward, + MdcTabBarScrollFrame, + MdcTabBarScrollIndicatorInner, ]; @NgModule({ @@ -42,6 +40,6 @@ const TAB_COMPONENTS = [ }) export class MdcTabModule { } -export * from './tab/tab.component'; -export * from './tab-bar/tab-bar.directive'; -export * from './tab-bar-scroller/tab-bar-scroller.component'; +export * from './tab/tab'; +export * from './tab-bar/tab-bar'; +export * from './tab-bar-scroller/tab-bar-scroller'; diff --git a/src/lib/tabs/tab-bar-scroller/tab-bar-scroller-adapter.d.ts b/src/lib/tabs/tab-bar-scroller/adapter.d.ts similarity index 100% rename from src/lib/tabs/tab-bar-scroller/tab-bar-scroller-adapter.d.ts rename to src/lib/tabs/tab-bar-scroller/adapter.d.ts diff --git a/src/lib/tabs/tab-bar-scroller/tab-bar-scroller.component.ts b/src/lib/tabs/tab-bar-scroller/tab-bar-scroller.ts similarity index 76% rename from src/lib/tabs/tab-bar-scroller/tab-bar-scroller.component.ts rename to src/lib/tabs/tab-bar-scroller/tab-bar-scroller.ts index 47e3c2ba3..64539ab5c 100644 --- a/src/lib/tabs/tab-bar-scroller/tab-bar-scroller.component.ts +++ b/src/lib/tabs/tab-bar-scroller/tab-bar-scroller.ts @@ -1,9 +1,9 @@ import { AfterContentInit, AfterViewInit, - Component, ContentChild, ContentChildren, + Component, Directive, ElementRef, HostBinding, @@ -17,16 +17,16 @@ import { toBoolean, isBrowser } from '../../common'; import { EventRegistry } from '../../common/event-registry'; import { getCorrectPropertyName } from '@material/animation'; -import { MdcTabComponent } from '../tab/tab.component'; -import { MdcTabBarDirective } from '../tab-bar/tab-bar.directive'; +import { MdcTab } from '../tab/tab'; +import { MdcTabBar } from '../tab-bar/tab-bar'; -import { MDCTabBarScrollerAdapter } from './tab-bar-scroller-adapter'; +import { MDCTabBarScrollerAdapter } from './adapter'; import { MDCTabBarScrollerFoundation } from '@material/tabs'; @Directive({ selector: '[mdc-tab-bar-scroll-button], mdc-tab-bar-scroll-button' }) -export class MdcTabBarScrollIndicatorInnerDirective { +export class MdcTabBarScrollIndicatorInner { @HostBinding('class.mdc-tab-bar-scroller__indicator__inner') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -35,7 +35,7 @@ export class MdcTabBarScrollIndicatorInnerDirective { @Directive({ selector: '[mdc-tab-bar-scroll-back], mdc-tab-bar-scroll-back' }) -export class MdcTabBarScrollBackDirective { +export class MdcTabBarScrollBack { @HostBinding('class.mdc-tab-bar-scroller__indicator') isHostClass = true; @HostBinding('class.mdc-tab-bar-scroller__indicator--back') isBackClass = true; @@ -45,7 +45,7 @@ export class MdcTabBarScrollBackDirective { @Directive({ selector: '[mdc-tab-bar-scroll-forward], mdc-tab-bar-scroll-forward' }) -export class MdcTabBarScrollForwardDirective { +export class MdcTabBarScrollForward { @HostBinding('class.mdc-tab-bar-scroller__indicator') isHostClass = true; @HostBinding('class.mdc-tab-bar-scroller__indicator--forward') isFowardClass = true; @@ -55,19 +55,19 @@ export class MdcTabBarScrollForwardDirective { @Directive({ selector: '[mdc-tab-bar-scroll-frame], mdc-tab-bar-scroll-frame' }) -export class MdcTabBarScrollFrameDirective implements AfterContentInit { +export class MdcTabBarScrollFrame implements AfterContentInit { @HostBinding('class.mdc-tab-bar-scroller__scroll-frame') isHostClass = true; - @ContentChild(MdcTabBarDirective) tabBar: MdcTabBarDirective; + @ContentChild(MdcTabBar) tabBar: MdcTabBar; constructor(public elementRef: ElementRef) { } - ngAfterContentInit() { + ngAfterContentInit(): void { if (this.tabBar) { this.tabBar.scrollFrameContent = true; } } - findTab(index: number): MdcTabComponent | null { + findTab(index: number): MdcTab | null { if (this.tabBar) { let tabs = this.tabBar.tabs.toArray(); if (index >= 0 && index < tabs.length) { @@ -82,20 +82,21 @@ export class MdcTabBarScrollFrameDirective implements AfterContentInit { selector: '[mdc-tab-bar-scroller], mdc-tab-bar-scroller', template: '', providers: [EventRegistry], + encapsulation: ViewEncapsulation.None, }) export class MdcTabBarScroller implements AfterViewInit, OnDestroy { @Input() direction: 'ltr' | 'rtl' = 'ltr'; @HostBinding('class.mdc-tab-bar-scroller') isHostClass = true; - @ContentChild(MdcTabBarScrollFrameDirective) scrollFrame: MdcTabBarScrollFrameDirective; - @ContentChild(MdcTabBarScrollBackDirective) scrollBack: MdcTabBarScrollBackDirective; - @ContentChild(MdcTabBarScrollForwardDirective) scrollForward: MdcTabBarScrollForwardDirective; + @ContentChild(MdcTabBarScrollFrame) scrollFrame: MdcTabBarScrollFrame; + @ContentChild(MdcTabBarScrollBack) scrollBack: MdcTabBarScrollBack; + @ContentChild(MdcTabBarScrollForward) scrollForward: MdcTabBarScrollForward; private _mdcAdapter: MDCTabBarScrollerAdapter = { addClass: (className: string) => { - this._renderer.addClass(this._root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this._root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, eventTargetHasClass: (target: HTMLElement, className: string) => target.classList.contains(className), addClassToForwardIndicator: (className: string) => { @@ -121,38 +122,38 @@ export class MdcTabBarScroller implements AfterViewInit, OnDestroy { isRTL: () => this.direction === 'rtl', registerBackIndicatorClickHandler: (handler: EventListener) => { if (this.scrollBack) { - this._registry.listen_(this._renderer, 'click', handler, this.scrollBack.elementRef); + this._registry.listen(this._renderer, 'click', handler, this.scrollBack.elementRef.nativeElement); } }, deregisterBackIndicatorClickHandler: (handler: EventListener) => { if (this.scrollBack) { - this._registry.unlisten_('click', handler); + this._registry.unlisten('click', handler); } }, registerForwardIndicatorClickHandler: (handler: EventListener) => { if (this.scrollForward) { - this._registry.listen_(this._renderer, 'click', handler, this.scrollForward.elementRef); + this._registry.listen(this._renderer, 'click', handler, this.scrollForward.elementRef.nativeElement); } }, deregisterForwardIndicatorClickHandler: (handler: EventListener) => { if (this.scrollForward) { - this._registry.unlisten_('click', handler); + this._registry.unlisten('click', handler); } }, registerCapturedInteractionHandler: (evt: string, handler: EventListener) => { - this._registry.listen_(this._renderer, evt, handler, this._root); + this._registry.listen(this._renderer, evt, handler, this.elementRef.nativeElement); }, deregisterCapturedInteractionHandler: (evt: string, handler: EventListener) => { - this._registry.unlisten_(evt, handler); + this._registry.unlisten(evt, handler); }, registerWindowResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, 'resize', handler, 'window'); + this._registry.listen(this._renderer, 'resize', handler, window); } }, deregisterWindowResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_('resize', handler); + this._registry.unlisten('resize', handler); } }, getNumberOfTabs: () => { @@ -172,11 +173,11 @@ export class MdcTabBarScroller implements AfterViewInit, OnDestroy { } }, getOffsetWidthForTabBar: () => { - return (this.scrollFrame && this.scrollFrame.tabBar) ? this.scrollFrame.tabBar.root.nativeElement.offsetWidth : 0; + return (this.scrollFrame && this.scrollFrame.tabBar) ? this.scrollFrame.tabBar.elementRef.nativeElement.offsetWidth : 0; }, setTransformStyleForTabBar: (value: string) => { if (this.scrollFrame && this.scrollFrame.tabBar) { - this._renderer.setStyle(this.scrollFrame.tabBar.root.nativeElement, getCorrectPropertyName(window, 'transform'), value); + this._renderer.setStyle(this.scrollFrame.tabBar.elementRef.nativeElement, getCorrectPropertyName(window, 'transform'), value); } }, getOffsetLeftForEventTarget: (target: HTMLElement) => target.offsetLeft, @@ -194,14 +195,14 @@ export class MdcTabBarScroller implements AfterViewInit, OnDestroy { constructor( private _renderer: Renderer2, - private _root: ElementRef, + public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } @@ -209,7 +210,7 @@ export class MdcTabBarScroller implements AfterViewInit, OnDestroy { this._foundation.scrollToTabAtIndex(index); } - findTab(index: number): MdcTabComponent | null { + findTab(index: number): MdcTab | null { return this.scrollFrame ? this.scrollFrame.findTab(index) : null; } } diff --git a/src/lib/tabs/tab-bar/tab-bar-adapter.d.ts b/src/lib/tabs/tab-bar/adapter.d.ts similarity index 100% rename from src/lib/tabs/tab-bar/tab-bar-adapter.d.ts rename to src/lib/tabs/tab-bar/adapter.d.ts diff --git a/src/lib/tabs/tab-bar/tab-bar.directive.ts b/src/lib/tabs/tab-bar/tab-bar.ts similarity index 66% rename from src/lib/tabs/tab-bar/tab-bar.directive.ts rename to src/lib/tabs/tab-bar/tab-bar.ts index c86506150..b8c353c4d 100644 --- a/src/lib/tabs/tab-bar/tab-bar.directive.ts +++ b/src/lib/tabs/tab-bar/tab-bar.ts @@ -13,23 +13,23 @@ import { isBrowser } from '../../common'; import { EventRegistry } from '../../common/event-registry'; import { Subscription } from 'rxjs'; -import { MdcTabComponent } from '../tab/tab.component'; +import { MdcTab } from '../tab/tab'; -import { MDCTabBarAdapter } from './tab-bar-adapter'; +import { MDCTabBarAdapter } from './adapter'; import { MDCTabBarFoundation } from '@material/tabs'; @Directive({ selector: '[mdc-tab-bar], mdc-tab-bar', providers: [EventRegistry], }) -export class MdcTabBarDirective { - private tabBarIndicator: HTMLElement; - private tabEvents: Subscription[]; +export class MdcTabBar { + private _tabBarIndicator: HTMLElement; + private _tabEvents: Subscription[]; - @Input() primary: boolean; - @Input() secondary: boolean; + @Input() primary: boolean = false; + @Input() secondary: boolean = false; @Output() change: EventEmitter<{ activeTabIndex: number }> = new EventEmitter(); - @ContentChildren(MdcTabComponent, { descendants: false }) tabs: QueryList; + @ContentChildren(MdcTab, { descendants: false }) tabs: QueryList; @HostBinding('class.mdc-tab-bar') isHostClass = true; @HostBinding('class.mdc-tab-bar-scroller__scroll-frame__tabs') scrollFrameContent = false; @HostBinding('attr.role') role: string = 'tablist'; @@ -52,26 +52,26 @@ export class MdcTabBarDirective { private _mdcAdapter: MDCTabBarAdapter = { addClass: (className: string) => { - this._renderer.addClass(this.root.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this._renderer.removeClass(this.root.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, - bindOnMDCTabSelectedEvent: () => this.listenTabSelect(), - unbindOnMDCTabSelectedEvent: () => this.unlistenTabSelect(), + bindOnMDCTabSelectedEvent: () => this._listenTabSelect(), + unbindOnMDCTabSelectedEvent: () => this._unlistenTabSelect(), registerResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, 'resize', handler, 'window'); + this._registry.listen(this._renderer, 'resize', handler, window); } }, deregisterResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_('resize', handler); + this._registry.unlisten('resize', handler); } }, - getOffsetWidth: () => this.root.nativeElement.offsetWidth, - setStyleForIndicator: (propertyName: string, value: string) => this._renderer.setStyle(this.tabBarIndicator, propertyName, value), - getOffsetWidthForIndicator: () => this.tabBarIndicator.offsetWidth, + getOffsetWidth: () => this.elementRef.nativeElement.offsetWidth, + setStyleForIndicator: (propertyName: string, value: string) => this._renderer.setStyle(this._tabBarIndicator, propertyName, value), + getOffsetWidthForIndicator: () => this._tabBarIndicator.offsetWidth, notifyChange: (evtData: { activeTabIndex: number }) => this.change.emit(evtData), getNumberOfTabs: () => this.tabs.length, isTabActiveAtIndex: (index: number) => index >= 0 ? this.tabs.toArray()[index].active : false, @@ -94,43 +94,43 @@ export class MdcTabBarDirective { constructor( private _renderer: Renderer2, - public root: ElementRef, + public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this.tabs.changes.subscribe(() => { - if (this.tabEvents) { - this.listenTabSelect(); + if (this._tabEvents) { + this._listenTabSelect(); } }); - this.createTabBarIndicator(); + this._createTabBarIndicator(); this._foundation.init(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - private createTabBarIndicator() { - this.tabBarIndicator = this._renderer.createElement('span'); - this._renderer.addClass(this.tabBarIndicator, 'mdc-tab-bar__indicator'); - this._renderer.appendChild(this.root.nativeElement, this.tabBarIndicator); + private _createTabBarIndicator(): void { + this._tabBarIndicator = this._renderer.createElement('span'); + this._renderer.addClass(this._tabBarIndicator, 'mdc-tab-bar__indicator'); + this._renderer.appendChild(this.elementRef.nativeElement, this._tabBarIndicator); } - private listenTabSelect() { - if (this.tabEvents) { - this.unlistenTabSelect(); + private _listenTabSelect(): void { + if (this._tabEvents) { + this._unlistenTabSelect(); } - this.tabEvents = new Array(); + this._tabEvents = new Array(); this.tabs.forEach(tab => { - this.tabEvents.push(tab.select.subscribe((event: any) => { + this._tabEvents.push(tab.select.subscribe((event: any) => { this._foundation.switchToTabAtIndex(this.tabs.toArray().indexOf(event.tab), true); })); }); } - private unlistenTabSelect() { - this.tabEvents.forEach(_ => _.unsubscribe()); - this.tabEvents = null; + private _unlistenTabSelect(): void { + this._tabEvents.forEach(_ => _.unsubscribe()); + this._tabEvents = null; } } diff --git a/src/lib/tabs/tab/tab-adapter.d.ts b/src/lib/tabs/tab/adapter.d.ts similarity index 100% rename from src/lib/tabs/tab/tab-adapter.d.ts rename to src/lib/tabs/tab/adapter.d.ts diff --git a/src/lib/tabs/tab/tab.component.ts b/src/lib/tabs/tab/tab.ts similarity index 66% rename from src/lib/tabs/tab/tab.component.ts rename to src/lib/tabs/tab/tab.ts index 9eab8cb77..2888af38c 100644 --- a/src/lib/tabs/tab/tab.component.ts +++ b/src/lib/tabs/tab/tab.ts @@ -1,7 +1,7 @@ import { AfterViewInit, - Component, ContentChild, + Component, Directive, ElementRef, EventEmitter, @@ -17,13 +17,13 @@ import { EventRegistry } from '../../common/event-registry'; import { MdcIcon } from '../../icon/icon'; import { MdcRipple } from '../../core/ripple/ripple.service'; -import { MDCTabAdapter } from './tab-adapter'; +import { MDCTabAdapter } from './adapter'; import { MDCTabFoundation } from '@material/tabs'; @Directive({ selector: '[mdc-tab-icon-text], mdc-tab-icon-text' }) -export class MdcTabIconTextDirective { +export class MdcTabIconText { @HostBinding('class.mdc-tab__icon-text') isHostClass = true; constructor(public elementRef: ElementRef) { } @@ -36,25 +36,25 @@ export class MdcTabIconTextDirective { MdcRipple, EventRegistry ], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, }) -export class MdcTabComponent implements AfterViewInit, OnDestroy { +export class MdcTab implements AfterViewInit, OnDestroy { @Input() - get active() { return this.foundation.isActive(); } - set active(value) { + get active(): boolean { return this.foundation.isActive(); } + set active(value: boolean) { this.foundation.setActive(value); } @Input() - get preventsDefaultOnClick() { return this.foundation.preventsDefaultOnClick(); } + get preventsDefaultOnClick(): boolean { return this.foundation.preventsDefaultOnClick(); } set preventsDefaultOnClick(value: boolean) { this.foundation.setPreventDefaultOnClick(value); } @Input() - get disableRipple() { return this.ripple_.disabled; } - set disableRipple(value) { - this.ripple_.disabled = toBoolean(value); + get disableRipple(): boolean { return this.ripple.disabled; } + set disableRipple(value: boolean) { + this.ripple.disabled = toBoolean(value); } - @Output() select: EventEmitter<{ tab: MdcTabComponent }> = new EventEmitter(); + @Output() select: EventEmitter<{ tab: MdcTab }> = new EventEmitter(); @HostBinding('class.mdc-tab') isHostClass = true; @HostBinding('attr.role') role: string = 'tab'; @HostBinding('class.mdc-tab--with-icon-and-text') get classIconText() { @@ -64,20 +64,20 @@ export class MdcTabComponent implements AfterViewInit, OnDestroy { return this.foundation.isActive(); } @ContentChild(MdcIcon) tabIcon: MdcIcon; - @ContentChild(MdcTabIconTextDirective) tabIconText: MdcTabIconTextDirective; + @ContentChild(MdcTabIconText) tabIconText: MdcTabIconText; private _mdcAdapter: MDCTabAdapter = { addClass: (className: string) => { - this.renderer_.addClass(this.elementRef.nativeElement, className); + this._renderer.addClass(this.elementRef.nativeElement, className); }, removeClass: (className: string) => { - this.renderer_.removeClass(this.elementRef.nativeElement, className); + this._renderer.removeClass(this.elementRef.nativeElement, className); }, registerInteractionHandler: (type: string, handler: EventListener) => { - this.registry_.listen_(this.renderer_, type, handler, this.elementRef); + this._registry.listen(this._renderer, type, handler, this.elementRef.nativeElement); }, deregisterInteractionHandler: (type: string, handler: EventListener) => { - this.registry_.unlisten_(type, handler); + this._registry.unlisten(type, handler); }, getOffsetWidth: () => this.elementRef.nativeElement.offsetWidth, getOffsetLeft: () => this.elementRef.nativeElement.offsetLeft, @@ -97,21 +97,21 @@ export class MdcTabComponent implements AfterViewInit, OnDestroy { } = new MDCTabFoundation(this._mdcAdapter); constructor( - private renderer_: Renderer2, - private elementRef: ElementRef, - private registry_: EventRegistry, - private ripple_: MdcRipple) { - this.ripple_.init(); + private _renderer: Renderer2, + public elementRef: ElementRef, + private _registry: EventRegistry, + public ripple: MdcRipple) { + this.ripple.init(); } - ngAfterViewInit() { + ngAfterViewInit(): void { this.foundation.init(); if (this.tabIcon) { - this.renderer_.addClass(this.tabIcon.elementRef.nativeElement, 'mdc-tab__icon'); + this._renderer.addClass(this.tabIcon.elementRef.nativeElement, 'mdc-tab__icon'); } } - ngOnDestroy() { + ngOnDestroy(): void { this.foundation.destroy(); } } diff --git a/src/lib/textfield/textfield-input.ts b/src/lib/textfield/textfield-input.ts index fa523cd6e..66d04ec6f 100644 --- a/src/lib/textfield/textfield-input.ts +++ b/src/lib/textfield/textfield-input.ts @@ -8,13 +8,13 @@ import { selector: 'input[mdc-textfield-input], textarea[mdc-textfield-input]', }) export class MdcTextfieldInput { - focused = false; + focused: boolean = false; @HostBinding('class.mdc-textfield__input') isHostClass = true; constructor(public elementRef: ElementRef) { } - focus() { + focus(): void { this.focused = true; this.elementRef.nativeElement.focus(); } diff --git a/src/lib/textfield/textfield.ts b/src/lib/textfield/textfield.ts index 1ba4e45be..e68d15e2f 100644 --- a/src/lib/textfield/textfield.ts +++ b/src/lib/textfield/textfield.ts @@ -52,8 +52,8 @@ let nextUniqueId = 0; }) export class MdcTextfieldHelptext { @Input() id: string; - @Input() persistent: boolean; - @Input() validation: boolean; + @Input() persistent: boolean = false; + @Input() validation: boolean = false; @HostBinding('class.mdc-textfield-helptext') isHostClass = true; @HostBinding('attr.aria-hidden') ariaHidden: string = 'true'; @HostBinding('class.mdc-textfield-helptext--persistent') get classPersistent(): string { @@ -126,12 +126,13 @@ export class MdcTextfieldTrailingIcon { MD_TEXTFIELD_CONTROL_VALUE_ACCESSOR, EventRegistry, ], + encapsulation: ViewEncapsulation.None, }) export class MdcTextfield implements AfterContentInit, OnDestroy, ControlValueAccessor { private _type = 'text'; private _disabled: boolean = false; private _required: boolean = false; - private controlValueAccessorChangeFn_: (value: any) => void = (value) => { }; + private _controlValueAccessorChangeFn: (value: any) => void = (value) => { }; onChange = (_: any) => { }; onTouched = () => { }; @@ -143,23 +144,23 @@ export class MdcTextfield implements AfterContentInit, OnDestroy, ControlValueAc @Input() placeholder: string = ''; @Input() tabIndex: number = 0; @Input() - get disabled() { return this._disabled; } - set disabled(value: any) { + get disabled(): boolean { return this._disabled; } + set disabled(value: boolean) { this._disabled = value != null && `${value}` !== 'false'; this._foundation.setDisabled(value); } @Input() - get required() { return this._required; } - set required(value: any) { + get required(): boolean { return this._required; } + set required(value: boolean) { this._required = value != null && `${value}` !== 'false'; } @Input() get type(): string { return this._type; } set type(value: string) { this._type = value || 'text'; - this.validateType_(); + this._validateType(); - if (!this.isTextarea_()) { + if (!this.isTextarea()) { this._renderer.setProperty(this.inputText.elementRef.nativeElement, 'type', this._type); } } @@ -196,14 +197,14 @@ export class MdcTextfield implements AfterContentInit, OnDestroy, ControlValueAc this._renderer.removeClass(this.elementRoot.nativeElement, className); }, addClassToLabel: (className: string) => { - if (this.isTextarea_()) { return; } + if (this.isTextarea()) { return; } if (this.inputLabel && this.label) { this._renderer.addClass(this.inputLabel.elementRef.nativeElement, className); } }, removeClassFromLabel: (className: string) => { - if (this.isTextarea_()) { return; } + if (this.isTextarea()) { return; } if (this.inputLabel && this.label) { this._renderer.removeClass(this.inputLabel.elementRef.nativeElement, className); @@ -218,10 +219,10 @@ export class MdcTextfield implements AfterContentInit, OnDestroy, ControlValueAc return target.classList.contains(className); }, registerTextFieldInteractionHandler: (evtType: string, handler: EventListener) => { - this._registry.listen_(this._renderer, evtType, handler, this.elementRoot); + this._registry.listen(this._renderer, evtType, handler, this.elementRoot.nativeElement); }, deregisterTextFieldInteractionHandler: (evtType: string, handler: EventListener) => { - this._registry.unlisten_(evtType, handler); + this._registry.unlisten(evtType, handler); }, notifyIconAction: () => { this.iconAction.emit({ @@ -252,18 +253,18 @@ export class MdcTextfield implements AfterContentInit, OnDestroy, ControlValueAc return this.inputHelpText ? this.inputHelpText.elementRef.nativeElement.classList.contains(className) : false; }, registerInputInteractionHandler: (evtType: string, handler: EventListener) => { - this._registry.listen_(this._renderer, evtType, handler, this.inputText.elementRef); + this._registry.listen(this._renderer, evtType, handler, this.inputText.elementRef.nativeElement); }, deregisterInputInteractionHandler: (evtType: string, handler: EventListener) => { - this._registry.unlisten_(evtType, handler); + this._registry.unlisten(evtType, handler); }, registerTransitionEndHandler: (handler: EventListener) => { if (this.bottomLine) { - this._registry.listen_(this._renderer, 'transitionend', handler, this.bottomLine.elementRef); + this._registry.listen(this._renderer, 'transitionend', handler, this.bottomLine.elementRef.nativeElement); } }, deregisterTransitionEndHandler: (handler: EventListener) => { - this._registry.unlisten_('transitionend', handler); + this._registry.unlisten('transitionend', handler); }, setBottomLineAttr: (attr: string, value: string) => { if (this.bottomLine) { @@ -303,16 +304,16 @@ export class MdcTextfield implements AfterContentInit, OnDestroy, ControlValueAc public elementRoot: ElementRef, private _registry: EventRegistry) { } - ngAfterContentInit() { + ngAfterContentInit(): void { this._foundation.init(); this.updateIconState(); } - ngOnDestroy() { + ngOnDestroy(): void { this._foundation.destroy(); } - writeValue(value: string) { + writeValue(value: string): void { this.value = value == null ? '' : value; if (this.value.length > 0) { this._mdcAdapter.addClassToLabel('mdc-textfield__label--float-above'); @@ -330,15 +331,15 @@ export class MdcTextfield implements AfterContentInit, OnDestroy, ControlValueAc this.onTouched = fn; } - onFocus() { + onFocus(): void { this.inputText.focused = true; } - onInput(evt: Event) { + onInput(evt: Event): void { this.onChange((evt.target).value); } - onBlur() { + onBlur(): void { this.inputText.focused = false; this.onTouched(); } @@ -375,13 +376,13 @@ export class MdcTextfield implements AfterContentInit, OnDestroy, ControlValueAc } } - private isTextarea_() { + isTextarea(): boolean { let nativeElement = this.elementRoot.nativeElement; let nodeName = isBrowser ? nativeElement.nodeName : nativeElement.name; return nodeName ? nodeName.toLowerCase() === 'textarea' : false; } - private validateType_() { + private _validateType() { if (MD_INPUT_INVALID_TYPES.indexOf(this._type) > -1) { throw Error(`Input type "${this._type}" is not supported.`); } diff --git a/src/lib/toolbar/toolbar-adapter.d.ts b/src/lib/toolbar/adapter.d.ts similarity index 100% rename from src/lib/toolbar/toolbar-adapter.d.ts rename to src/lib/toolbar/adapter.d.ts diff --git a/src/lib/toolbar/index.ts b/src/lib/toolbar/index.ts index 8183dc5e8..32cb0577a 100644 --- a/src/lib/toolbar/index.ts +++ b/src/lib/toolbar/index.ts @@ -1,21 +1,23 @@ import { NgModule } from '@angular/core'; -import { MdcToolbarComponent } from './toolbar.component'; -import { MdcToolbarRowDirective } from './toolbar-row.directive'; -import { MdcToolbarSectionDirective } from './toolbar-section.directive'; -import { MdcToolbarTitleDirective } from './toolbar-title.directive'; -import { MdcToolbarFixedAdjustDirective } from './toolbar-fixed-adjust.directive'; -import { MdcToolbarIcon } from './toolbar-icon.directive'; -import { MdcToolbarIconMenu } from './toolbar-icon-menu.directive'; +import { + MdcToolbar, + MdcToolbarFixedAdjust, + MdcToolbarIcon, + MdcToolbarMenuIcon, + MdcToolbarRow, + MdcToolbarSection, + MdcToolbarTitle, +} from './toolbar'; const TOOLBAR_COMPONENTS = [ - MdcToolbarComponent, - MdcToolbarRowDirective, - MdcToolbarSectionDirective, - MdcToolbarTitleDirective, - MdcToolbarFixedAdjustDirective, + MdcToolbar, + MdcToolbarFixedAdjust, MdcToolbarIcon, - MdcToolbarIconMenu + MdcToolbarMenuIcon, + MdcToolbarRow, + MdcToolbarSection, + MdcToolbarTitle, ]; @NgModule({ @@ -24,10 +26,4 @@ const TOOLBAR_COMPONENTS = [ }) export class MdcToolbarModule { } -export * from './toolbar.component'; -export * from './toolbar-row.directive'; -export * from './toolbar-section.directive'; -export * from './toolbar-title.directive'; -export * from './toolbar-fixed-adjust.directive'; -export * from './toolbar-icon.directive'; -export * from './toolbar-icon-menu.directive'; +export * from './toolbar'; diff --git a/src/lib/toolbar/toolbar-fixed-adjust.directive.ts b/src/lib/toolbar/toolbar-fixed-adjust.directive.ts deleted file mode 100644 index 762aa9870..000000000 --- a/src/lib/toolbar/toolbar-fixed-adjust.directive.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - Directive, - ElementRef, - HostBinding -} from '@angular/core'; - -@Directive({ - selector: '[mdc-toolbar-fixed-adjust], mdc-toolbar-fixed-adjust' -}) -export class MdcToolbarFixedAdjustDirective { - @HostBinding('class.mdc-toolbar-fixed-adjust') isHostClass = true; - - constructor(public elementRef: ElementRef) { } -} diff --git a/src/lib/toolbar/toolbar-icon-menu.directive.ts b/src/lib/toolbar/toolbar-icon-menu.directive.ts deleted file mode 100644 index ca31393a4..000000000 --- a/src/lib/toolbar/toolbar-icon-menu.directive.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - Directive, - ElementRef, - HostBinding -} from '@angular/core'; - -@Directive({ - selector: '[mdc-toolbar-menu-icon]' -}) -export class MdcToolbarIconMenu { - @HostBinding('class.mdc-toolbar__menu-icon') isHostClass = true; - - constructor(public elementRef: ElementRef) { } -} diff --git a/src/lib/toolbar/toolbar-icon.directive.ts b/src/lib/toolbar/toolbar-icon.directive.ts deleted file mode 100644 index 47fa16283..000000000 --- a/src/lib/toolbar/toolbar-icon.directive.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - Directive, - ElementRef, - HostBinding -} from '@angular/core'; - -@Directive({ - selector: '[mdc-toolbar-icon]' -}) -export class MdcToolbarIcon { - @HostBinding('class.mdc-toolbar__icon') isHostClass = true; - - constructor(public elementRef: ElementRef) { } -} diff --git a/src/lib/toolbar/toolbar-row.directive.ts b/src/lib/toolbar/toolbar-row.directive.ts deleted file mode 100644 index 3723b1e7c..000000000 --- a/src/lib/toolbar/toolbar-row.directive.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - Directive, - ElementRef, - HostBinding -} from '@angular/core'; - -@Directive({ - selector: 'mdc-toolbar-row' -}) -export class MdcToolbarRowDirective { - @HostBinding('class.mdc-toolbar__row') isHostClass = true; - - constructor(public elementRef: ElementRef) { } -} diff --git a/src/lib/toolbar/toolbar-section.directive.ts b/src/lib/toolbar/toolbar-section.directive.ts deleted file mode 100644 index 410475c5e..000000000 --- a/src/lib/toolbar/toolbar-section.directive.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { - Directive, - HostBinding, - Input, -} from '@angular/core'; - -@Directive({ - selector: 'mdc-toolbar-section' -}) -export class MdcToolbarSectionDirective { - @Input() alignStart: boolean; - @Input() alignEnd: boolean; - @Input() shrinkToFit: boolean; - @HostBinding('class.mdc-toolbar__section') isHostClass = true; - @HostBinding('class.mdc-toolbar__section--align-start') get classAlignStart(): string { - return this.alignStart ? 'mdc-toolbar__section--align-start' : ''; - } - @HostBinding('class.mdc-toolbar__section--align-end') get classAlignEnd(): string { - return this.alignEnd ? 'mdc-toolbar__section--align-end' : ''; - } - @HostBinding('class.mdc-toolbar__section--shrink-to-fit') get classShrinkToFit(): string { - return this.shrinkToFit ? 'mdc-toolbar__section--shrink-to-fit' : ''; - } -} diff --git a/src/lib/toolbar/toolbar-title.directive.ts b/src/lib/toolbar/toolbar-title.directive.ts deleted file mode 100644 index 85ce3ef9f..000000000 --- a/src/lib/toolbar/toolbar-title.directive.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - Directive, - ElementRef, - HostBinding -} from '@angular/core'; - -@Directive({ - selector: '[mdc-toolbar-title], mdc-toolbar-title' -}) -export class MdcToolbarTitleDirective { - @HostBinding('class.mdc-toolbar__title') isHostClass = true; - - constructor(public elementRef: ElementRef) { } -} diff --git a/src/lib/toolbar/toolbar.component.ts b/src/lib/toolbar/toolbar.ts similarity index 64% rename from src/lib/toolbar/toolbar.component.ts rename to src/lib/toolbar/toolbar.ts index bb51fea3b..785bf0a9a 100644 --- a/src/lib/toolbar/toolbar.component.ts +++ b/src/lib/toolbar/toolbar.ts @@ -2,6 +2,7 @@ import { AfterViewInit, Component, ContentChild, + Directive, ElementRef, EventEmitter, HostBinding, @@ -9,22 +10,85 @@ import { OnDestroy, Output, Renderer2, + ViewEncapsulation, } from '@angular/core'; import { isBrowser } from '../common'; import { EventRegistry } from '../common/event-registry'; -import { MdcToolbarTitleDirective } from './toolbar-title.directive'; -import { MdcToolbarRowDirective } from './toolbar-row.directive'; - -import { MDCToolbarAdapter } from './toolbar-adapter'; +import { MDCToolbarAdapter } from './adapter'; import { MDCToolbarFoundation } from '@material/toolbar'; +@Directive({ + selector: '[mdc-toolbar-icon]' +}) +export class MdcToolbarIcon { + @HostBinding('class.mdc-toolbar__icon') isHostClass = true; + + constructor(public elementRef: ElementRef) { } +} + +@Directive({ + selector: 'mdc-toolbar-section' +}) +export class MdcToolbarSection { + @Input() alignStart: boolean = false; + @Input() alignEnd: boolean = false; + @Input() shrinkToFit: boolean = false; + @HostBinding('class.mdc-toolbar__section') isHostClass = true; + @HostBinding('class.mdc-toolbar__section--align-start') get classAlignStart(): string { + return this.alignStart ? 'mdc-toolbar__section--align-start' : ''; + } + @HostBinding('class.mdc-toolbar__section--align-end') get classAlignEnd(): string { + return this.alignEnd ? 'mdc-toolbar__section--align-end' : ''; + } + @HostBinding('class.mdc-toolbar__section--shrink-to-fit') get classShrinkToFit(): string { + return this.shrinkToFit ? 'mdc-toolbar__section--shrink-to-fit' : ''; + } +} + +@Directive({ + selector: '[mdc-toolbar-title], mdc-toolbar-title' +}) +export class MdcToolbarTitle { + @HostBinding('class.mdc-toolbar__title') isHostClass = true; + + constructor(public elementRef: ElementRef) { } +} + +@Directive({ + selector: '[mdc-toolbar-fixed-adjust], mdc-toolbar-fixed-adjust' +}) +export class MdcToolbarFixedAdjust { + @HostBinding('class.mdc-toolbar-fixed-adjust') isHostClass = true; + + constructor(public elementRef: ElementRef) { } +} + +@Directive({ + selector: 'mdc-toolbar-row' +}) +export class MdcToolbarRow { + @HostBinding('class.mdc-toolbar__row') isHostClass = true; + + constructor(public elementRef: ElementRef) { } +} + +@Directive({ + selector: '[mdc-toolbar-menu-icon]' +}) +export class MdcToolbarMenuIcon { + @HostBinding('class.mdc-toolbar__menu-icon') isHostClass = true; + + constructor(public elementRef: ElementRef) { } +} + @Component({ selector: 'mdc-toolbar', template: '', providers: [EventRegistry], + encapsulation: ViewEncapsulation.None, }) -export class MdcToolbarComponent implements AfterViewInit, OnDestroy { +export class MdcToolbar implements AfterViewInit, OnDestroy { @Input() flexible: boolean = false; @Input() flexibleDefaultBehavior: boolean = true; @Input() fixed: boolean = false; @@ -32,8 +96,8 @@ export class MdcToolbarComponent implements AfterViewInit, OnDestroy { @Input() fixedLastrow: boolean = false; @Input() adjustBodyMargin: boolean = true; @Output() change: EventEmitter = new EventEmitter(); - @ContentChild(MdcToolbarRowDirective) mdcFirstRow: MdcToolbarRowDirective; - @ContentChild(MdcToolbarTitleDirective) mdcTitle: MdcToolbarTitleDirective; + @ContentChild(MdcToolbarRow) mdcFirstRow: MdcToolbarRow; + @ContentChild(MdcToolbarTitle) mdcTitle: MdcToolbarTitle; @HostBinding('class.mdc-toolbar') isHostClass = true; @HostBinding('class.mdc-toolbar--fixed') get classFixedToolbar(): string { return this.fixed ? 'mdc-toolbar--fixed' : ''; @@ -63,22 +127,22 @@ export class MdcToolbarComponent implements AfterViewInit, OnDestroy { }, registerScrollHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, 'scroll', handler, 'window'); + this._registry.listen(this._renderer, 'scroll', handler, window); } }, deregisterScrollHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_('scroll', handler); + this._registry.unlisten('scroll', handler); } }, registerResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.listen_(this._renderer, 'resize', handler, 'window'); + this._registry.listen(this._renderer, 'resize', handler, window); } }, deregisterResizeHandler: (handler: EventListener) => { if (isBrowser()) { - this._registry.unlisten_('resize', handler); + this._registry.unlisten('resize', handler); } }, getViewportWidth: () => { @@ -126,11 +190,11 @@ export class MdcToolbarComponent implements AfterViewInit, OnDestroy { public elementRef: ElementRef, private _registry: EventRegistry) { } - ngAfterViewInit() { + ngAfterViewInit(): void { this._foundation.init(); } - ngOnDestroy() { + ngOnDestroy(): void { if (isBrowser() && this.fixed && this.adjustBodyMargin) { this._renderer.removeStyle(document.body, 'margin-top'); } diff --git a/test/unit/checkbox/checkbox.test.ts b/test/unit/checkbox/checkbox.test.ts index c8e2069f3..bfa948929 100644 --- a/test/unit/checkbox/checkbox.test.ts +++ b/test/unit/checkbox/checkbox.test.ts @@ -3,9 +3,9 @@ import { async, ComponentFixture, fakeAsync, flushMicrotasks, TestBed } from '@a import { FormControl, FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { MdcCheckboxComponent, MdcCheckboxModule } from '../../../src/lib/public_api'; +import { MdcCheckbox, MdcCheckboxModule } from '../../../src/lib/public_api'; -describe('MdcCheckboxComponent', () => { +describe('MdcCheckbox', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -25,7 +25,7 @@ describe('MdcCheckboxComponent', () => { describe('basic behaviors', () => { let checkboxDebugElement: DebugElement; let checkboxNativeElement: HTMLElement; - let checkboxInstance: MdcCheckboxComponent; + let checkboxInstance: MdcCheckbox; let testComponent: SingleCheckbox; let inputElement: HTMLInputElement; @@ -33,7 +33,7 @@ describe('MdcCheckboxComponent', () => { fixture = TestBed.createComponent(SingleCheckbox); fixture.detectChanges(); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckboxComponent)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; checkboxInstance = checkboxDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; @@ -135,7 +135,7 @@ describe('MdcCheckboxComponent', () => { it('should use the provided aria-label', () => { fixture = TestBed.createComponent(CheckboxWithAriaLabel); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckboxComponent)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -151,7 +151,7 @@ describe('MdcCheckboxComponent', () => { it('#should use the provided aria-labelledby', () => { fixture = TestBed.createComponent(CheckboxWithAriaLabelledby); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckboxComponent)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -161,7 +161,7 @@ describe('MdcCheckboxComponent', () => { it('#should not assign aria-labelledby if none is provided', () => { fixture = TestBed.createComponent(SingleCheckbox); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckboxComponent)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -182,7 +182,7 @@ describe('MdcCheckboxComponent', () => { fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; - checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckboxComponent)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); labelElement = checkboxNativeElement.querySelector('label'); @@ -209,14 +209,14 @@ describe('MdcCheckboxComponent', () => { describe('with ngModel', () => { let checkboxDebugElement: DebugElement; let checkboxNativeElement: HTMLElement; - let checkboxInstance: MdcCheckboxComponent; + let checkboxInstance: MdcCheckbox; let inputElement: HTMLInputElement; beforeEach(() => { fixture = TestBed.createComponent(CheckboxWithFormDirectives); fixture.detectChanges(); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckboxComponent)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MdcCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; checkboxInstance = checkboxDebugElement.componentInstance; inputElement = checkboxNativeElement.querySelector('input'); @@ -225,7 +225,7 @@ describe('MdcCheckboxComponent', () => { it('#should be in pristine, untouched, and valid states initially', fakeAsync(() => { flushMicrotasks(); - let checkboxElement = fixture.debugElement.query(By.directive(MdcCheckboxComponent)); + let checkboxElement = fixture.debugElement.query(By.directive(MdcCheckbox)); let ngModel = checkboxElement.injector.get(NgModel); expect(ngModel.valid).toBe(true); @@ -253,7 +253,7 @@ describe('MdcCheckboxComponent', () => { }); }); -/** Simple component for testing MdcCheckboxComponent. */ +/** Simple component for testing MdcCheckbox. */ @Component({ template: ` diff --git a/test/unit/dialog/dialog.test.ts b/test/unit/dialog/dialog.test.ts index e29a0b8fd..466b99a67 100644 --- a/test/unit/dialog/dialog.test.ts +++ b/test/unit/dialog/dialog.test.ts @@ -2,7 +2,7 @@ import { Component, DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { MdcDialogComponent, MdcDialogBodyDirective, MdcDialogModule } from '../../../src/lib/public_api'; +import { MdcDialog, MdcDialogBody, MdcDialogModule } from '../../../src/lib/public_api'; describe('MdcDialogComponent', () => { let fixture: ComponentFixture; @@ -20,7 +20,7 @@ describe('MdcDialogComponent', () => { describe('basic behaviors', () => { let dialogDebugElement: DebugElement; let dialogNativeElement: HTMLElement; - let dialogInstance: MdcDialogComponent; + let dialogInstance: MdcDialog; let testComponent: SimpleDialog; let DialogBodyDebugElement: DebugElement; @@ -30,12 +30,12 @@ describe('MdcDialogComponent', () => { fixture = TestBed.createComponent(SimpleDialog); fixture.detectChanges(); - dialogDebugElement = fixture.debugElement.query(By.directive(MdcDialogComponent)); + dialogDebugElement = fixture.debugElement.query(By.directive(MdcDialog)); dialogNativeElement = dialogDebugElement.nativeElement; dialogInstance = dialogDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; - DialogBodyDebugElement = fixture.debugElement.query(By.directive(MdcDialogBodyDirective)); + DialogBodyDebugElement = fixture.debugElement.query(By.directive(MdcDialogBody)); dialogBodyNativeElement = DialogBodyDebugElement.nativeElement; }); diff --git a/test/unit/drawer/permanent-drawer.test.ts b/test/unit/drawer/permanent-drawer.test.ts index bb28aee6b..e2a5d752f 100644 --- a/test/unit/drawer/permanent-drawer.test.ts +++ b/test/unit/drawer/permanent-drawer.test.ts @@ -4,10 +4,10 @@ import { By } from '@angular/platform-browser'; import { MdcDrawerModule, - MdcPermanentDrawerComponent, + MdcPermanentDrawer, } from '../../../src/lib/public_api'; -describe('MdcPermanentDrawerComponent', () => { +describe('MdcPermanentDrawer', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -25,14 +25,14 @@ describe('MdcPermanentDrawerComponent', () => { describe('basic behaviors', () => { let testDebugElement: DebugElement; let testNativeElement: HTMLElement; - let testInstance: MdcPermanentDrawerComponent; + let testInstance: MdcPermanentDrawer; let testComponent: SimpleTest; beforeEach(() => { fixture = TestBed.createComponent(SimpleTest); fixture.detectChanges(); - testDebugElement = fixture.debugElement.query(By.directive(MdcPermanentDrawerComponent)); + testDebugElement = fixture.debugElement.query(By.directive(MdcPermanentDrawer)); testNativeElement = testDebugElement.nativeElement; testInstance = testDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; @@ -55,5 +55,4 @@ describe('MdcPermanentDrawerComponent', () => { `, }) -class SimpleTest { -} +class SimpleTest { } diff --git a/test/unit/drawer/persistent-drawer.test.ts b/test/unit/drawer/persistent-drawer.test.ts index a6a66ce2d..4700102fc 100644 --- a/test/unit/drawer/persistent-drawer.test.ts +++ b/test/unit/drawer/persistent-drawer.test.ts @@ -4,10 +4,10 @@ import { By } from '@angular/platform-browser'; import { MdcDrawerModule, - MdcPersistentDrawerComponent, + MdcPersistentDrawer, } from '../../../src/lib/public_api'; -describe('MdcPersistentDrawerComponent', () => { +describe('MdcPersistentDrawer', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -25,14 +25,14 @@ describe('MdcPersistentDrawerComponent', () => { describe('basic behaviors', () => { let testDebugElement: DebugElement; let testNativeElement: HTMLElement; - let testInstance: MdcPersistentDrawerComponent; + let testInstance: MdcPersistentDrawer; let testComponent: SimpleTest; beforeEach(() => { fixture = TestBed.createComponent(SimpleTest); fixture.detectChanges(); - testDebugElement = fixture.debugElement.query(By.directive(MdcPersistentDrawerComponent)); + testDebugElement = fixture.debugElement.query(By.directive(MdcPersistentDrawer)); testNativeElement = testDebugElement.nativeElement; testInstance = testDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/drawer/temporary-drawer.test.ts b/test/unit/drawer/temporary-drawer.test.ts index 62bd0b39e..2d2281e82 100644 --- a/test/unit/drawer/temporary-drawer.test.ts +++ b/test/unit/drawer/temporary-drawer.test.ts @@ -4,10 +4,10 @@ import { By } from '@angular/platform-browser'; import { MdcDrawerModule, - MdcTemporaryDrawerComponent, + MdcTemporaryDrawer, } from '../../../src/lib/public_api'; -describe('MdcTemporaryDrawerComponent', () => { +describe('MdcTemporaryDrawer', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -25,14 +25,14 @@ describe('MdcTemporaryDrawerComponent', () => { describe('basic behaviors', () => { let testDebugElement: DebugElement; let testNativeElement: HTMLElement; - let testInstance: MdcTemporaryDrawerComponent; + let testInstance: MdcTemporaryDrawer; let testComponent: SimpleTest; beforeEach(() => { fixture = TestBed.createComponent(SimpleTest); fixture.detectChanges(); - testDebugElement = fixture.debugElement.query(By.directive(MdcTemporaryDrawerComponent)); + testDebugElement = fixture.debugElement.query(By.directive(MdcTemporaryDrawer)); testNativeElement = testDebugElement.nativeElement; testInstance = testDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/elevation/elevation.test.ts b/test/unit/elevation/elevation.test.ts index ae713416d..a1370186e 100644 --- a/test/unit/elevation/elevation.test.ts +++ b/test/unit/elevation/elevation.test.ts @@ -4,10 +4,10 @@ import { By } from '@angular/platform-browser'; import { MdcElevationModule, - MdcElevationDirective, + MdcElevation, } from '../../../src/lib/public_api'; -describe('MdcElevationDirective', () => { +describe('MdcElevation', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -25,14 +25,14 @@ describe('MdcElevationDirective', () => { describe('basic behaviors', () => { let testDebugElement: DebugElement; let testNativeElement: HTMLElement; - let testInstance: MdcElevationDirective; + let testInstance: MdcElevation; let testComponent: SimpleTest; beforeEach(() => { fixture = TestBed.createComponent(SimpleTest); fixture.detectChanges(); - testDebugElement = fixture.debugElement.query(By.directive(MdcElevationDirective)); + testDebugElement = fixture.debugElement.query(By.directive(MdcElevation)); testNativeElement = testDebugElement.nativeElement; testInstance = testDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/fab/fab.test.ts b/test/unit/fab/fab.test.ts index a8900bf23..2dffc5e56 100644 --- a/test/unit/fab/fab.test.ts +++ b/test/unit/fab/fab.test.ts @@ -2,9 +2,9 @@ import { Component, DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { MdcFabComponent, MdcFabModule } from '../../../src/lib/public_api'; +import { MdcFab, MdcFabModule } from '../../../src/lib/public_api'; -describe('MdcFabComponent', () => { +describe('MdcFab', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -20,14 +20,14 @@ describe('MdcFabComponent', () => { describe('button[mdc-fab]', () => { let buttonDebugElement: DebugElement; let buttonNativeElement: HTMLButtonElement; - let buttonInstance: MdcFabComponent; + let buttonInstance: MdcFab; let testComponent: SimpleButton; beforeEach(() => { fixture = TestBed.createComponent(SimpleButton); fixture.detectChanges(); - buttonDebugElement = fixture.debugElement.query(By.directive(MdcFabComponent)); + buttonDebugElement = fixture.debugElement.query(By.directive(MdcFab)); buttonNativeElement = buttonDebugElement.nativeElement; buttonInstance = buttonDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/form-field/form-field.test.ts b/test/unit/form-field/form-field.test.ts index df768ab31..d5715be0d 100644 --- a/test/unit/form-field/form-field.test.ts +++ b/test/unit/form-field/form-field.test.ts @@ -3,14 +3,14 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { - MdcFormFieldDirective, + MdcFormField, MdcFormFieldModule, MdcCheckboxModule, MdcRadioModule, MdcSwitchModule } from '../../../src/lib/public_api'; -describe('MdcFormFieldDirective', () => { +describe('MdcFormField', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -31,14 +31,14 @@ describe('MdcFormFieldDirective', () => { describe('basic behaviors', () => { let testDebugElement: DebugElement; let testNativeElement: HTMLElement; - let testInstance: MdcFormFieldDirective; + let testInstance: MdcFormField; let testComponent: SimpleTest; beforeEach(() => { fixture = TestBed.createComponent(SimpleTest); fixture.detectChanges(); - testDebugElement = fixture.debugElement.query(By.directive(MdcFormFieldDirective)); + testDebugElement = fixture.debugElement.query(By.directive(MdcFormField)); testNativeElement = testDebugElement.nativeElement; testInstance = testDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/icon-toggle/icon-toggle.test.ts b/test/unit/icon-toggle/icon-toggle.test.ts index 643b160e1..c7e35d3e7 100644 --- a/test/unit/icon-toggle/icon-toggle.test.ts +++ b/test/unit/icon-toggle/icon-toggle.test.ts @@ -2,9 +2,9 @@ import { Component, DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { MdcIconToggleComponent, MdcIconToggleModule } from '../../../src/lib/public_api'; +import { MdcIconToggle, MdcIconToggleModule } from '../../../src/lib/public_api'; -describe('MdcIconToggleComponent', () => { +describe('MdcIconToggle', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -20,14 +20,14 @@ describe('MdcIconToggleComponent', () => { describe('basic behaviors', () => { let buttonDebugElement: DebugElement; let buttonNativeElement: HTMLButtonElement; - let buttonInstance: MdcIconToggleComponent; + let buttonInstance: MdcIconToggle; let testComponent: SimpleButton; beforeEach(() => { fixture = TestBed.createComponent(SimpleButton); fixture.detectChanges(); - buttonDebugElement = fixture.debugElement.query(By.directive(MdcIconToggleComponent)); + buttonDebugElement = fixture.debugElement.query(By.directive(MdcIconToggle)); buttonNativeElement = buttonDebugElement.nativeElement; buttonInstance = buttonDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/icon/icon.test.ts b/test/unit/icon/icon.test.ts index 9d69e95bf..7fec65539 100644 --- a/test/unit/icon/icon.test.ts +++ b/test/unit/icon/icon.test.ts @@ -40,11 +40,6 @@ describe('MdcIcon', () => { it('#should have material-icons', () => { expect(testDebugElement.nativeElement.classList).toContain('material-icons'); }); - - it('#should set the SvgElement', () => { - testComponent.mySvg = 'test'; - fixture.detectChanges(); - }); }); describe('Font Awesome', () => { @@ -71,12 +66,11 @@ describe('MdcIcon', () => { @Component({ template: ` - {{myIcon}} + {{myIcon}} `, }) class SimpleTest { myIcon: string = 'home'; - mySvg: string = 'test'; } /** Simple component for testing. */ diff --git a/test/unit/linear-progress/linear-progress.test.ts b/test/unit/linear-progress/linear-progress.test.ts index 6f6a431ac..2cc67f855 100644 --- a/test/unit/linear-progress/linear-progress.test.ts +++ b/test/unit/linear-progress/linear-progress.test.ts @@ -2,9 +2,9 @@ import { Component, DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { MdcLinearProgressComponent, MdcLinearProgressModule } from '../../../src/lib/public_api'; +import { MdcLinearProgress, MdcLinearProgressModule } from '../../../src/lib/public_api'; -describe('MdcLinearProgressComponent', () => { +describe('MdcLinearProgress', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -20,14 +20,14 @@ describe('MdcLinearProgressComponent', () => { describe('basic behaviors', () => { let testDebugElement: DebugElement; let testNativeElement: HTMLElement; - let testInstance: MdcLinearProgressComponent; + let testInstance: MdcLinearProgress; let testComponent: SimpleTest; beforeEach(() => { fixture = TestBed.createComponent(SimpleTest); fixture.detectChanges(); - testDebugElement = fixture.debugElement.query(By.directive(MdcLinearProgressComponent)); + testDebugElement = fixture.debugElement.query(By.directive(MdcLinearProgress)); testNativeElement = testDebugElement.nativeElement; testInstance = testDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/radio/radio.test.ts b/test/unit/radio/radio.test.ts index 791d47888..ce8dea9f4 100644 --- a/test/unit/radio/radio.test.ts +++ b/test/unit/radio/radio.test.ts @@ -3,9 +3,9 @@ import { async, ComponentFixture, fakeAsync, flushMicrotasks, TestBed } from '@a import { FormControl, FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { MdcRadioComponent, MdcRadioModule } from '../../../src/lib/public_api'; +import { MdcRadio, MdcRadioModule } from '../../../src/lib/public_api'; -describe('MdcRadioComponent', () => { +describe('MdcRadio', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -25,7 +25,7 @@ describe('MdcRadioComponent', () => { describe('basic behaviors', () => { let radioDebugElement: DebugElement; let radioNativeElement: HTMLElement; - let radioInstance: MdcRadioComponent; + let radioInstance: MdcRadio; let testComponent: SingleRadio; let inputElement: HTMLInputElement; @@ -33,7 +33,7 @@ describe('MdcRadioComponent', () => { fixture = TestBed.createComponent(SingleRadio); fixture.detectChanges(); - radioDebugElement = fixture.debugElement.query(By.directive(MdcRadioComponent)); + radioDebugElement = fixture.debugElement.query(By.directive(MdcRadio)); radioNativeElement = radioDebugElement.nativeElement; radioInstance = radioDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; @@ -130,7 +130,7 @@ describe('MdcRadioComponent', () => { it('should use the provided aria-label', () => { fixture = TestBed.createComponent(RadioWithAriaLabel); - radioDebugElement = fixture.debugElement.query(By.directive(MdcRadioComponent)); + radioDebugElement = fixture.debugElement.query(By.directive(MdcRadio)); radioNativeElement = radioDebugElement.nativeElement; inputElement = radioNativeElement.querySelector('input'); @@ -146,7 +146,7 @@ describe('MdcRadioComponent', () => { it('#should use the provided aria-labelledby', () => { fixture = TestBed.createComponent(radioWithAriaLabelledby); - radioDebugElement = fixture.debugElement.query(By.directive(MdcRadioComponent)); + radioDebugElement = fixture.debugElement.query(By.directive(MdcRadio)); radioNativeElement = radioDebugElement.nativeElement; inputElement = radioNativeElement.querySelector('input'); @@ -156,7 +156,7 @@ describe('MdcRadioComponent', () => { it('#should not assign aria-labelledby if none is provided', () => { fixture = TestBed.createComponent(SingleRadio); - radioDebugElement = fixture.debugElement.query(By.directive(MdcRadioComponent)); + radioDebugElement = fixture.debugElement.query(By.directive(MdcRadio)); radioNativeElement = radioDebugElement.nativeElement; inputElement = radioNativeElement.querySelector('input'); @@ -177,7 +177,7 @@ describe('MdcRadioComponent', () => { fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; - radioDebugElement = fixture.debugElement.query(By.directive(MdcRadioComponent)); + radioDebugElement = fixture.debugElement.query(By.directive(MdcRadio)); radioNativeElement = radioDebugElement.nativeElement; inputElement = radioNativeElement.querySelector('input'); labelElement = radioNativeElement.querySelector('label'); @@ -204,14 +204,14 @@ describe('MdcRadioComponent', () => { describe('with ngModel', () => { let radioDebugElement: DebugElement; let radioNativeElement: HTMLElement; - let radioInstance: MdcRadioComponent; + let radioInstance: MdcRadio; let inputElement: HTMLInputElement; beforeEach(() => { fixture = TestBed.createComponent(RadioWithFormDirectives); fixture.detectChanges(); - radioDebugElement = fixture.debugElement.query(By.directive(MdcRadioComponent)); + radioDebugElement = fixture.debugElement.query(By.directive(MdcRadio)); radioNativeElement = radioDebugElement.nativeElement; radioInstance = radioDebugElement.componentInstance; inputElement = radioNativeElement.querySelector('input'); @@ -220,7 +220,7 @@ describe('MdcRadioComponent', () => { it('#should be in pristine, untouched, and valid states initially', fakeAsync(() => { flushMicrotasks(); - let radioElement = fixture.debugElement.query(By.directive(MdcRadioComponent)); + let radioElement = fixture.debugElement.query(By.directive(MdcRadio)); let ngModel = radioElement.injector.get(NgModel); expect(ngModel.valid).toBe(true); diff --git a/test/unit/slider/slider.test.ts b/test/unit/slider/slider.test.ts index 4411d91f7..90707924f 100644 --- a/test/unit/slider/slider.test.ts +++ b/test/unit/slider/slider.test.ts @@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser'; import { MdcSlider, MdcSliderModule } from '../../../src/lib/public_api'; -describe('MdcSliderComponent', () => { +describe('MdcSlider', () => { let fixture: ComponentFixture; beforeEach(async(() => { diff --git a/test/unit/switch/switch.test.ts b/test/unit/switch/switch.test.ts index 15f78c59a..7cec38851 100644 --- a/test/unit/switch/switch.test.ts +++ b/test/unit/switch/switch.test.ts @@ -3,9 +3,9 @@ import { async, ComponentFixture, fakeAsync, flushMicrotasks, TestBed } from '@a import { FormControl, FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { MdcSwitchComponent, MdcSwitchModule } from '../../../src/lib/public_api'; +import { MdcSwitch, MdcSwitchModule } from '../../../src/lib/public_api'; -describe('MdcSwitchComponent', () => { +describe('MdcSwitch', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -24,7 +24,7 @@ describe('MdcSwitchComponent', () => { describe('basic behaviors', () => { let switchDebugElement: DebugElement; let switchNativeElement: HTMLElement; - let switchInstance: MdcSwitchComponent; + let switchInstance: MdcSwitch; let testComponent: SingleSwitch; let inputElement: HTMLInputElement; @@ -32,7 +32,7 @@ describe('MdcSwitchComponent', () => { fixture = TestBed.createComponent(SingleSwitch); fixture.detectChanges(); - switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitchComponent)); + switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitch)); switchNativeElement = switchDebugElement.nativeElement; switchInstance = switchDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; @@ -133,7 +133,7 @@ describe('MdcSwitchComponent', () => { it('#should use the provided aria-label', () => { fixture = TestBed.createComponent(SwitchWithAriaLabel); - switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitchComponent)); + switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitch)); switchNativeElement = switchDebugElement.nativeElement; inputElement = switchNativeElement.querySelector('input'); @@ -149,7 +149,7 @@ describe('MdcSwitchComponent', () => { it('#should use the provided aria-labelledby', () => { fixture = TestBed.createComponent(SwitchWithAriaLabelledby); - switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitchComponent)); + switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitch)); switchNativeElement = switchDebugElement.nativeElement; inputElement = switchNativeElement.querySelector('input'); @@ -159,7 +159,7 @@ describe('MdcSwitchComponent', () => { it('#should not assign aria-labelledby if none is provided', () => { fixture = TestBed.createComponent(SingleSwitch); - switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitchComponent)); + switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitch)); switchNativeElement = switchDebugElement.nativeElement; inputElement = switchNativeElement.querySelector('input'); @@ -171,14 +171,14 @@ describe('MdcSwitchComponent', () => { describe('with ngModel', () => { let switchDebugElement: DebugElement; let switchNativeElement: HTMLElement; - let switchInstance: MdcSwitchComponent; + let switchInstance: MdcSwitch; let inputElement: HTMLInputElement; beforeEach(() => { fixture = TestBed.createComponent(SwitchWithFormDirectives); fixture.detectChanges(); - switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitchComponent)); + switchDebugElement = fixture.debugElement.query(By.directive(MdcSwitch)); switchNativeElement = switchDebugElement.nativeElement; switchInstance = switchDebugElement.componentInstance; inputElement = switchNativeElement.querySelector('input'); @@ -187,7 +187,7 @@ describe('MdcSwitchComponent', () => { it('#should be in pristine, untouched, and valid states initially', fakeAsync(() => { flushMicrotasks(); - let switchElement = fixture.debugElement.query(By.directive(MdcSwitchComponent)); + let switchElement = fixture.debugElement.query(By.directive(MdcSwitch)); let ngModel = switchElement.injector.get(NgModel); expect(ngModel.valid).toBe(true); diff --git a/test/unit/tabs/tab-bar.test.ts b/test/unit/tabs/tab-bar.test.ts index d338fe6d1..85baf5e4f 100644 --- a/test/unit/tabs/tab-bar.test.ts +++ b/test/unit/tabs/tab-bar.test.ts @@ -2,7 +2,7 @@ import { Component, DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { MdcTabBarDirective, MdcTabComponent, MdcTabModule } from '../../../src/lib/public_api'; +import { MdcTabBar, MdcTabModule } from '../../../src/lib/public_api'; describe('MdcTabBar', () => { let fixture: ComponentFixture; @@ -20,14 +20,14 @@ describe('MdcTabBar', () => { describe('behaviors', () => { let tabBarDebugElement: DebugElement; let tabBarNativeElement: HTMLButtonElement; - let tabBarInstance: MdcTabBarDirective; + let tabBarInstance: MdcTabBar; let testComponent: SimpleTabs; beforeEach(() => { fixture = TestBed.createComponent(SimpleTabs); fixture.detectChanges(); - tabBarDebugElement = fixture.debugElement.query(By.directive(MdcTabBarDirective)); + tabBarDebugElement = fixture.debugElement.query(By.directive(MdcTabBar)); tabBarNativeElement = tabBarDebugElement.nativeElement; tabBarInstance = tabBarDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/tabs/tab.test.ts b/test/unit/tabs/tab.test.ts index 0d172734b..44b08802b 100644 --- a/test/unit/tabs/tab.test.ts +++ b/test/unit/tabs/tab.test.ts @@ -2,7 +2,7 @@ import { Component, DebugElement } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { MdcTabBarDirective, MdcTabComponent, MdcTabModule } from '../../../src/lib/public_api'; +import { MdcTab, MdcTabModule } from '../../../src/lib/public_api'; describe('MdcTab', () => { let fixture: ComponentFixture; @@ -20,14 +20,14 @@ describe('MdcTab', () => { describe('behaviors', () => { let tabDebugElement: DebugElement; let tabNativeElement: HTMLButtonElement; - let tabInstance: MdcTabComponent; + let tabInstance: MdcTab; let testComponent: SimpleTabs; beforeEach(() => { fixture = TestBed.createComponent(SimpleTabs); fixture.detectChanges(); - tabDebugElement = fixture.debugElement.query(By.directive(MdcTabComponent)); + tabDebugElement = fixture.debugElement.query(By.directive(MdcTab)); tabNativeElement = tabDebugElement.nativeElement; tabInstance = tabDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/textfield/textarea.test.ts b/test/unit/textfield/textarea.test.ts index 6ed897dd6..ecd97f30f 100644 --- a/test/unit/textfield/textarea.test.ts +++ b/test/unit/textfield/textarea.test.ts @@ -8,7 +8,7 @@ import { MdcTextfieldModule } from '../../../src/lib/public_api'; -describe('MdcTextareaComponent', () => { +describe('MdcTextarea', () => { let fixture: ComponentFixture; beforeEach(async(() => { diff --git a/test/unit/textfield/textfield-box.test.ts b/test/unit/textfield/textfield-box.test.ts index 0eccfaf17..c3b4a22fd 100644 --- a/test/unit/textfield/textfield-box.test.ts +++ b/test/unit/textfield/textfield-box.test.ts @@ -9,7 +9,7 @@ import { MdcTextfieldModule } from '../../../src/lib/public_api'; -describe('MdcTextfieldBoxComponent', () => { +describe('MdcTextfieldBox', () => { let fixture: ComponentFixture; beforeEach(async(() => { diff --git a/test/unit/textfield/textfield.test.ts b/test/unit/textfield/textfield.test.ts index 2173ebbb0..f47709d70 100644 --- a/test/unit/textfield/textfield.test.ts +++ b/test/unit/textfield/textfield.test.ts @@ -8,7 +8,7 @@ import { MdcTextfieldModule } from '../../../src/lib/public_api'; -describe('MdcTextfieldComponent', () => { +describe('MdcTextfield', () => { let fixture: ComponentFixture; beforeEach(async(() => { diff --git a/test/unit/toolbar/toolbar.test.ts b/test/unit/toolbar/toolbar.test.ts index b373bae83..c48500b80 100644 --- a/test/unit/toolbar/toolbar.test.ts +++ b/test/unit/toolbar/toolbar.test.ts @@ -4,10 +4,10 @@ import { By } from '@angular/platform-browser'; import { MdcToolbarModule, - MdcToolbarComponent, + MdcToolbar, } from '../../../src/lib/public_api'; -describe('MdcToolbarComponent', () => { +describe('MdcToolbar', () => { let fixture: ComponentFixture; beforeEach(async(() => { @@ -25,14 +25,14 @@ describe('MdcToolbarComponent', () => { describe('basic behaviors', () => { let testDebugElement: DebugElement; let testNativeElement: HTMLElement; - let testInstance: MdcToolbarComponent; + let testInstance: MdcToolbar; let testComponent: SimpleTest; beforeEach(() => { fixture = TestBed.createComponent(SimpleTest); fixture.detectChanges(); - testDebugElement = fixture.debugElement.query(By.directive(MdcToolbarComponent)); + testDebugElement = fixture.debugElement.query(By.directive(MdcToolbar)); testNativeElement = testDebugElement.nativeElement; testInstance = testDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; diff --git a/test/unit/typography/typography.test.ts b/test/unit/typography/typography.test.ts index c46db056d..0f16c8f41 100644 --- a/test/unit/typography/typography.test.ts +++ b/test/unit/typography/typography.test.ts @@ -4,19 +4,6 @@ import { By } from '@angular/platform-browser'; import { MdcTypographyModule, - MdcAdjustMarginDirective, - MdcBody1Directive, - MdcBody2Directive, - MdcButtonDirective, - MdcCaptionDirective, - MdcDisplay1Directive, - MdcDisplay2Directive, - MdcDisplay3Directive, - MdcDisplay4Directive, - MdcHeadlineDirective, - MdcSubheading1Directive, - MdcSubheading2Directive, - MdcTitleDirective, MdcTypography, } from '../../../src/lib/public_api';