trimox / angular-mdc-web

Angular wrapper for Material Design (Web) Components

Angular MDC

NOTE: The Angular Components team at Google is working to deliver officially supported API-compatible versions of the Angular Material components backed by MDC Web. Follow the effort here

Demos, documentation and guides

Third-party integration incorporating Google Material Components for building beautiful, usable products using Material Design.

Quick Links

• Getting Started
• Changelog
• Documentation and demos
• StackBlitz Template
• Contributing
• Developer guide

Material Design Components

Using Google Material Components foundations and adapters.

Component	Status	Demo
button	Available	View
card	Available	View
checkbox	Available	View
chips	Available	View
data-table	Available	View
dialog	Available	View
drawer	Available	View
elevation	Available	View
fab	Available	View
form-field	Available	View
icon	Available	View
icon-button	Available	View
image-list	Available	View
linear-progress	Available	View
list	Available	View
menu-surface	Available	View
menu	Available	View
radio	Available	View
ripple	Available	View
select	Available	View
shape	Available	View
slider	Available	View
snackbar	Available	View
switch	Available	View
tabs	Available	View
text-field	Available	View
theme	Available	View
top-app-bar	Available	View
typography	Available	View

Browser Support

We officially support the last two versions of every major browser.

• Chrome on Android, Windows, macOS, and Linux
• Firefox on Windows, macOS, and Linux
• Safari on iOS and macOS
• Edge on Windows
• IE 11 on Windows

Thank you

To the Angular Components team at Google for their instrumental community support of @angular/cdk and to providing high-quality clean code!

angular-mdc-web's Issues

Add MDC button property: stroked

New button style coming in upcoming MDC update.

• Add stroked property to button
• Update documentation

Architecture overview

This is not an issue actually. I want to understand how we are getting MDC styles into your app. I believe its done in webpack . But I am not able to get it working.

I tried to add tabs. But I could not figure out how MDC components are added.

When I add tabs I get the view like this :

There is style for button but not styles for classes mdc-tab , what am I missing.

Implement MDC Snackbar

Implement MDC Select Component

reference: https://github.com/material-components/material-components-web/tree/master/packages/mdc-select

reference: https://material.io/guidelines/components/text-fields.html
reference: https://material.io/guidelines/components/menus.html

Text Field expression has changed after check error

Visible in development mode, working on a fix.

Implement MDC Icon Toggle Button Component

Reference: https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-toggle

Implement MDC List

Reference : https://material.io/guidelines/components/lists.html
PR incoming..

Research Greenkeeper integration

Should make life easier ensuring our node modules up to date!

Create Test Infrastructure

• Research test runners and frameworks
• Setup karma
• Setup mocha interface
• Cross-Browser testing via Sauce Labs
• Compose documentation

Add [focused] property to Dialog button

Differs from [accept] property in that it sets initial focus to the button. The [accept] property sets focus and closes Dialog on click.

menu looses external class

As we have code like this :

if we add menu with a class

<mdc-menu class="abc">

Expected

<mdc-menu class="abc mdc-simple-menu topLeft mdc-simple-menu--open">

Actual

<mdc-menu class="mdc-simple-menu topLeft mdc-simple-menu--open">

Integration with AngularClass/angular-starter

Unfortunately, I wasn't able to integrate angular-mdc-web with AngularClass/angular-starter due to the following issue:

File to import not found or unreadable: @material/animation/variables.
Parent style sheet: C:/Dev/WebUI/node_modules/@material/button/mdc-button.scss

Process Monitor showed me that WebPack is looking for the file in wrong folders - either \node_modules\@material\button\@material\animation\ or @material\animation\variables of the project root, when the actual location is \node_modules\@material\animation\.

BTW, I had to add the ~ to the @import '~material-components-web/material-components-web'; and all the @material references in the material-components-web.scss (e.g. @import "~@material/animation/mdc-animation";), so it gets checked under the node_modules folder.

Perhaps, it's not an issue of angular-mdc-web, but if you could give me some ideas on fixing the problem, it would be very appreciated.

