import {Fab} from "@material/mwc-fab" results in error:

Uncaught (in promise) TypeError: Failed to resolve module specifier "@material/mwc-fab". Relative references must start with either "/", "./", or "../".

Hey everyone, really looking forward to this project. I'm wondering if there's a roadmap for remaining elements, or some other tracking doc? Specifically curious about structural elements, like the layout grid.

Thanks,

Mike

Chrome 67.0.3396 (Mac OS X 10.13.4) ERROR
{
"message": "Uncaught Error: Cannot find module "@material/mwc-button"\nat webpack:///test/unit/mwc-button.test.js:18:0 <- test/unit/index.js:1778:169\n\nError: Cannot find module "@material/mwc-button"\n at webpackMissingModule (webpack:///test/unit/mwc-button.test.js:18:0 <- test/unit/index.js:1778:82)\n at Object. (webpack:///test/unit/mwc-button.test.js:18:0 <- test/unit/index.js:1778:179)\n at webpack_require (webpack:///webpack/bootstrap%208bcbc6ae67f3971d3045:19:0 <- test/unit/index.js:35:30)\n at webpackContext (webpack:///test/unit%20/.test/.js$:22:0 <- test/unit/index.js:1754:9)\n at Array.forEach ()\n at Object.map../mwc-button.test.js (webpack:///test/unit/index.js:20:20 <- test/unit/index.js:1727:21)\n at webpack_require (webpack:///webpack/bootstrap%208bcbc6ae67f3971d3045:19:0 <- test/unit/index.js:35:30)\n at webpack:///webpack/bootstrap%208bcbc6ae67f3971d3045:62:0 <- test/unit/index.js:78:18\n at test/unit/index.js:81:10\n at webpackUniversalModuleDefinition (webpack:///webpack/universalModuleDefinition:9:0 <- test/unit/index.js:14:17)",
"str": "Uncaught Error: Cannot find module "@material/mwc-button"\nat webpack:///test/unit/mwc-button.test.js:18:0 <- test/unit/index.js:1778:169\n\nError: Cannot find module "@material/mwc-button"\n at webpackMissingModule (webpack:///test/unit/mwc-button.test.js:18:0 <- test/unit/index.js:1778:82)\n at Object. (webpack:///test/unit/mwc-button.test.js:18:0 <- test/unit/index.js:1778:179)\n at webpack_require (webpack:///webpack/bootstrap%208bcbc6ae67f3971d3045:19:0 <- test/unit/index.js:35:30)\n at webpackContext (webpack:///test/unit%20/.test/.js$:22:0 <- test/unit/index.js:1754:9)\n at Array.forEach ()\n at Object.map../mwc-button.test.js (webpack:///test/unit/index.js:20:20 <- test/unit/index.js:1727:21)\n at webpack_require (webpack:///webpack/bootstrap%208bcbc6ae67f3971d3045:19:0 <- test/unit/index.js:35:30)\n at webpack:///webpack/bootstrap%208bcbc6ae67f3971d3045:62:0 <- test/unit/index.js:78:18\n at test/unit/index.js:81:10\n at webpackUniversalModuleDefinition (webpack:///webpack/universalModuleDefinition:9:0 <- test/unit/index.js:14:17)"
}

I was trying to implement the Image List Component following other components as a guideline (i.e. wrapping material-components-web in a LitElement), so I built two components: the image-list and the image-list-item. The image-list-items seemed to work quite well, but the image-list, that should apply text protection and choose between a standard or a masonry image list, won't do anything. That's because of course the material-components-web CSS selectors won't apply in the Shadow DOM. So, how should we handle this? I tried to bypass the Shadow DOM by programmatically copying the children outside of it each time an element is added to the parent, but of course that requires extra work, and also makes the WebComponents useless.

This is more of a generic question regarding all/any Lit element / component ...
How would we handle property-change notification when using an mwc component, for example mwc-checkbox has an indeterminate property, which might get changed by some source/means, I'm using that control and would like to 'know' when that property value has changed so that I can react to it.

I don't see any on-indeterminate-property-change syntax being implemented anywhere, so how can I handle such a change in any property value of any component?

This would be even more important for other custom components with no two-way binding being available in Lit elements - so we have to handle all such change notifications ourselves, but how exactly? Can someone provide an example or point to documentation on this subject?

See also #46 where I've mentioned that on-change doesn't get fired on any mwc-XXX components such as mwc-textfield or mwc-checkbox while other events such as on-click or on-input do get fired.

I get the following when executing npm run bootstrap.

I suspect the issue is your scripts cal out /bin/sh but on Mint the default shell is dash and apparently this script isn't dash compatible.