Theme import in getting started guide

The "getting started" guide says in its "theme" section that the following import should work for angular-cli projects:

@import "material-components-web/material-components-web";

It didn't, for me (angular-cli 1.3.2). What did was:

@import "~material-components-web/dist/material-components-web.css";

I don't know if this is something peculiar to my project or environment, or a problem with the docs.

Optional MDC theme and style packages

Reference : #67 (comment)

• Create optional MDC theme/styles package. Guaranteeing theme css is compatible with installed Angular MDC version
• Create CSS styles for common use cases of Material Design components (e.g. absolutely positioned FAB, bordered lists etc.)
• Create documentation/examples for overriding theme css variables

Rewrite demo-app

Improve various aspects of the demo-app

• Redesign entire UX
• Examples

Bug: NPM Build Fails

Bug: NPM Build Fails

As discussed in the Gitter lobby here, the build command needs to change from "copy-types": "cpy **/*.d.ts ../dist --cwd=build --parents", to "copy-types": "cd build && cpy **/*.d.ts ../dist --parents && cd..",.

I'll submit a PR with the fix.

---

Angular (4.3.2)

Material Design Components - Web (0.17.0)

Angular MDC - Web (0.2.8)

Unit Testing

On this.

Implement MDC Theme

• Include MDC Sass
• Extend MDC theme with Sass (e.g.: absolutely positioned FAB, bordered lists, disabled tabs)
• Update documentation

Namespacing

Have you considered adding a common prefix such as Mdc to all component class names? This would help avoid naming conflicts, and would probably become harder to do the longer time goes on.

Theming components

I am trying to theme the components but no idea how to do it.
I tried the instructions given at the theming page and it did not work.
Got this issue:
https://stackoverflow.com/questions/44670730/theming-material-design-components-for-web-in-angular-2

anyone knows how to fix it ?

Apply tree shaking and minification to demo app

Toolbar title cannot be read fully on mobile

Hey,
When I visited your demo site, I only saw "Angular ..." as title in the toolbar. If you want it to show fully, add mdc-toolbar__section--shrink-to-fit as a class to the section that contains the github icon. Take a look at this
Hope it helps

Button/Fab keyboard propagation issue

Event propagation on both Button and FAB components is not being handled correctly.
PR incoming..

In order to use MDC component, there needs to be an Angular Component wrapper around each?

Just passing through, am I reading this right that for every MDC Component you need to also make an Angular Component like https://github.com/trimox/angular-mdc-web/blob/master/src/components/button/button.ts ?

Implement MDC Slider Component

reference : https://github.com/material-components/material-components-web/tree/master/packages/mdc-slider

reference : https://material.io/guidelines/components/sliders.html

• Implement MDC Slider component
• Write documentation/examples

Update Dialog features

• Add option to prevent closing; one of the actions must be chosen before proceeding.
• Add action color directive for buttons.
• Add more dialog examples
  • Alert without title bar. reference
  • Simple dialog / no explicit cancel button. reference

Other classes get overridden

Not sure if this is intended behavior .

<mdc-toolbar 
      [flexible]="true" 
      [fixed]="true" 
      [waterfall]="true" 
      [fixedLastrow]="true" 
      [flexibleTitle]="true" 
      class="abcdef">

I have additional classname abcdef which gets overridden as we are setting class name instead of adding class to the element.

  @HostBinding('class') className: string = 'mdc-toolbar';

I can try to give a PR if its a bug.

dialog and noImplicitAny

Adding the noImplicitAny compiler option for TypeScript causes the dialog component to break:

typescript: node_modules/@angular-mdc/web/dialog/dialog.component.d.ts, line: 3 
            Could not find a declaration file for module 'focus-trap'. 
            '[path-to-project]/node_modules/focus-trap/index.js' implicitly has an 'any' type. Try `npm 
            install @types/focus-trap` if it exists or add a new declaration (.d.ts) file containing `declare module 
            'focus-trap';` 

The issue is discussed here and here, so if anybody else runs across this problem, add the following to some global .d.ts file:

declare module 'focus-trap';

It would be great if we could fix this within angular-mdc itself, but nothing I have tried so far has been successful at doing that. I may also file something against focus-trap in case it can be done upstream there.

Implement MDC Drawer Component

Reference: https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer

Add function to set Text Field invalid styling manually

PR incoming

Remove FAB material-icon class binding

Floating Action Button should support any icon collection (e.g. Font Awesome) and permit text nodes.

• Remove material-icon hostbinding
• Update documentation/demo
• Include "breaking change" message

Implement MDC text field boxes

Thinking we'll extend our current MDC Text field component; adding the new MDC text field boxes.
Possible usage: <mdc-textfield-box></mdc-textfield-box>

reference MD:
https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes

reference MDC:
material-components/material-components-web@cfa3737

Implement MDC Dialog Component

Reference: https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog

Bug: Menu (Handling selection events)

Bug: Menu

According to Material Design Components - Web The selection event should not only include the index but also include the item as an HTML Element.

Currently, the repo only returns the index. I am needing this for my project because the menu items perform different actions and the list is dynamic. So I don't know the index but will have an ID for each item. In turn, by returning the item as well, I will be able to target that ID and then act upon it.

Thanks for all that you do and for providing this amazing middleware repository.

---

Angular (4.3.2)

Material Design Components - Web (0.16.0)

Angular MDC - Web (0.2.5)

"Invalid style specified!" Error with latest update

This may not be issue with our library. But just posting if someone can point me to quick solution.
Worked fine before update
angular-mdc-web version : '0.2.9'

I did update with npm install @angular-mdc/web@latest

This is the git diff after above command