When I forced this script to execute with bash it succeeded.

~/s/material-components-web-components $ npm run bootstrap

> material-components-web-components@ bootstrap /home/shawn/s/material-components-web-components
> npm install && ./scripts/bootstrap-unreleased.sh

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

removed 97 packages in 12.261s
lerna info version 2.11.0
lerna info Bootstrapping 23 packages
lerna info lifecycle preinstall
lerna info Installing external dependencies
lerna info hoist Installing hoisted dependencies into root
lerna info hoist Pruning hoisted dependencies
lerna info hoist Finished pruning hoisted dependencies
lerna info hoist Finished installing in root
lerna info Symlinking packages and binaries
lerna info lifecycle postinstall
lerna info lifecycle prepublish
lerna info lifecycle prepare
lerna success Bootstrapped 23 packages
./scripts/bootstrap-unreleased.sh: 24: ./scripts/bootstrap-unreleased.sh: Syntax error: "(" unexpected
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! material-components-web-components@ bootstrap: `npm install && ./scripts/bootstrap-unreleased.sh`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the material-components-web-components@ bootstrap script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/shawn/.npm/_logs/2018-05-06T15_04_44_169Z-debug.log

npm i @material/mwc-select

npm ERR! code E404
npm ERR! 404 Not Found: @material/mwc-select@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     .npm/_logs/2018-05-14T09_06_41_487Z-debug.log
zsh: exit 1     npm i @material/mwc-select

Can you please add it to npm? The documentation for this element is also missing. Why there is no README file?

I've just hit a use-case where I needed to know the selectionStart/end of the mwc-textfield. Right now this is not being exposed. I have fixed the issue with my local fork via a getter/setter, like so:

  	get selectionStart() {
		return this._input.selectionStart;
  	}

  	set selectionStart(selection) {
		this._input.selectionStart = selection;
  	}

	set selectionEnd(selection) {
		this._input.selectionStart = selection;
  	}

	get selectionEnd() {
		return this._input.selectionEnd;
  	}

I'm happy to do a PR if the team is OK with using getter/setters for selection positions.

I am experimenting using material-components-web-components in the pwa-starter-kit.

I installed the mwc-checkbox element as follows:

npm install @material/mwc-checkbox

Then imported in my js module:

import { html } from '@polymer/lit-element';
import { SharedStyles } from './shared-styles.js';
import { PageViewElement } from './page-view-element.js';
import { Checkbox } from '@material/mwc-checkbox';

class MyView1 extends PageViewElement {
  _render(props) {
    return html`
      ${SharedStyles}
      <section>
        <h2>Static page</h2>
        <p>This is a text-only page.</p>
        <p>It doesn't do anything other than display some static text.</p>
      </section>
      <section>
        <h2>Welcome</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare, aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.</p>
      </section>
      <section>
        <p>Vestibulum at est ex. Aenean id ligula id nibh dictum laoreet. Etiam non semper erat. Pellentesque eu justo rhoncus diam vulputate facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat metus ex, vel fringilla massa tincidunt sit amet. Nunc facilisis bibendum tristique. Mauris commodo, dolor vitae dapibus fermentum, odio nibh viverra lorem, eu cursus diam turpis et sapien. Nunc suscipit tortor a ligula tincidunt, id hendrerit tellus sollicitudin.</p>
        <mwc-checkbox></mwc-checkbox>
      </section>
    `;
  }
}

window.customElements.define('my-view1', MyView1);

But get the following:

I'm trying to get the mwc-textfield working based on git repository (as it's not yet available in npm)
I can't find any documentation about event handling anywhere.
The code uses foundation (is there any documentation as to how that works in case any of us would like to build our own similar components?)
I've added on-input="${_onInput}" which fires the handler properly, supplying e as event, but ... the only way I found to access the actual updated value of the internal input is as e.target._component.value or e.target._input.value - either one uses protected property so I don't think this is the intended syntax.
How will it work, eventually (once it's finished & made available as npm) ?
I see, I can also use e.composedPath()[0].value - which is better as it doesn't access any protected properties - found it here: https://www.polymer-project.org/3.0/docs/devguide/events

lit/lit-element#104

How to render a text field in an invalid state with a custom error message?

While you cannot click on disabled text boxes I noticed they can be tabbed to and then edited.

I am used to the typical Web Components patter of attributes-in/events-out, so when I tried to use mwc-radio I kinda expected it to fire a change event when its state change, but it doesn't...

I feel a bit lost about the intended way to use it. Let's say I have a radio group 👍

<div>
        <mwc-radio value='toto'  name='raaadio'></mwc-radio><div>Toto</div>
        <mwc-radio value='titi' name='raaadio'></mwc-radio><div>Titi</div>
        <mwc-radio value='tata' name='raaadio'></mwc-radio><div>Tata</div>
</div>

How can I detect a change in the selected radio button?
I have tested listening for change event in each button and in the div, without success...

Thanks in advance!

After installing and running the project, all demos work properly except the select demo:
Chrome 65
Mac OS 10.11.4
http://127.0.0.1:8000/demos/select.html

Hi,

Thanks for the awesome elements.
I would like to inherit from mwc-text-field having the possibility to set step (used with the number type).

The first idea that springs to mind is by redefining this function:

 _renderInput({value, required, type, placeHolder, label}) {
    return html`<input type="text" type$="${type}" placeholder$="${placeHolder}" required?="${required}" class$="mdc-text-field__input ${value ? 'mdc-text-field--upgraded' : ''}" id="text-field" value="${value}" aria-label$="${label}">`;
  }

IS this the right path?
The problem is that the template simply calls:

 ${this._renderInput({value, required, type, placeHolder, label})}

So, if I want to keep this function pure, I don't have access to the passed value. I would effectively have to add it to the properties, the constructor and _render. While adding it to the constructor would be dead easy, the same cannot be said about properties and _render.

So... what's a good way to extend mwc-text-field so that it accepts a new property that wasn't there before?

(Note: this question can be applied to ANY element...)

Merc.

Hello!

Are there plans to replace compiled SASS with CSS custom properties?

Thank you!

Hi,
I want to extends the mwc-button like that in my own component:
export class MyButton extends Button {}
It works fine, excecpt for the css classes :
<my-button class="light" /> won't apply the light class.

I think it's because of the use of ClassString in the _render method.

Is there something I don't understand ? Is it an issue in ClassString ?

Thanks

Half of the components are available on npm, not all.
Any ideas on when they will be available for straight "npm install ....".
FEATURE REQ:
Is it possible to merge all these components into one file,that way I can manually import the classes as I need them, but from the same source file?

I can yarn add @material/mwc-icon but not the same for mwc-slider. How to use the slider?

After running:

$ npm i @material/mwc-card
npm ERR! code E404
npm ERR! 404 Not Found: @material/mwc-card@latest

This is running on a fresh new element created with polymer init and selecting the Polymer 3 element option

When dom.webcomponents.shadowdom.enabled is enabled mwc-icon does not render any graphics, it simply displays the ID as text. If the shadowdom option is disabled and the polyfill is . I'm unsure if this is an issue with Firefox or with mwc-icon, since this seems to be the only element with issues I figure it's best to start by posting here.

Trying to use Snackbar and seems it doesn't register itself, so I'm importing the class and doing my own customElements.define('mdc-snackbar', MDCSnackbar) (which isn't working either).

Just wondering if this is an intentional pattern, seems to go against how I've seen most custom elements distributed before, seeing as they're global and potential footguns if left up to the user to register them on every import.

Understand this project is a WIP, are the components published to NPM (like snackbar) meant to be production ready, or still considered alpha?

I am currently very confused how to style these components, since there is no real documentation about styling.

Which css variables are provided?
Also how to use and import the css mvc-color variables ?

Implementation in material-components-web:

https://github.com/material-components/material-components-web/tree/v0.35.1/packages/mdc-drawer

Material component page:

https://material.io/develop/web/components/drawers/

npm i @material/mwc-tabs is not installing tabs component.

For example, lit-html has this script:

https://github.com/Polymer/lit-html/blob/master/package.json#L25

It would be great add something similar to the CI to check the components size.

Another reference from the vaadin components: vaadin/vaadin-core#177

bundlesize package: https://github.com/siddharthkp/bundlesize

Hi,
i would like to help implement the missing textarea component wich is in textfield in vanilla. There's many way to achieve this :

• add a textarea attribute (and rows and col)
• create an mdc-textfield-textarea or mdc-textarea
• other
  Do you have think about this already ?
  regards

I've added mwc-button to my project. It bring along with it (mwc-base, mwc-icon, mwc-ripple, ripple, base). Each of these are bringing their own version of lit-html.

This is kind of redundant and unnecessarily causing more round trips to the server!

Of course, when using HTTP2, we can push more resources, but even then we are sending same files from different URLs multiple times.

How can I avoid this?

Underlying mdc-button has been updated with new CSS class and mwc-button needs to follow suit.

Very trivial fix required in packages/button/mwc-button.js

line 68: 'mdc-button--stroked': stroked,
line 68: 'mdc-button--outlined': stroked,

I've got a forked repo with the fix so PR would be simple from here.

I'm super excited for the new Polymer 3 stuff, and just starting to work through the changes I'll need to make to my custom stuff to be able to use it all!

One thing I'm immediately confused with is disabling Ripple effects. Our designer hates them, and is constantly making me find ways to turn them off for any Material things we use, but with these components they seem completely baked in? Am I just not seeing something? I started trying to write a wrapper around mwc-button to just override the method that binds it, but that didn't seem to work.

I have to take off right now, but I can add in more details later if anyone has any ideas?

Thanks!

P.S. I also was working with mwc-checkbox and just wanted to be able to define a clickable label. This doesn't appear to be immediately possible, and you can't set text anywhere... is there no way to do this without writing a wrapper around the element to handle creating js events?

I'm going to play with this a bit more, but so far what I feel like my solution has to be is writing my own components that are all wrappers around the MWC versions and adding any base functionality that I need. Is that the right approach to be taking?

The v0.1.2 tag integrates many components. Many of them (like mwc-menu) are not available through NPM install.

From README.md:

Import the element definition into your HTML page:

<script type="module" src="@material/mwc-icon/index.js"></script>

But there is no index.js file. Looks like it should be mwc-icon.js.

This applies to all packages.

tried to use mwc-dialog by npm install from repo everything works except the css part. getting [object Object] at place of style. not sure if its lit-html issue

looks similar to this issue #33

After working around issue #8 by running run npm bootstrap with /bin/bash and it completing successfully, the demo site fails to display anything with the following error:

Chrome Version 66.0.3359.139 (Official Build) (64-bit)

I tried npm install @webcomponents/webcomponentsjs but that didn't help the second error.

Currently mwc elements rely on native events bubbling out of the shadowRoot for some cases. However, the 's change event is not composed: true and therefore cannot be seen outside the shadowRoot.

This applies to at least mwc-textfield and mwc-switch and likely a bunch of other elements.

Hi i know that is a very very early question , but you intend to implement version of material components using vanilla javascript or any Lib/Framework ?

As a user of <mwc-switch>, when I read switchElem.checked I'd expect it to mirror the state of its wrapped input, so that switchElem.checked === switchElem.shadowRoot.querySelector('input').checked.

Currently checked is set in the constructor but never updated.

https://github.com/material-components/material-components-web-components/blob/56b404cdfd567caaad345cf198e1b47feb0da199/packages/tabs/mwc-tab.js#L47-L51

I suppose that style should be passed into the <style> tag, not above it :)

EDIT: I did not follow style import. Now I can see, that it is an HTML template with own <style> tag, so I am closing issue.

Consider the following CSS excerpts from mwc-button-css.js. The primary color can been customized via a CSS property. However, the disabled state is hardcoded. In order to make this work for my current project, I'm having to not use the built-in disabled state and instead create my own workaround. I'm requesting that CSS properties be offered to cover the disabled state. My particular issue is with mwc-button, but I'm assuming that this will impact multiple / all components. Thank you!

https://github.com/material-components/material-components-web-components/blob/master/packages/button/mwc-button-css.js

.mdc-button:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}