diff --git a/package-lock.json b/package-lock.json
index 2cbeabe..5e00b46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -153,15 +153,15 @@
      "dev": true
    },
    "@material/auto-init": {
      "version": [-"0.1.3",-]{+"0.1.4",+}
      "resolved": [-"https://registry.npmjs.org/@material/auto-init/-/auto-init-0.1.3.tgz",-]{+"https://registry.npmjs.org/@material/auto-init/-/auto-init-0.1.4.tgz",+}
      "integrity": [-"sha1-Efkuu0AGcmgjhEg5GlQlBbGTIZA=",-]{+"sha512-pyq6hTVrYo/Z/yU3vCAaIpo7C9As/Inj49kt7tRPLsCQ5MDhhMTjCZFmqldDss88XQ1QR2gjNoSh7lNkwRlu7A==",+}
      "dev": true
    },
    "@material/base": {
      "version": [-"0.2.3",-]{+"0.2.5",+}
      "resolved": [-"https://registry.npmjs.org/@material/base/-/base-0.2.3.tgz",-]{+"https://registry.npmjs.org/@material/base/-/base-0.2.5.tgz",+}
      "integrity": [-"sha1-xOsmttblhAwlStSHWI3E9puXHz4=",-]{+"sha512-oQEiOLBlPRox8LEQNRmtOjFGMYg0D4cyE1swQwYwSy0Zz1/hG21f3f3WsPDn4NUhnscL68chtlJiG49LLd6Nfw==",+}
      "dev": true
    },
    "@material/button": {
@@ -171,34 +171,51 @@
:

As we can see it updated material/auto-init and material/base

Now the error :

Module build failed: 
    @error "Invalid style specified! Choose one of #{map-keys($mdc-theme-property-values)}";
   ^
      Invalid style specified! Choose one of primary, accent, background, text-primary-on-primary, text-secondary-on-primary, text-hint-on-primary, text-disabled-on-primary, text-icon-on-primary, text-primary-on-accent, text-secondary-on-accent, text-hint-on-accent, text-disabled-on-accent, text-icon-on-accent, text-primary-on-background, text-secondary-on-background, text-hint-on-background, text-disabled-on-background, text-icon-on-background, text-primary-on-light, text-secondary-on-light, text-hint-on-light, text-disabled-on-light, text-icon-on-light, text-primary-on-dark, text-secondary-on-dark, text-hint-on-dark, text-disabled-on-dark, text-icon-on-dark
      in /node_modules/@material/theme/_mixins.scss (line 26, column 5)

enum declarations member initializer must be constant expression

I started a new project with @ angular/cli .
Followed the getting started guide .

npm i --save @angular-mdc/web

Included Module in app.module.ts and started the application and getting this error :

ERROR in /home/vamshi/code/ngrx-crud-test/node_modules/@angular-mdc/web/menu/menu.component.d.ts (4,16): In ambient enum declarations member initializer must be constant expression.
/home/vamshi/code/ngrx-crud-test/node_modules/@angular-mdc/web/menu/menu.component.d.ts (5,17): In ambient enum declarations member initializer must be constant expression.
/home/vamshi/code/ngrx-crud-test/node_modules/@angular-mdc/web/menu/menu.component.d.ts (6,19): In ambient enum declarations member initializer must be constant expression.
/home/vamshi/code/ngrx-crud-test/node_modules/@angular-mdc/web/menu/menu.component.d.ts (7,20): In ambient enum declarations member initializer must be constant expression.

Not sure if I am doing something wrong.

Does not work with Angular Universal (Server Rendering)

Currently this doesn't work with server-rendering turned on, as you get this error:

ReferenceError: window is not defined

It looks like there's a few directives (ripple, menu, and maybe others?) that use window without checking first if it exists - which is a problem since 'window' does not exist on the server side.

Would it be possible to modify those files so that it could work with Angular Universal?

Add Linting / Testing / Coverage Enforcement

Remove FAB disabled property

FABs were not designed to be disabled. Ref MD guidelines

• Remove disabled property
• Update demo and documentation
• Include "breaking change" message

Implement CI

Implement CI (travis-ci)

mdc-toolbar waterfall issue

I have HTML like this :

<mdc-toolbar
  [flexible]="true"
  [fixed]="true"
  [waterfall]="true"
  [fixedLastrow]="false"
  [flexibleTitle]="true">
  <mdc-toolbar-row>
    <mdc-toolbar-section [alignStart]="true">
      <a href="#" class="material-icons mdc-toolbar__icon--menu">menu</a>
      <mdc-toolbar-title>Title</mdc-toolbar-title>
    </mdc-toolbar-section>
    <mdc-toolbar-section [alignEnd]="true">
      <a href="#" class="material-icons mdc-toolbar__icon" alt="Download">file_download</a>
      <a href="#" class="material-icons mdc-toolbar__icon" alt="Print page">print</a>
      <a href="#" class="material-icons mdc-toolbar__icon" alt="Bookmark page">bookmark</a>
    </mdc-toolbar-section>
  </mdc-toolbar-row>
</mdc-toolbar>

I am expecting it to behave like this :
https://material-components-web.appspot.com/toolbar/waterfall-flexible-toolbar.html

But this is what happening.

I plan to heavily invest my time here. I will try to understand why this is happening. But just keeping you in loop.

Implement MDC Tabs Component

reference: https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs

reference: https://material.io/guidelines/components/tabs.html

how can I help ?

this is my first time to contribute to a public repository, how can I help you ? where should i start from ? Can you let me try on something easy ?

Investigate Angular-CLI issues

Looking into reported problem generating project with angular-cli.

Discuss creating an Angular MDC - Showcase App

Is there interest in creating a seed app? Some of the larger starter kits are a bit overwhelming for newcomers, and it'd be awesome to show what's possible with MDC.

The demo-app is more or less meant for docs, testing components, and soon will undergo a presentation facelift to api/examples.

Wanted to open this up to discussion, in case there was other feedback.

Implement mdc-textarea component

Separating intertwined code in the mdc-textfield textfield and textarea logic. Basically an extension off our [mdc-textfield] component.

New component : mdc-textarea

Add unelevated button property

• Add new unelevated button property
• Update demo page

Reference : material-components/material-components-web#1157

Add CHANGELOG.md

Implement MDC Card component

Will release Friday/23rd. 😄

Create Contributing.md