.mdc-button:disabled{background-color:transparent;color:rgba(0,0,0,0.37);cursor:default;pointer-events:none}

Recent release 0.1.2 8021304
has many elements which are not available in npm. Are these not in sync?

Hi

There is a restriction in polymer, whereas all import paths are to be relative. Thing is: the @Polymer folder does not exists and I am not sure, if there is any "standardized" mechanism to lookup modules
beyond specifying a correct location

When I import the element into my webpack 4 bundled application like this:

import '@material/mwc-button/mwc-button.js';

I end up with ReferenceError: regeneratorRuntime is not defined error, this happens in both Firefox and Chrome.

Version tested: 0.1.1

Hi,

From the readme:

Rebuild CSS for components
Components define their css using SASS. The SASS output is built into a javascript module which exports the component's styling as a lit-html template.
To compile the component SASS run:
npm run update-styling

...che?!?
There are three levels here:

• MDC Web, the foundation for material-components-web-components, uses SASS and plain JS
• material-components-web-components uses lit-html
• Now we have the SASS output of MDC Web which is built into a javascript module which exports the component's styling as a lit-html template . The only problem here is that I am not 100% sure I understand the previous sentence, and I definitely have no idea why I would have to "Rebuild the component's CSS" -- do I need to do that for styling?

Please update the docs so that they explain:

• Why you would want to rebuild the CSS for components
• A practical example of a simple component's output, and how lit-html template is generated from that component
• What to DO with that lit-html template
• How to theme/change these elements

It's probably all too obvious once you know it... but...

The README states that each component is installable by running e.g.

npm install @material/mwc-button

However, the components aren't published on the NPM registry, so they are currently not installable