mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
Merge pull request #2 from material-components/elements
[first commit] lots of wip elements
This commit is contained in:
Daniel Freedman
GitHub
commit
cb2387da8f
2
.eslintignore
Normal file
2
.eslintignore
Normal file
@ -0,0 +1,2 @@
|
||||
**/node_modules
|
||||
packages/*/dist
|
||||
42
.eslintrc.yaml
Normal file
42
.eslintrc.yaml
Normal file
@ -0,0 +1,42 @@
|
||||
extends: google
|
||||
globals:
|
||||
goog: false
|
||||
env:
|
||||
browser: true
|
||||
plugins:
|
||||
- mocha
|
||||
parserOptions:
|
||||
ecmaVersion: 2017
|
||||
sourceType: module
|
||||
rules:
|
||||
indent: [error, 2]
|
||||
max-len: [error, 120]
|
||||
no-new: warn
|
||||
quotes: [error, single, {"avoidEscape": true}]
|
||||
no-var: error
|
||||
curly: error
|
||||
no-floating-decimal: error
|
||||
no-unused-vars:
|
||||
- error
|
||||
# Account for closure compiler conventions. See docs/closure-compiler.md
|
||||
# Ignores: MDC[PascalCase]Adapter (records), [PascalCase]Type (typedefs)
|
||||
- varsIgnorePattern: ^(?:(?:MDC(?:(?:[A-Z][a-z0-9]+)+)Adapter)|(?:(?:(?:[A-Z][a-z0-9]+)+)Type))$
|
||||
|
||||
# TODO: Enable once https://github.com/material-components/material-components-web/milestone/4
|
||||
# is complete
|
||||
require-jsdoc: off
|
||||
valid-jsdoc: off
|
||||
|
||||
prefer-const: error
|
||||
|
||||
# Rules for our mocha unit tests. Note that even though we use mocha, we model our unit tests
|
||||
# after frameworks such as tape and ava, which encourage modern paradigms, seek to minimize
|
||||
# shared state across tests, and try and make tests look as simple as possible.
|
||||
mocha/handle-done-callback: error
|
||||
mocha/no-exclusive-tests: error
|
||||
# mocha/no-hooks: error
|
||||
mocha/no-identical-title: error
|
||||
mocha/no-nested-tests: error
|
||||
mocha/no-pending-tests: error
|
||||
mocha/no-skipped-tests: error
|
||||
mocha/valid-suite-description: [error, ^MDC.+|^webpack|^mwc-.+]
|
||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
node_modules
|
||||
/build
|
||||
/coverage
|
||||
.DS_Store
|
||||
/lerna-debug.log
|
||||
0
CHANGELOG.md
Normal file
0
CHANGELOG.md
Normal file
162
CONTRIBUTING.md
Normal file
162
CONTRIBUTING.md
Normal file
@ -0,0 +1,162 @@
|
||||
# Contributing to Polymer
|
||||
|
||||
There are many ways to contribute to the Polymer project! We welcome and truly appreciate contribution in all forms - issues and pull requests to the [main library](https://github.com/polymer/polymer), issues and pull requests to the [elements the Polymer team maintains](https://github.com/polymerelements), issues and pull requests to one of our many [Polymer-related tools](https://github.com/polymer), and of course we love to hear about any Polymer elements that you build to share with the community!
|
||||
|
||||
## Logistics
|
||||
|
||||
### Communicating with the Polymer team
|
||||
|
||||
Beyond GitHub, we try to have a variety of different lines of communication open:
|
||||
|
||||
* [Blog](https://blog.polymer-project.org/)
|
||||
* [Twitter](https://twitter.com/polymer)
|
||||
* [Google+ Community](https://plus.sandbox.google.com/u/0/communities/115626364525706131031?cfem=1)
|
||||
* [Mailing list](https://groups.google.com/forum/#!forum/polymer-dev)
|
||||
* [Slack channel](https://bit.ly/polymerslack)
|
||||
|
||||
### The Polymer Repositories
|
||||
|
||||
Because of the component-based nature of the Polymer project, we tend to have lots of different repositories. Our main repository for the Polymer library itself is at [github.com/Polymer/polymer](https://github.com/polymer/polymer). File any issues or pull requests that have to do with the core library on that repository, and we'll take a look ASAP.
|
||||
|
||||
We keep all of the element "product lines" that the Polymer team maintains and distributes in the [PolymerElements](https://github.com/polymerelements) organization. For any element-specific issues or pull requests, file directly on the element's repository, such as the `paper-button` repository at [github.com/polymerelements/paper-button](https://github.com/polymerelements/paper-button). Of course, the elements built by the Polymer team are just a tiny fraction of all the Polymer-based elements out there - catalogs of other web components include [https://www.webcomponents.org/](https://github.com/webcomponents/webcomponents.org) and [component.kitchen](https://component.kitchen).
|
||||
|
||||
The GoogleWebComponents element product line is maintained by teams all across Google, and so is kept in a separate organization: the [GoogleWebComponents](https://github.com/googlewebcomponents) org. Feel free to file issues and PR's on those elements directly in that organization.
|
||||
|
||||
We also track each element product line overall in "meta-repos", named as `$PRODUCTLINE-elements`. These include [paper-elements](https://github.com/polymerelements/paper-elements), [iron-elements](https://github.com/polymerelements/iron-elements), [gold-elements](https://github.com/polymerelements/gold-elements), and more. Feel free to file issues for element requests on those meta-repos, and the README in each repo tracks a roadmap for the product line.
|
||||
|
||||
### Contributor License Agreement
|
||||
|
||||
You might notice our friendly CLA-bot commenting on a pull request you open if you haven't yet signed our CLA. We use the same CLA for all open-source Google projects, so you only have to sign it once. Once you complete the CLA, all your pull-requests will automatically get the `cla: yes` tag.
|
||||
|
||||
If you've already signed a CLA but are still getting bothered by the awfully insistent CLA bot, it's possible we don't have your GitHub username or you're using a different email address. Check the [information on your CLA](https://cla.developers.google.com/clas) or see this help article on [setting the email on your git commits](https://help.github.com/articles/setting-your-email-in-git/).
|
||||
|
||||
[Complete the CLA](https://cla.developers.google.com/clas)
|
||||
|
||||
## Contributing
|
||||
|
||||
### Filing bugs
|
||||
|
||||
The Polymer team heavily uses (and loves!) GitHub for all of our software management. We use GitHub issues to track all bugs and features.
|
||||
|
||||
If you find an issue, please do file it on the repository. The [Polymer/polymer issues](https://github.com/polymer/polymer/issues) should be used only for issues on the Polymer library itself - bugs somewhere in the core codebase.
|
||||
|
||||
For issues with elements the team maintains, please file directly on the element's repository. If you're not sure if a bug stems from the element or the library, air toward filing it on the element and we'll move the issue if necessary.
|
||||
|
||||
Please file issues using the issue template provided, filling out as many fields as possible. We love examples for addressing issues - issues with a jsBin, Plunkr, jsFiddle, or glitch.me repro will be much easier for us to work on quickly. You can start with [this jsbin](http://jsbin.com/luhaxab/edit) which sets up the basics to demonstrate a Polymer element. If you need your repro to run in IE11, you can start from [this glitch](https://glitch.com/edit/#!/polymer-repro?path=my-element.html:2:0), which serves the source via polyserve for automatic transpilation, although you must sign up for a glitch.me account to ensure your code persists for more than 5 days (note the glitch.me _editing environment_ is not compatible with IE11, however the "live" view link of the running code should work).
|
||||
|
||||
Occasionally we'll close issues if they appear stale or are too vague - please don't take this personally! Please feel free to re-open issues we've closed if there's something we've missed and they still need to be addressed.
|
||||
|
||||
### Contributing Pull Requests
|
||||
|
||||
PR's are even better than issues. We gladly accept community pull requests. In general across the core library and all of the elements, there are a few necessary steps before we can accept a pull request:
|
||||
|
||||
- Open an issue describing the problem that you are looking to solve in your PR (if one is not already open), and your approach to solving it. This makes it easier to have a conversation around the best general approach for solving your problem, outside of the code itself.
|
||||
- Sign the [CLA](https://cla.developers.google.com/clas), as described above.
|
||||
- Fork the repo you're making the fix on to your own GitHub account.
|
||||
- Code!
|
||||
- Ideally, squash your commits into a single commit with a clear message of what the PR does. If it absolutely makes sense to keep multiple commits, that's OK - or perhaps consider making two separate PR's.
|
||||
- **Include tests that test the range of behavior that changes with your PR.** If you PR fixes a bug, make sure your tests capture that bug. If your PR adds new behavior, make sure that behavior is fully tested. Every PR *must* include associated tests. (See [Unit tests](#unit-tests) for more.)
|
||||
- Submit your PR, making sure it references the issue you created.
|
||||
- If your PR fixes a bug, make sure the issue includes clear steps to reproduce the bug so we can test your fix.
|
||||
|
||||
If you've completed all of these steps the core team will do its best to respond to the PR as soon as possible.
|
||||
|
||||
#### Contributing Code to Elements
|
||||
|
||||
Though the aim of the Polymer library is to allow lots of flexibility and not get in your way, we work to standardize our elements to make them as toolable and easy to maintain as possible.
|
||||
|
||||
All elements should follow the [Polymer element style guide](http://polymerelements.github.io/style-guide/), which defines how to specify properties, documentation, and more. It's a great guide to follow when building your own elements as well, for maximum standardization and toolability. For instance, structuring elements following the style guide will ensure that they work with the [`iron-component-page`](https://github.com/polymerelements/iron-component-page) element, an incredibly easy way to turn any raw element directly into a documentation page.
|
||||
|
||||
#### Contributing Code to the Polymer library
|
||||
|
||||
We follow the most common javascript and HTML style guidelines for how we structure our code - in general, look at the code and you'll know how to contribute! If you'd like a bit more structure, the [Google JavaScript Styleguide](https://google.github.io/styleguide/javascriptguide.xml) is a good place to start.
|
||||
|
||||
Polymer also participates in Google's [Patch Rewards Program](https://www.google.com/about/appsecurity/patch-rewards/), where you can earn cold, hard cash for qualifying security patches to the Polymer library. Visit the [patch rewards page](https://www.google.com/about/appsecurity/patch-rewards/) to find out more.
|
||||
|
||||
## Unit tests
|
||||
|
||||
All Polymer projects use [`web-component-tester`](https://github.com/Polymer/web-component-tester) for unit tests.
|
||||
The [`polyserve`](https://github.com/PolymerLabs/polyserve) utility is helpful for running tests in the browser.
|
||||
|
||||
For maximum flexibility, install `web-component-tester` and `polyserve` locally:
|
||||
|
||||
npm install -g polyserve web-component-tester
|
||||
|
||||
### Running the Polymer library unit tests
|
||||
|
||||
To run the Polymer library unit tests:
|
||||
|
||||
1. Clone the [Polymer repo](https://github.com/polymer/polymer).
|
||||
|
||||
2. Install the dependencies:
|
||||
|
||||
npm install && bower install
|
||||
|
||||
3. Run the tests:
|
||||
|
||||
npm test
|
||||
|
||||
Or if you have `web-component-tester` installed locally:
|
||||
|
||||
wct
|
||||
|
||||
To run individual test suites:
|
||||
|
||||
<code>npm test <var>path/to/suite</var></code>
|
||||
|
||||
Or:
|
||||
|
||||
<code>wct <var>path/to/suite</var></code>
|
||||
|
||||
For example:
|
||||
|
||||
npm test test/unit/template.html
|
||||
|
||||
You can also run tests in the browser:
|
||||
|
||||
polyserve
|
||||
|
||||
Navigate to:
|
||||
|
||||
[`http://localhost:8080/components/polymer/test/runner.html`](http://localhost:8080/components/polymer/test/runner.html)
|
||||
|
||||
### Running Polymer element unit tests
|
||||
|
||||
To run the element unit tests, you need a global install of `web-component-tester` or `polyserve` (or both).
|
||||
|
||||
1. Clone the element repo.
|
||||
|
||||
1. Install the dependencies.
|
||||
|
||||
bower install
|
||||
|
||||
1. Run the tests:
|
||||
|
||||
wct
|
||||
|
||||
Or run the tests in a browser:
|
||||
|
||||
polyserve
|
||||
|
||||
Navigate to:
|
||||
|
||||
<code>http://localhost:8080/components/<var>element-name</var>/test/runner.html</code>
|
||||
|
||||
### Configuring `web-component-tester`
|
||||
|
||||
By default, `web-component-tester` runs tests on all installed browsers. You can configure it
|
||||
to run tests on a subset of available browsers, or to run tests remotely using Sauce Labs.
|
||||
|
||||
See the [`web-component-tester` README](https://github.com/Polymer/web-component-tester) for
|
||||
information on configuring the tool.
|
||||
|
||||
### Viewing the source documentation locally
|
||||
|
||||
You can view the updates you make to the source documentation locally with the following steps.
|
||||
Make sure to rerun step 1 after every change you make.
|
||||
|
||||
1. Run `polymer analyze > analysis.json`
|
||||
|
||||
1. Run `polymer serve`
|
||||
|
||||
1. Open `http://127.0.0.1:PORT/components/polymer/` to view the documentation
|
||||
4
LICENSE
4
LICENSE
@ -186,7 +186,7 @@
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
Copyright 2018 Google, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
@ -198,4 +198,4 @@
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
limitations under the License.
|
||||
75
README.md
75
README.md
@ -1 +1,74 @@
|
||||
# material-components-web-components
|
||||
# Material Web Components
|
||||
|
||||
Material Web Components helps developers execute [Material Design](https://www.material.io) using [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
|
||||
|
||||
Built on top of the [Material Components Web](https://github.com/material-components/material-components-web) project and [LitElement](https://github.com/polymerlabs/lit-element), the Material Web Components enable a reliable development workflow to build beautiful and functional web projects.
|
||||
|
||||
Web Components can be seamlessly incorporated into a wide range of usage contexts. Whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Web Components into your site in a lightweight, idiomatic fashion.
|
||||
|
||||
**[Demos](demos/)**
|
||||
|
||||
## Quick start
|
||||
|
||||
> Note: This guide assumes you have npm installed locally.
|
||||
|
||||
To get started using one of the Material Web Components in your web application, simply:
|
||||
|
||||
1. npm install it
|
||||
|
||||
```
|
||||
npm install @material/mwc-button
|
||||
```
|
||||
|
||||
1. Load the webcomponents polyfills (see the [webcomponents polyfill Readme](https://github.com/webcomponents/webcomponentsjs/blob/v2/README.md) for more info).
|
||||
|
||||
1. import the element
|
||||
|
||||
```
|
||||
<script type="module">
|
||||
import {Button} from '@material/mwc-button';
|
||||
</script>
|
||||
```
|
||||
|
||||
1. Use the element on the page
|
||||
|
||||
```
|
||||
<mwc-button label="Hi" icon="explore" raised></mwc-button>
|
||||
```
|
||||
|
||||
Below are instructions for setting up project development.
|
||||
|
||||
1. `git clone` this repo
|
||||
1. install dependencies by running `npm run bootstrap`
|
||||
1. to run a development server: `npm run dev` (view the demos by accessing `<dev server url>`/demos/index.html)
|
||||
1. to run tests: `npm run test`
|
||||
|
||||
### Rebuild CSS for components
|
||||
|
||||
Components define their css using [SASS](http://sass-lang.com/). The SASS output is built into a javascript module which exports the component's styling as a (lit-html)[https://github.com/Polymer/lit-html] template.
|
||||
|
||||
To compile the component SASS run
|
||||
|
||||
```
|
||||
npm run update-styling
|
||||
```
|
||||
|
||||
## Useful Links
|
||||
|
||||
- [All Components](packages/)
|
||||
- [Demos](demos/)
|
||||
- [Contributing](CONTRIBUTING.md)
|
||||
- [Material.io](https://www.material.io) (external site)
|
||||
- [Material Design Guidelines](https://material.io/guidelines) (external site)
|
||||
|
||||
## Browser Support
|
||||
|
||||
We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
|
||||
|
||||
- Chrome
|
||||
- Safari
|
||||
- Firefox
|
||||
- IE 11/Edge
|
||||
- Opera
|
||||
- Mobile Safari
|
||||
- Chrome on Android
|
||||
|
||||
98
demos/button.html
Normal file
98
demos/button.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>button demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
.light {
|
||||
--mdc-theme-on-primary: black;
|
||||
--mdc-theme-primary: white;
|
||||
--mdc-theme-on-secondary: black;
|
||||
--mdc-theme-secondary: white;
|
||||
}
|
||||
|
||||
.pink {
|
||||
--mdc-theme-on-primary: white;
|
||||
--mdc-theme-primary: #e9437a;
|
||||
--mdc-theme-on-secondary: white;
|
||||
--mdc-theme-secondary: #e9437a;
|
||||
}
|
||||
|
||||
.wide {
|
||||
width: 250px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Buttons</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<h4>labeled</h4>
|
||||
|
||||
<div class="demo-group-spaced">
|
||||
<mwc-button label="Normal"></mwc-button>
|
||||
<mwc-button class="light" raised label="raised"></mwc-button>
|
||||
<mwc-button unelevated label="unelevated"></mwc-button>
|
||||
<mwc-button class="pink" dense label="dense"></mwc-button>
|
||||
<mwc-button compact label="compact"></mwc-button>
|
||||
<mwc-button class="pink wide" raised label="wide"></mwc-button>
|
||||
<mwc-button disabled label="disabled"></mwc-button>
|
||||
</div>
|
||||
|
||||
<h4>icon labeled</h4>
|
||||
|
||||
<div class="demo-group-spaced">
|
||||
<mwc-button label="Normal" icon="explore"></mwc-button>
|
||||
<mwc-button class="light" raised label="raised" icon="code"></mwc-button>
|
||||
<mwc-button unelevated label="unelevated" icon="check"></mwc-button>
|
||||
<mwc-button class="pink" dense label="dense" icon="feedback"></mwc-button>
|
||||
<mwc-button compact label="compact" icon="gavel"></mwc-button>
|
||||
<mwc-button class="pink wide" raised label="wide" icon="code"></mwc-button>
|
||||
<mwc-button disabled label="disabled" icon="fingerprint"></mwc-button>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
import {Button} from '@material/mwc-button/mwc-button.js';
|
||||
class CustomButton extends Button {
|
||||
_renderStyle(){
|
||||
return html`${super._renderStyle()}<style>.mdc-button{border-radius: 8px}</style>`;
|
||||
}
|
||||
}
|
||||
customElements.define('custom-button', CustomButton);
|
||||
</script>
|
||||
|
||||
<h4>custom button</h4>
|
||||
|
||||
<custom-button label="Custom!" raised></custom-button>
|
||||
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
116
demos/card.html
Normal file
116
demos/card.html
Normal file
@ -0,0 +1,116 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>card demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.presentCard {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 8px;
|
||||
background-color: tomato;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<script type="module">
|
||||
import {style as cardStyle} from '../node_modules/@material/mwc-card/mwc-card-css.js';
|
||||
import {style as typographyStyle} from '../node_modules/@material/mwc-typography/mwc-typography-css.js';
|
||||
import {LitElement, html} from '../../@polymer/lit-element/lit-element.js';
|
||||
import '../node_modules/@material/mwc-button/mwc-button.js';
|
||||
import '../node_modules/@material/mwc-icon/mwc-icon.js';
|
||||
import '../node_modules/@material/mwc-icon-toggle/mwc-icon-toggle.js';
|
||||
import '../node_modules/@material/mwc-ripple/mwc-ripple.js';
|
||||
|
||||
class DemoCard extends LitElement {
|
||||
render() {
|
||||
return html`
|
||||
${cardStyle}${typographyStyle}
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mdc-card {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.my-media {
|
||||
background-image: url('https://material-components-web.appspot.com/images/16-9.jpg');
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
</style>
|
||||
<div class="mdc-card">
|
||||
<div class="mdc-card__primary-action">
|
||||
<div class="mdc-card__media mdc-card__media--16-9 my-media"></div>
|
||||
<div class="content">
|
||||
<h2 class="mdc-typography--title">Our Changing Planet</h2>
|
||||
<h3 class="mdc-typography--subheading1 subtext">by Kurt Wagner</h3>
|
||||
<div class="mdc-typography--body1 subtext">Visit ten places on our planet that are undergoing the biggest changes today.</div>
|
||||
</div>
|
||||
<mdc-ripple></mdc-ripple>
|
||||
</div>
|
||||
<!-- ... content ... -->
|
||||
<div class="mdc-card__actions">
|
||||
<div class="mdc-card__action-buttons">
|
||||
<mwc-button dense class="mdc-card__action--button">Read</mwc-button>
|
||||
<mwc-button dense class="mdc-card__action--button">Save</mwc-button>
|
||||
</div>
|
||||
<div class="mdc-card__action-icons">
|
||||
<mwc-icon-toggle title="Share" icon="share"></mwc-icon-toggle>
|
||||
<mwc-icon-toggle title="More options" icon="more_vert"></mwc-icon-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-card', DemoCard);
|
||||
</script>
|
||||
<div class="presentCard">
|
||||
<demo-card></demo-card>
|
||||
</div>
|
||||
<script type="module">
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
demos/checkbox.html
Normal file
48
demos/checkbox.html
Normal file
@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>checkbox demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-checkbox/mwc-checkbox.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Checkbox</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="demo-group">
|
||||
|
||||
<mwc-checkbox tabIndex="3"></mwc-checkbox>
|
||||
<mwc-checkbox tabIndex="2" checked></mwc-checkbox>
|
||||
<mwc-checkbox tabIndex="1" indeterminate></mwc-checkbox>
|
||||
<mwc-checkbox tabIndex="-1" indeterminate></mwc-checkbox>
|
||||
<mwc-checkbox disabled></mwc-checkbox>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
69
demos/chips.html
Normal file
69
demos/chips.html
Normal file
@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>chips demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-chips/mwc-chip.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-chips/mwc-chip-set.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
mwc-chip-set {
|
||||
--mwc-theme-primary: lightblue;
|
||||
--mwc-theme-text-primary-on-primary: tomato;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Chips</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<mwc-chip-set>
|
||||
<mwc-chip label="Chip"></mwc-chip>
|
||||
<mwc-chip label="Leading Icon" leadingIcon="fingerprint"></mwc-chip>
|
||||
<mwc-chip label="Trailing Icon" leadingIcon="language"></mwc-chip>
|
||||
</mwc-chip-set>
|
||||
|
||||
<h3>choice</h3>
|
||||
|
||||
<mwc-chip-set type="choice">
|
||||
<mwc-chip label="A"></mwc-chip>
|
||||
<mwc-chip label="B" leadingIcon="fingerprint"></mwc-chip>
|
||||
<mwc-chip label="C" leadingIcon="language"></mwc-chip>
|
||||
</mwc-chip-set>
|
||||
|
||||
<h3>filter</h3>
|
||||
|
||||
<mwc-chip-set type="filter">
|
||||
<mwc-chip label="1"></mwc-chip>
|
||||
<mwc-chip label="2" leadingIcon="fingerprint"></mwc-chip>
|
||||
<mwc-chip label="3" leadingIcon="language"></mwc-chip>
|
||||
</mwc-chip-set>
|
||||
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
62
demos/demo-component.css
Normal file
62
demos/demo-component.css
Normal file
@ -0,0 +1,62 @@
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.unresolved {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
transition: opacity ease-in 0.2s;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #6200ee;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: white;
|
||||
min-height: 64px;
|
||||
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
header > a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
mwc-icon {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 64px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.demo-group, .demo-group-spaced {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-group-spaced {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.demo-group > *, .demo-group-spaced > * {
|
||||
margin: 0 8px;
|
||||
}
|
||||
108
demos/dialog.html
Normal file
108
demos/dialog.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>dialog demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-dialog/mwc-dialog.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
min-height: calc(100vh - 4em);
|
||||
}
|
||||
|
||||
body {
|
||||
--mwc-dialog-maxHeight: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Dialog</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="demo-group">
|
||||
|
||||
<mwc-button id="button" raised label="Dialog"></mwc-button>
|
||||
<mwc-dialog id="dialog" headerLabel="Dialog Title" acceptLabel="OK" declineLabel="Cancel">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim nec dui nunc mattis enim ut tellus elementum. Bibendum enim facilisis gravida neque convallis a cras semper. Posuere ac ut consequat semper viverra nam libero. Arcu ac tortor dignissim convallis aenean et tortor at risus. Leo duis ut diam quam nulla. Quis hendrerit dolor magna eget est lorem. Aenean euismod elementum nisi quis eleifend. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Nibh sit amet commodo nulla facilisi nullam vehicula. Massa tempor nec feugiat nisl pretium.</p>
|
||||
</mwc-dialog>
|
||||
<script type="module">
|
||||
button.addEventListener('click', (e) => {
|
||||
dialog.opened = !dialog.opened;
|
||||
});
|
||||
|
||||
dialog.addEventListener('MDCDialog:accept', (e) => {
|
||||
console.log(e.type);
|
||||
});
|
||||
|
||||
dialog.addEventListener('MDCDialog:cancel', (e) => {
|
||||
console.log(e.type);
|
||||
});
|
||||
</script>
|
||||
|
||||
<mwc-button id="scrollingButton" raised label="Scrolling Dialog"></mwc-button>
|
||||
<mwc-dialog id="scrollingDialog" scrollable headerLabel="Scrolling Dialog Title" acceptLabel="OK" declineLabel="Cancel">
|
||||
<span slot="header">More header stuff</span>
|
||||
<span slot="footer">More footer stuff </span>
|
||||
<mwc-button slot="footer" compact ripple label="Button" icon="mail"></mwc-button>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna fringilla urna porttitor. Risus quis varius quam quisque id diam vel quam elementum. Faucibus vitae aliquet nec ullamcorper sit amet risus. Laoreet sit amet cursus sit amet dictum sit. Non enim praesent elementum facilisis leo vel. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Vel risus commodo viverra maecenas accumsan. Arcu felis bibendum ut tristique et egestas quis. Id leo in vitae turpis massa sed elementum tempus. Nunc congue nisi vitae suscipit. Vivamus at augue eget arcu dictum varius duis. Turpis egestas sed tempus urna et pharetra pharetra. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Egestas purus viverra accumsan in nisl nisi. Arcu cursus vitae congue mauris rhoncus aenean. Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus a pellentesque sit amet porttitor. Mus mauris vitae ultricies leo.</p>
|
||||
|
||||
<p>Neque viverra justo nec ultrices dui. Vitae proin sagittis nisl rhoncus mattis. Varius morbi enim nunc faucibus a pellentesque sit. Netus et malesuada fames ac turpis egestas sed tempus urna. Volutpat consequat mauris nunc congue nisi vitae. Odio ut sem nulla pharetra. Ultricies mi eget mauris pharetra. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Suscipit tellus mauris a diam maecenas sed enim ut. Facilisis sed odio morbi quis commodo odio aenean sed. Odio morbi quis commodo odio aenean sed adipiscing diam donec. Eget mi proin sed libero enim sed. Id aliquet risus feugiat in ante. Donec et odio pellentesque diam volutpat commodo sed egestas.</p>
|
||||
|
||||
<p>Tempor orci eu lobortis elementum. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Vitae semper quis lectus nulla at volutpat diam ut. Dignissim suspendisse in est ante in. Aliquam ultrices sagittis orci a scelerisque purus semper eget. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Neque volutpat ac tincidunt vitae semper quis lectus nulla. Tempus quam pellentesque nec nam aliquam. Egestas pretium aenean pharetra magna ac. Venenatis lectus magna fringilla urna porttitor rhoncus. Morbi enim nunc faucibus a pellentesque sit. Purus gravida quis blandit turpis cursus in hac habitasse platea. Urna porttitor rhoncus dolor purus non enim. Vulputate enim nulla aliquet porttitor lacus luctus. Enim nulla aliquet porttitor lacus luctus. Sit amet facilisis magna etiam tempor orci eu. Neque aliquam vestibulum morbi blandit cursus risus. Amet dictum sit amet justo donec enim diam.</p>
|
||||
|
||||
<p>Amet luctus venenatis lectus magna fringilla urna porttitor. Facilisis gravida neque convallis a cras semper. Leo urna molestie at elementum eu. Id donec ultrices tincidunt arcu non. Sagittis eu volutpat odio facilisis mauris sit amet massa. Tristique senectus et netus et malesuada fames ac turpis. Sit amet facilisis magna etiam tempor orci eu lobortis. Nullam non nisi est sit amet facilisis magna etiam. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Eu augue ut lectus arcu bibendum at varius vel. Eu nisl nunc mi ipsum. Urna nunc id cursus metus aliquam. Id porta nibh venenatis cras. Tortor aliquam nulla facilisi cras. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque.</p>
|
||||
|
||||
<p>Ornare lectus sit amet est placerat in egestas. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Ipsum dolor sit amet consectetur adipiscing elit. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Arcu cursus vitae congue mauris. In tellus integer feugiat scelerisque varius morbi enim nunc. Condimentum mattis pellentesque id nibh tortor id aliquet. Urna et pharetra pharetra massa massa ultricies mi quis. Sollicitudin nibh sit amet commodo nulla facilisi. Magna sit amet purus gravida quis blandit turpis cursus. Eros in cursus turpis massa. Ut tellus elementum sagittis vitae.</p>
|
||||
|
||||
<p>Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Aliquet nec ullamcorper sit amet risus nullam eget felis eget. Tortor posuere ac ut consequat semper viverra. Eu non diam phasellus vestibulum lorem. Parturient montes nascetur ridiculus mus. Laoreet non curabitur gravida arcu. Tincidunt arcu non sodales neque. In nulla posuere sollicitudin aliquam ultrices sagittis. Elit sed vulputate mi sit amet mauris. Auctor augue mauris augue neque.</p>
|
||||
|
||||
<p>Id volutpat lacus laoreet non curabitur gravida arcu ac. Eget arcu dictum varius duis. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Ante in nibh mauris cursus mattis. Mauris vitae ultricies leo integer. Sit amet porttitor eget dolor morbi non. Fringilla ut morbi tincidunt augue interdum velit euismod in. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Sagittis orci a scelerisque purus. Vulputate eu scelerisque felis imperdiet. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Ipsum dolor sit amet consectetur adipiscing elit. Est ultricies integer quis auctor elit sed vulputate. Nunc scelerisque viverra mauris in aliquam. Volutpat diam ut venenatis tellus in metus vulputate eu. Auctor urna nunc id cursus metus aliquam eleifend. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Sed viverra tellus in hac.</p>
|
||||
|
||||
<p>Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Vitae elementum curabitur vitae nunc sed. Consectetur a erat nam at lectus urna duis convallis convallis. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Est lorem ipsum dolor sit amet consectetur adipiscing elit. Diam phasellus vestibulum lorem sed risus ultricies. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Suspendisse faucibus interdum posuere lorem ipsum dolor sit. Lacus vestibulum sed arcu non odio euismod lacinia. Nibh cras pulvinar mattis nunc sed blandit. Ultrices sagittis orci a scelerisque purus semper eget. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.</p>
|
||||
|
||||
</mwc-dialog>
|
||||
|
||||
</div>
|
||||
<script type="module">
|
||||
scrollingButton.addEventListener('click', (e) => {
|
||||
scrollingDialog.opened = !scrollingDialog.opened;
|
||||
});
|
||||
|
||||
scrollingDialog.addEventListener('MDCDialog:accept', (e) => {
|
||||
console.log(e.type);
|
||||
});
|
||||
|
||||
scrollingDialog.addEventListener('MDCDialog:cancel', (e) => {
|
||||
console.log(e.type);
|
||||
});
|
||||
</script>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
74
demos/fab.html
Normal file
74
demos/fab.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>fab demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-fab/mwc-fab.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
.light {
|
||||
--mdc-theme-on-primary: black;
|
||||
--mdc-theme-primary: white;
|
||||
--mdc-theme-on-secondary: black;
|
||||
--mdc-theme-secondary: white;
|
||||
}
|
||||
|
||||
.pink {
|
||||
--mdc-theme-on-primary: white;
|
||||
--mdc-theme-primary: #e9437a;
|
||||
--mdc-theme-on-secondary: white;
|
||||
--mdc-theme-secondary: #e9437a;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
left: calc(100vw - 128px);
|
||||
top: calc(100vh - 128px);
|
||||
}
|
||||
|
||||
|
||||
.demo-fab-group {
|
||||
max-width: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>FAB</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="demo-fab-group demo-group-spaced">
|
||||
<mwc-fab icon="explore"></mwc-fab>
|
||||
<mwc-fab class="light" icon="code"></mwc-fab>
|
||||
<mwc-fab icon="feedback"></mwc-fab>
|
||||
<mwc-fab class="pink" icon="gavel" mini></mwc-fab>
|
||||
<mwc-fab icon="fingerprint" disabled></mwc-fab>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
78
demos/formfield.html
Normal file
78
demos/formfield.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>formfield demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-formfield/mwc-formfield.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-checkbox/mwc-checkbox.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-radio/mwc-radio.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-switch/mwc-switch.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-slider/mwc-slider.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Formfield</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<mwc-formfield label="This is a checkbox.">
|
||||
<mwc-checkbox></mwc-checkbox>
|
||||
</mwc-formfield>
|
||||
|
||||
<h4>Align End</h4>
|
||||
<mwc-formfield alignEnd label="This is a checkbox.">
|
||||
<mwc-checkbox></mwc-checkbox>
|
||||
</mwc-formfield>
|
||||
|
||||
<h4>Native Element</h4>
|
||||
<mwc-formfield alignEnd label="Enter a date.">
|
||||
<input type="date">
|
||||
</mwc-formfield>
|
||||
|
||||
<h4>Switch</h4>
|
||||
<mwc-formfield label="This is a switch.">
|
||||
<mwc-switch></mwc-switch>
|
||||
</mwc-formfield>
|
||||
|
||||
<h4>Radio Button</h4>
|
||||
<mwc-formfield label="This is a radio.">
|
||||
<mwc-radio id="one" name="a"></mwc-radio>
|
||||
</mwc-formfield>
|
||||
<mwc-formfield label="This is a radio.">
|
||||
<mwc-radio id="two" name="a" checked></mwc-radio>
|
||||
</mwc-formfield>
|
||||
<mwc-formfield label="This is a radio.">
|
||||
<mwc-radio id="three" name="a"></mwc-radio>
|
||||
</mwc-formfield>
|
||||
|
||||
<h4>Slider</h4>
|
||||
<mwc-formfield label="This is a slider.">
|
||||
<mwc-slider></mwc-slider>
|
||||
</mwc-formfield>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
62
demos/icon-toggle.html
Normal file
62
demos/icon-toggle.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>icon-toggle demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon-toggle/mwc-icon-toggle.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
|
||||
.color {
|
||||
--mdc-theme-text-primary-on-light: tomato;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Icon Toggle</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<mwc-icon-toggle icon="sentiment_very_satisfied" offIcon="sentiment_very_dissatisfied"></mwc-icon-toggle>
|
||||
<mwc-icon-toggle icon="sentiment_satisfied" offIcon="sentiment_neutral"></mwc-icon-toggle>
|
||||
|
||||
<h3>disabled</h3>
|
||||
|
||||
<mwc-icon-toggle disabled icon="sentiment_very_satisfied" offIcon="sentiment_very_dissatisfied"></mwc-icon-toggle>
|
||||
|
||||
<br><br>
|
||||
<h4>color</h4>
|
||||
<div class="color">
|
||||
<mwc-icon-toggle icon="all_out" offIcon="accessibility"></mwc-icon-toggle>
|
||||
<mwc-icon-toggle icon="exit_to_app" offIcon="camera"></mwc-icon-toggle>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
Array.from(document.querySelectorAll('mwc-icon-toggle')).forEach((e) => {
|
||||
e.addEventListener('MDCIconToggle:change', (e) => console.log(e.type, e.target));
|
||||
});
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
60
demos/icon.html
Normal file
60
demos/icon.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>icon demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
|
||||
.color-size {
|
||||
color: tomato;
|
||||
--mdc-icon-size: 4em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Icon</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="demo-group">
|
||||
<mwc-icon>sentiment_very_dissatisfied</mwc-icon>
|
||||
<mwc-icon>sentiment_dissatisfied</mwc-icon>
|
||||
<mwc-icon>sentiment_neutral</mwc-icon>
|
||||
<mwc-icon>sentiment_satisfied</mwc-icon>
|
||||
<mwc-icon>sentiment_very_satisfied</mwc-icon>
|
||||
</div>
|
||||
|
||||
<h4>color and size</h4>
|
||||
<div class="demo-group color-size">
|
||||
<mwc-icon>all_out</mwc-icon>
|
||||
<mwc-icon>accessibility</mwc-icon>
|
||||
<mwc-icon>exit_to_app</mwc-icon>
|
||||
<mwc-icon>camera</mwc-icon>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
222
demos/index.html
Normal file
222
demos/index.html
Normal file
@ -0,0 +1,222 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Material Web Components Catalog</title>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body>
|
||||
<demo-view></demo-view>
|
||||
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module">
|
||||
import {LitElement, html} from '@polymer/lit-element';
|
||||
import {style as listStyle} from '@material/mwc-list/mwc-list-item-css.js';
|
||||
|
||||
class DemoView extends LitElement {
|
||||
render() {
|
||||
return html`
|
||||
${listStyle}
|
||||
<style>
|
||||
header {
|
||||
background-color: #6200ee;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: white;
|
||||
min-height: 64px;
|
||||
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.demo-catalog-logo {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.demo-list {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.demo-catalog-list-icon {
|
||||
margin: 0 24px 0 12px;
|
||||
}
|
||||
|
||||
.demo-heading {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<span class="demo-catalog-logo">
|
||||
<img src="https://material-components-web.appspot.com/images/ic_component_24px_white.svg">
|
||||
</span>
|
||||
<span class="demo-heading">Material Web Components Catalog</span>
|
||||
</header>
|
||||
<div class="demo-list">
|
||||
<div role="list" class="mdc-list mdc-list--two-line">
|
||||
<a role="listitem" class="mdc-list-item" href="button.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_button_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Button
|
||||
<span class="mdc-list-item__secondary-text">Raised and flat buttons</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="fab.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_button_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Floating action button
|
||||
<span class="mdc-list-item__secondary-text">The primary action in an application</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="checkbox.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_selection_control_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Checkbox
|
||||
<span class="mdc-list-item__secondary-text">Multi-selection controls</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="chips.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_chips_24dp.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Chips
|
||||
<span class="mdc-list-item__secondary-text">Chips for actions, selection, and input</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="dialog.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_dialog_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Dialog
|
||||
<span class="mdc-list-item__secondary-text">Interactive presentation of important information</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="formfield.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_text_field_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Form field
|
||||
<span class="mdc-list-item__secondary-text">Layout form fields with labels</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="icon.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Icon
|
||||
<span class="mdc-list-item__secondary-text">Material design icons</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="icon-toggle.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Icon Toggle
|
||||
<span class="mdc-list-item__secondary-text">Toggling icon states</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="linear-progress.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_progress_activity.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Linear Progress
|
||||
<span class="mdc-list-item__secondary-text">Fills from 0% to 100%, represented by bars</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="menu.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_menu_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Menu
|
||||
<span class="mdc-list-item__secondary-text">Pop over menus</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="radio.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_radio_button_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Radio buttons
|
||||
<span class="mdc-list-item__secondary-text">Single selection controls</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="ripple.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_ripple_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Ripple
|
||||
<span class="mdc-list-item__secondary-text">Touch ripple</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="select.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_menu_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Select
|
||||
<span class="mdc-list-item__secondary-text">Pop over selection menus</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="slider.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/slider.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Slider
|
||||
<span class="mdc-list-item__secondary-text">Range controls</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="snackbar.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_toast_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Snackbar
|
||||
<span class="mdc-list-item__secondary-text">Transient messages</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="switch.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_switch_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Switch
|
||||
<span class="mdc-list-item__secondary-text">On off switches</span>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="tabs.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_tabs_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Tabs
|
||||
<span class="mdc-list-item__secondary-text">Tabs with support for icon and text labels</spandiv>
|
||||
</span>
|
||||
</a>
|
||||
<a role="listitem" class="mdc-list-item" href="textfield.html">
|
||||
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_text_field_24px.svg"></span>
|
||||
<span class="mdc-list-item__text">
|
||||
Text field
|
||||
<span class="mdc-list-item__secondary-text">Single and multiline text fields</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-view', DemoView);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
68
demos/linear-progress.html
Normal file
68
demos/linear-progress.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>linear-progress demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-linear-progress/mwc-linear-progress.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
|
||||
mwc-linear-progress {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.demo-progress-bar {
|
||||
--mdc-theme-primary: red;
|
||||
--mdc-theme-secondary: orange;
|
||||
--mdc-linear-progress-buffering-dots-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffcdd2'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Linear Progress</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<mwc-button id="toggle" raised ripple label="Toggle"></mwc-button>
|
||||
<mwc-linear-progress id="progress1"></mwc-linear-progress>
|
||||
<h3>linear-progress: reverse</h3>
|
||||
<mwc-linear-progress reverse class="demo-progress-bar"></mwc-linear-progress>
|
||||
<h3>linear-progress: determinate</h3>
|
||||
<mwc-linear-progress determinate progress="0.5" buffer="1"></mwc-linear-progress>
|
||||
<h3>linear-progress: determinate buffer</h3>
|
||||
<mwc-linear-progress determinate progress="0.3" buffer="0.7" class="demo-progress-bar"></mwc-linear-progress>
|
||||
<h3>linear-progress: determinate buffer reverse</h3>
|
||||
<mwc-linear-progress determinate reverse progress="0.2" buffer="0.6"></mwc-linear-progress>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
toggle.onclick = (e) => {
|
||||
progress1.closed = !progress1.closed;
|
||||
}
|
||||
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
81
demos/menu.html
Normal file
81
demos/menu.html
Normal file
@ -0,0 +1,81 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>menu demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-menu/mwc-menu.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-list/mwc-list-item.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-list/mwc-list-item-separator.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
min-height: calc(100vh - 4em);
|
||||
}
|
||||
|
||||
.demo-mdc-menu-anchor {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.demo-log {
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Menu</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="demo-mdc-menu-anchor">
|
||||
<mwc-button id="button" raised ripple label="Go"></mwc-button>
|
||||
<mwc-menu id="menu">
|
||||
<mwc-list-item label="one"></mwc-list-item>
|
||||
<mwc-list-item label="two"></mwc-list-item>
|
||||
<mwc-list-item label="three"></mwc-list-item>
|
||||
<mwc-list-item disabled label="four"></mwc-list-item>
|
||||
<mwc-list-item-separator></mwc-list-item-separator>
|
||||
<mwc-list-item label="aaa"></mwc-list-item>
|
||||
<mwc-list-item label="bbb"></mwc-list-item>
|
||||
</mwc-menu>
|
||||
</div>
|
||||
<div class="demo-log" id="log"></div>
|
||||
</main>
|
||||
<script type="module">
|
||||
button.addEventListener('click', (e) => {
|
||||
menu.setAnchorCorner(menu.Corner.BOTTOM_START);
|
||||
menu.open = !menu.open;
|
||||
})
|
||||
|
||||
menu.addEventListener('MDCMenu:selected', function(evt) {
|
||||
var detail = evt.detail;
|
||||
log.textContent = `selected: ${detail.index}, ${detail.item.label}`;
|
||||
});
|
||||
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
demos/radio.html
Normal file
45
demos/radio.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>radio demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-radio/mwc-radio.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Radio Button</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<mwc-radio id="s.1" name="s"></mwc-radio>
|
||||
<mwc-radio id="s.2" name="s" checked></mwc-radio>
|
||||
<mwc-radio id="s.3" name="s"></mwc-radio>
|
||||
<br>
|
||||
<mwc-radio id="b.1" name="b"></mwc-radio>
|
||||
<mwc-radio id="b.2" name="b"></mwc-radio>
|
||||
<mwc-radio id="b.3" name="b" checked></mwc-radio>
|
||||
</main>
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
73
demos/ripple.html
Normal file
73
demos/ripple.html
Normal file
@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>ripple demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-ripple/mwc-ripple.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
|
||||
.demo-box {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border: 1px solid gray;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-container > * {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.demo-unbounded {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Ripple</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="demo-container">
|
||||
<div class="demo-box">Primary<mwc-ripple primary></mwc-ripple></div>
|
||||
<div class="demo-box">Accent<mwc-ripple accent></mwc-ripple></div>
|
||||
<div class="demo-box"><input placeholder="Say something..."><mwc-ripple></mwc-ripple></div>
|
||||
<div class="demo-unbounded">Unbounded<mwc-ripple unbounded></mwc-ripple></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
102
demos/select.html
Normal file
102
demos/select.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>select demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-select/mwc-select.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
min-height: calc(100vh - 4em);
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: calc(100vh - 128px);
|
||||
right: calc(100vw - 100% + 16px);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Select</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<mwc-select label="Choose an item...">
|
||||
<mwc-list-item label="this is choice one"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice two"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice three"></mwc-list-item>
|
||||
<mwc-list-item disabled label="this is choice four"></mwc-list-item>
|
||||
<mwc-list-item-separator></mwc-list-item-separator>
|
||||
<mwc-list-item label="this is choice aaa"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice bbb"></mwc-list-item>
|
||||
</mwc-select>
|
||||
|
||||
<h3>box</h3>
|
||||
|
||||
<mwc-select box label="Box: Choose an item...">
|
||||
<mwc-list-item label="this is choice one"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice two"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice three"></mwc-list-item>
|
||||
<mwc-list-item disabled label="this is choice four"></mwc-list-item>
|
||||
<mwc-list-item-separator></mwc-list-item-separator>
|
||||
<mwc-list-item label="this is choice aaa"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice bbb"></mwc-list-item>
|
||||
</mwc-select>
|
||||
|
||||
<h3>box - sized</h3>
|
||||
|
||||
<mwc-select box style="width: 500px;" label="Box: Choose an item...">
|
||||
<mwc-list-item label="this is choice one"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice two"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice three"></mwc-list-item>
|
||||
<mwc-list-item disabled label="this is choice four"></mwc-list-item>
|
||||
<mwc-list-item-separator></mwc-list-item-separator>
|
||||
<mwc-list-item label="this is choice aaa"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice bbb"></mwc-list-item>
|
||||
</mwc-select>
|
||||
|
||||
<h3>disabled</h3>
|
||||
|
||||
<mwc-select disabled label="Disabled...">
|
||||
<mwc-list-item label="this is choice one"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice two"></mwc-list-item>
|
||||
</mwc-select>
|
||||
|
||||
<mwc-select class="abs" label="Choose an item...">
|
||||
<mwc-list-item label="this is choice one"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice two"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice three"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice four"></mwc-list-item>
|
||||
<mwc-list-item-separator></mwc-list-item-separator>
|
||||
<mwc-list-item label="this is choice aaa"></mwc-list-item>
|
||||
<mwc-list-item label="this is choice bbb"></mwc-list-item>
|
||||
</mwc-select>
|
||||
</main>
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
79
demos/slider.html
Normal file
79
demos/slider.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>slider demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-slider/mwc-slider.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
<style>
|
||||
.demo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.demo-container > * {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.demo-colory {
|
||||
--mdc-theme-secondary: orange;
|
||||
--mdc-theme-text-primary-on-dark: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Slider</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h3>Continuous</h3>
|
||||
<div class="demo-container">
|
||||
<mwc-slider></mwc-slider>
|
||||
</div>
|
||||
|
||||
<h3>Discrete</h3>
|
||||
<div class="demo-container demo-colory">
|
||||
<mwc-slider discrete markers max="50" value="10" step="5"></mwc-slider>
|
||||
</div>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<div class="demo-container">
|
||||
<mwc-slider disabled></mwc-slider>
|
||||
</div>
|
||||
|
||||
<div id="logInput"></div>
|
||||
<div id="logChange"></div>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
function show(element, e) {
|
||||
element.textContent = `Value from ${e.type}: ${e.detail.value}`;
|
||||
}
|
||||
Array.from(document.querySelectorAll('mwc-slider')).forEach((e) => {
|
||||
e.addEventListener('MDCSlider:input', (e) => show(window.logInput, e));
|
||||
e.addEventListener('MDCSlider:change', (e) => show(window.logChange, e));
|
||||
});
|
||||
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
72
demos/snackbar.html
Normal file
72
demos/snackbar.html
Normal file
@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>snackbar demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-snackbar/mwc-snackbar.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Snackbar</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="demo-group">
|
||||
<mwc-button id="snack1" raised ripple label="Snack 1"></mwc-button>
|
||||
<mwc-button id="snack2" raised ripple label="Snack 2 (no dismiss)"></mwc-button>
|
||||
<mwc-button id="snack3" raised ripple label="Snack 3 (multiline)"></mwc-button>
|
||||
</div>
|
||||
|
||||
<mwc-snackbar id="snack" message="Hi there snack 1!" actionText="Go"></mwc-snackbar>
|
||||
|
||||
</main>
|
||||
<script type="module">
|
||||
snack1.onclick = () => {
|
||||
snack.dismissesOnAction = true;
|
||||
snack.show();
|
||||
}
|
||||
|
||||
snack2.onclick = () => {
|
||||
snack.dismissesOnAction = false;
|
||||
snack.show({
|
||||
message: 'Hi there snack 2!',
|
||||
actionText: 'Happy',
|
||||
timeout: 5000
|
||||
});
|
||||
}
|
||||
|
||||
snack3.onclick = () => {
|
||||
snack.dismissesOnAction = true;
|
||||
snack.show({
|
||||
message: 'Hi there snack 3! This is a really long message that will probably wrap.',
|
||||
actionText: 'Wow',
|
||||
multiline: true,
|
||||
actionOnBottom: true,
|
||||
timeout: 5000
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
44
demos/switch.html
Normal file
44
demos/switch.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>switch demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-switch/mwc-switch.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Switch</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="demo-group">
|
||||
|
||||
<mwc-switch></mwc-switch>
|
||||
<mwc-switch checked></mwc-switch>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
demos/tabs.html
Normal file
70
demos/tabs.html
Normal file
@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>tabs demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-tabs/mwc-tab-bar-scroller.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-tabs/mwc-tab-bar.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-tabs/mwc-tab.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Tabs</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<mwc-tab-bar>
|
||||
<mwc-tab label="one"></mwc-tab>
|
||||
<mwc-tab label="two"></mwc-tab>
|
||||
<mwc-tab label="three"></mwc-tab>
|
||||
</mwc-tab-bar>
|
||||
|
||||
<h3>With Icons</h3>
|
||||
<mwc-tab-bar activeTabIndex="1">
|
||||
<mwc-tab label="one" icon="accessibility"></mwc-tab>
|
||||
<mwc-tab label="two" icon="exit_to_app"></mwc-tab>
|
||||
<mwc-tab label="three" icon="camera"></mwc-tab>
|
||||
</mwc-tab-bar>
|
||||
|
||||
<h3>Scrolling</h3>
|
||||
<mwc-tab-bar-scroller>
|
||||
<mwc-tab-bar>
|
||||
<mwc-tab label="one"></mwc-tab>
|
||||
<mwc-tab label="two"></mwc-tab>
|
||||
<mwc-tab label="three"></mwc-tab>
|
||||
<mwc-tab label="four"></mwc-tab>
|
||||
<mwc-tab label="five"></mwc-tab>
|
||||
<mwc-tab label="six"></mwc-tab>
|
||||
<mwc-tab label="seven"></mwc-tab>
|
||||
<mwc-tab label="eight"></mwc-tab>
|
||||
<mwc-tab label="nine"></mwc-tab>
|
||||
<mwc-tab label="ten"></mwc-tab>
|
||||
</mwc-tab-bar>
|
||||
</mwc-tab-bar-scroller>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
107
demos/textfield.html
Normal file
107
demos/textfield.html
Normal file
@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>textfield demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-textfield/mwc-textfield.js"></script>
|
||||
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
|
||||
<link rel="stylesheet" href="demo-component.css">
|
||||
</head>
|
||||
<body class="unresolved">
|
||||
<header>
|
||||
<a href="index.html"><mwc-icon></mwc-icon>
|
||||
<span>Text Field</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="demo-group-spaced">
|
||||
|
||||
<mwc-textfield></mwc-textfield>
|
||||
<mwc-textfield label="Say something..."></mwc-textfield>
|
||||
<mwc-textfield label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield icon="event" label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield icon="mail" iconTrailing label="Say something..." value="hi"></mwc-textfield>
|
||||
</div>
|
||||
|
||||
<h4>box</h4>
|
||||
<div class="demo-group-spaced">
|
||||
|
||||
<mwc-textfield box></mwc-textfield>
|
||||
<mwc-textfield box label="Say something..."></mwc-textfield>
|
||||
<mwc-textfield box label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield box icon="event" label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield box icon="event" iconTrailing label="Say something..." value="hi"></mwc-textfield>
|
||||
|
||||
</div>
|
||||
|
||||
<h4>box - required</h4>
|
||||
<div class="demo-group-spaced">
|
||||
|
||||
<mwc-textfield required box></mwc-textfield>
|
||||
<mwc-textfield required box label="Say something..."></mwc-textfield>
|
||||
<mwc-textfield required box label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield required box icon="event" label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield required box iconTrailing icon="event" label="Say something..." value="hi"></mwc-textfield>
|
||||
</div>
|
||||
|
||||
<h4>outlined</h4>
|
||||
<div class="demo-group-spaced">
|
||||
|
||||
<mwc-textfield outlined></mwc-textfield>
|
||||
<mwc-textfield outlined label="Say something..."></mwc-textfield>
|
||||
<mwc-textfield outlined label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield outlined icon="event" label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield outlined iconTrailing icon="event" label="Say something..." value="hi"></mwc-textfield>
|
||||
</div>
|
||||
|
||||
<h4>outlined - required - email - helperText</h4>
|
||||
<div class="demo-group-spaced">
|
||||
|
||||
<mwc-textfield outlined required type="email" helperText="Make sure to include an @"></mwc-textfield>
|
||||
<mwc-textfield outlined required type="email" label="Enter email..." helperText="Make sure to include an @"></mwc-textfield>
|
||||
<mwc-textfield outlined required type="email" label="Enter email..." value="hi" helperText="Make sure to include an @"></mwc-textfield>
|
||||
<mwc-textfield outlined required type="email" icon="event" label="Say something..." value="hi" helperText="Make sure to include an @"></mwc-textfield>
|
||||
<mwc-textfield outlined iconTrailing required type="email" icon="event" label="Say something..." value="hi" helperText="Make sure to include an @"></mwc-textfield>
|
||||
</div>
|
||||
|
||||
<h4>box disabled</h4>
|
||||
<div class="demo-group-spaced">
|
||||
|
||||
<mwc-textfield box disabled></mwc-textfield>
|
||||
<mwc-textfield box disabled label="Say something..."></mwc-textfield>
|
||||
<mwc-textfield box disabled label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield box disabled icon="event" label="Say something..." value="hi"></mwc-textfield>
|
||||
<mwc-textfield box disabled iconTrailing icon="event" label="Say something..." value="hi"></mwc-textfield>
|
||||
|
||||
</div>
|
||||
|
||||
<h4>fullWidth</h4>
|
||||
|
||||
<mwc-textfield fullwidth></mwc-textfield>
|
||||
<mwc-textfield fullwidth placeholder="Say something.." ></mwc-textfield>
|
||||
<mwc-textfield fullwidth label="Say something..."></mwc-textfield>
|
||||
<mwc-textfield fullwidth label="Say something..." value="hi"></mwc-textfield>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
176
karma.conf.js
Normal file
176
karma.conf.js
Normal file
@ -0,0 +1,176 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
const webpackConfig = require('./webpack.config')[0];
|
||||
|
||||
const USING_TRAVISCI = Boolean(process.env.TRAVIS);
|
||||
const USING_SL = Boolean(process.env.SAUCE_USERNAME && process.env.SAUCE_ACCESS_KEY);
|
||||
|
||||
const SL_LAUNCHERS = {
|
||||
'sl-chrome-stable': {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'chrome',
|
||||
version: 'latest',
|
||||
platform: 'macOS 10.12',
|
||||
},
|
||||
'sl-chrome-beta': {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'chrome',
|
||||
version: 'dev',
|
||||
platform: 'macOS 10.12',
|
||||
},
|
||||
'sl-chrome-previous': {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'chrome',
|
||||
version: 'latest-1',
|
||||
platform: 'macOS 10.12',
|
||||
},
|
||||
'sl-firefox-stable': {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'firefox',
|
||||
version: 'latest',
|
||||
platform: 'Windows 10',
|
||||
},
|
||||
'sl-firefox-previous': {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'firefox',
|
||||
version: 'latest-1',
|
||||
platform: 'Windows 10',
|
||||
},
|
||||
'sl-ie': {
|
||||
base: 'SauceLabs',
|
||||
browserName: 'internet explorer',
|
||||
version: '11',
|
||||
platform: 'Windows 8.1',
|
||||
},
|
||||
// TODO(sgomes): Re-enable Edge and Safari after Sauce Labs problems are fixed.
|
||||
// 'sl-edge': {
|
||||
// base: 'SauceLabs',
|
||||
// browserName: 'microsoftedge',
|
||||
// version: 'latest',
|
||||
// platform: 'Windows 10',
|
||||
// },
|
||||
// 'sl-safari-stable': {
|
||||
// base: 'SauceLabs',
|
||||
// browserName: 'safari',
|
||||
// version: 'latest',
|
||||
// platform: 'macOS 10.12',
|
||||
// },
|
||||
// 'sl-safari-previous': {
|
||||
// base: 'SauceLabs',
|
||||
// browserName: 'safari',
|
||||
// version: '9.0',
|
||||
// platform: 'OS X 10.11',
|
||||
// },
|
||||
'sl-ios-safari-latest': {
|
||||
base: 'SauceLabs',
|
||||
deviceName: 'iPhone Simulator',
|
||||
platformVersion: '10.0',
|
||||
platformName: 'iOS',
|
||||
browserName: 'Safari',
|
||||
},
|
||||
// 'sl-ios-safari-previous': {
|
||||
// base: 'SauceLabs',
|
||||
// deviceName: 'iPhone Simulator',
|
||||
// platformVersion: '9.3',
|
||||
// platformName: 'iOS',
|
||||
// browserName: 'Safari',
|
||||
// },
|
||||
};
|
||||
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['mocha'],
|
||||
files: [
|
||||
{pattern: 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js', watched: false},
|
||||
'test/unit/index.js',
|
||||
],
|
||||
preprocessors: {
|
||||
'test/unit/index.js': ['webpack', 'sourcemap'],
|
||||
},
|
||||
reporters: ['dots', 'coverage'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
browsers: determineBrowsers(),
|
||||
browserDisconnectTimeout: 40000,
|
||||
browserNoActivityTimeout: 120000,
|
||||
captureTimeout: 240000,
|
||||
concurrency: USING_SL ? 4 : Infinity,
|
||||
customLaunchers: SL_LAUNCHERS,
|
||||
|
||||
coverageReporter: {
|
||||
dir: 'coverage',
|
||||
reporters: [
|
||||
{type: 'lcovonly', subdir: '.'},
|
||||
{type: 'json', subdir: '.', file: 'coverage.json'},
|
||||
{type: 'html'},
|
||||
],
|
||||
},
|
||||
|
||||
client: {
|
||||
mocha: {
|
||||
reporter: 'html',
|
||||
ui: 'qunit'
|
||||
},
|
||||
},
|
||||
|
||||
webpack: Object.assign({}, webpackConfig, {
|
||||
devtool: 'inline-source-map',
|
||||
module: Object.assign({}, webpackConfig.module, {
|
||||
// Cover source files when not debugging tests. Otherwise, omit coverage instrumenting to get
|
||||
// uncluttered source maps.
|
||||
rules: webpackConfig.module.rules.concat([config.singleRun ? {
|
||||
test: /\.js$/,
|
||||
include: path.resolve('./packages'),
|
||||
exclude: [
|
||||
/node_modules/,
|
||||
/adapter.js/,
|
||||
],
|
||||
loader: 'istanbul-instrumenter-loader',
|
||||
query: {esModules: true},
|
||||
} : undefined]).filter(Boolean),
|
||||
}),
|
||||
}),
|
||||
|
||||
webpackMiddleware: {
|
||||
noInfo: true,
|
||||
},
|
||||
});
|
||||
|
||||
// See https://github.com/karma-runner/karma-sauce-launcher/issues/73
|
||||
if (USING_TRAVISCI) {
|
||||
config.set({
|
||||
sauceLabs: {
|
||||
testName: 'Material Components Web Unit Tests - CI',
|
||||
tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
|
||||
username: process.env.SAUCE_USERNAME,
|
||||
accessKey: process.env.SAUCE_ACCESS_KEY,
|
||||
startConnect: false,
|
||||
},
|
||||
// Attempt to de-flake Sauce Labs tests on TravisCI.
|
||||
transports: ['polling'],
|
||||
browserDisconnectTolerance: 3,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function determineBrowsers() {
|
||||
return USING_SL ? Object.keys(SL_LAUNCHERS) : ['Chrome'];
|
||||
}
|
||||
7
lerna.json
Normal file
7
lerna.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"lerna": "2.9.0",
|
||||
"packages": [
|
||||
"packages/*"
|
||||
],
|
||||
"version": "0.0.0"
|
||||
}
|
||||
15159
package-lock.json
generated
Normal file
15159
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
76
package.json
Normal file
76
package.json
Normal file
@ -0,0 +1,76 @@
|
||||
{
|
||||
"name": "material-components-web-components",
|
||||
"private": true,
|
||||
"description": "Material Components Web Components",
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"build": "npm run clean && mkdirp build && webpack --progress --colors",
|
||||
"build:min": "mkdirp build && cross-env MDC_ENV=production webpack -p --progress --colors",
|
||||
"changelog": "standard-changelog -i CHANGELOG.md -k packages/material-components-web/package.json -w",
|
||||
"clean": "del-cli build/** build .closure-tmp/** .closure-tmp packages/*/node_modules",
|
||||
"dist": "npm run build && npm run build:min",
|
||||
"dev": "polyserve --npm --module-resolution=node",
|
||||
"fix": "npm-run-all --parallel fix:*",
|
||||
"lint:js": "eslint packages test scripts webpack.config.js demos/webpack.config.js karma.conf.js",
|
||||
"lint:imports": "node scripts/check-imports.js",
|
||||
"lint": "npm-run-all --parallel lint:*",
|
||||
"test": "karma start --single-run",
|
||||
"bootstrap": "npm install && ./scripts/bootstrap-unreleased.sh",
|
||||
"update-styling": "./scripts/update-styling.sh"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-transform-object-assign": "^6.8.0",
|
||||
"babel-preset-es2015": "^6.9.0",
|
||||
"babel-traverse": "^6.24.1",
|
||||
"babel-types": "^6.24.1",
|
||||
"babylon": "^6.16.1",
|
||||
"chai": "^4.0.2",
|
||||
"del-cli": "^1.1.0",
|
||||
"eslint": "^4.10.0",
|
||||
"eslint-config-google": "^0.8.1",
|
||||
"eslint-plugin-mocha": "^4.8.0",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"fs-extra": "^5.0.0",
|
||||
"glob": "^7.1.1",
|
||||
"google-closure-compiler": "^20170521.0.0",
|
||||
"istanbul": "^0.4.4",
|
||||
"istanbul-instrumenter-loader": "^3.0.0",
|
||||
"karma": "^2.0.0",
|
||||
"karma-chrome-launcher": "^2.0.0",
|
||||
"karma-coverage": "^1.1.0",
|
||||
"karma-firefox-launcher": "^1.0.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-sauce-launcher": "^1.0.0",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-tap": "^4.0.0",
|
||||
"karma-webpack": "^2.0.4",
|
||||
"lerna": "^2.9.0",
|
||||
"mocha": "^5.0.0",
|
||||
"npm-run-all": "^4.1.1",
|
||||
"polyserve": "^0.25.3",
|
||||
"webpack": "^3.9.0",
|
||||
"webpack-dev-server": "^2.4.3"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
[
|
||||
"es2015",
|
||||
{
|
||||
"modules": false
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
"transform-object-assign"
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": [
|
||||
"es2015"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
39
packages/all.js
Normal file
39
packages/all.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Copyright 2018 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export {Button} from '@material/mwc-button/mwc-button.js';
|
||||
export {Fab} from '@material/mwc-button/mwc-fab.js';
|
||||
export {Checkbox} from '@material/mwc-checkbox/mwc-checkbox.js';
|
||||
export {Chip} from '@material/mwc-chips/mwc-chip.js';
|
||||
export {ChipSet} from '@material/mwc-chips/mwc-chip-set.js';
|
||||
export {Dialog} from '@material/mwc-dialog/mwc-dialog.js';
|
||||
export {Formfield} from '@material/mwc-formfield/mwc-formfield.js';
|
||||
export {Icon} from '@material/mwc-icon/mwc-icon.js';
|
||||
export {IconToggle} from '@material/mwc-icon-toggle/mwc-icon-toggle.js';
|
||||
export {LinearProgress} from '@material/mwc-linear-progress/mwc-linear-progress.js';
|
||||
export {ListItem} from '@material/mwc-list/mwc-list-item.js';
|
||||
export {Menu} from '@material/mwc-menu/mwc-menu.js';
|
||||
export {Radio} from '@material/mwc-radio/mwc-radio.js';
|
||||
export {Ripple} from '@material/mwc-ripple/mwc-ripple.js';
|
||||
export {RippleSurface} from '@material/mwc-ripple/mwc-ripple-surface.js';
|
||||
export {Select} from '@material/mwc-select/mwc-select.js';
|
||||
export {Slider} from '@material/mwc-slider/mwc-slider.js';
|
||||
export {Snackbar} from '@material/mwc-snackbar/mwc-snackbar.js';
|
||||
export {Switch} from '@material/mwc-switch/mwc-switch.js';
|
||||
export {Tab} from '@material/mwc-tabs/mwc-tab.js';
|
||||
export {TabBar} from '@material/mwc-tabs/mwc-tab-bar.js';
|
||||
export {TabBarScroller} from '@material/mwc-tabs/mwc-tab-bar-scroller.js';
|
||||
export {Textfield} from '@material/mwc-textfield/mwc-textfield.js';
|
||||
63
packages/base/component-element.js
Normal file
63
packages/base/component-element.js
Normal file
@ -0,0 +1,63 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {LitElement, html} from '@polymer/lit-element/lit-element.js';
|
||||
import {afterNextRender} from './utils.js';
|
||||
export {html} from '@polymer/lit-element/lit-element.js';
|
||||
export {MDCWebComponentMixin} from './mdc-web-component.js';
|
||||
|
||||
export class ComponentElement extends LitElement {
|
||||
static get ComponentClass() {
|
||||
throw new Error('Must provide component class');
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
throw new Error('Must provide component selector');
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = false;
|
||||
}
|
||||
|
||||
async ready() {
|
||||
super.ready();
|
||||
if (this._asyncComponent) {
|
||||
await afterNextRender();
|
||||
}
|
||||
this._makeComponent();
|
||||
}
|
||||
|
||||
_makeComponent() {
|
||||
this._componentRoot = this._root.querySelector(this.constructor.componentSelector);
|
||||
this._component = new (this.constructor.ComponentClass)(this._componentRoot);
|
||||
if (this._resolveComponentPromise) {
|
||||
this._resolveComponentPromise(this._component);
|
||||
}
|
||||
}
|
||||
|
||||
componentReady() {
|
||||
if (!this._componentPromise) {
|
||||
this._componentPromise = new Promise((resolve) => {
|
||||
this._resolveComponentPromise = resolve;
|
||||
});
|
||||
if (this._component) {
|
||||
this._resolveComponentPromise(this._component);
|
||||
}
|
||||
}
|
||||
return this._componentPromise;
|
||||
}
|
||||
}
|
||||
53
packages/base/formable-component-element.js
Normal file
53
packages/base/formable-component-element.js
Normal file
@ -0,0 +1,53 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {ComponentElement} from './component-element.js';
|
||||
export {MDCWebComponentMixin, html} from './component-element.js';
|
||||
|
||||
export class FormableComponentElement extends ComponentElement {
|
||||
static get formElementSelector() {
|
||||
return 'input';
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this._formElement = this._root.querySelector(this.constructor.formElementSelector);
|
||||
}
|
||||
|
||||
click() {
|
||||
if (this._formElement) {
|
||||
this._formElement.click();
|
||||
}
|
||||
}
|
||||
|
||||
// TODO(srovell): use delegates focus?
|
||||
focus() {
|
||||
if (this._formElement) {
|
||||
this._formElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
setAriaLabel(value) {
|
||||
if (this._formElement) {
|
||||
this._formElement.setAttribute('aria-label', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
64
packages/base/mdc-web-component.js
Normal file
64
packages/base/mdc-web-component.js
Normal file
@ -0,0 +1,64 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
const hasCustomEventConstructor = typeof CustomEvent === 'function';
|
||||
|
||||
export const MDCWebComponentMixin = (superClass) =>
|
||||
|
||||
class MDCWebComponent extends superClass {
|
||||
get host() {
|
||||
return this._host;
|
||||
}
|
||||
|
||||
// TODO(sorvell): should be changed in MDC
|
||||
get activeElement() {
|
||||
return this.host.getRootNode().activeElement;
|
||||
}
|
||||
|
||||
initialize(...args) {
|
||||
super.initialize(...args);
|
||||
this._host = this.root_.getRootNode().host;
|
||||
}
|
||||
|
||||
// TODO(sorvell): would be nice in MDC
|
||||
createAdapter() {
|
||||
return null;
|
||||
}
|
||||
|
||||
getDefaultFoundation() {
|
||||
const foundation = super.getDefaultFoundation();
|
||||
Object.assign(foundation.adapter_, this.createAdapter());
|
||||
return foundation;
|
||||
}
|
||||
|
||||
// TODO(sorvell): convenient but maybe not best.
|
||||
emit(evtType, evtData, shouldBubble = false) {
|
||||
let evt;
|
||||
if (hasCustomEventConstructor) {
|
||||
evt = new CustomEvent(evtType, {
|
||||
detail: evtData,
|
||||
bubbles: shouldBubble,
|
||||
composed: true,
|
||||
});
|
||||
} else {
|
||||
evt = document.createEvent('CustomEvent');
|
||||
evt.initCustomEvent(evtType, shouldBubble, false, evtData);
|
||||
}
|
||||
|
||||
this.root_.dispatchEvent(evt);
|
||||
}
|
||||
};
|
||||
13
packages/base/package.json
Normal file
13
packages/base/package.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "@material/mwc-base",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
}
|
||||
}
|
||||
165
packages/base/selection-controller.js
Normal file
165
packages/base/selection-controller.js
Normal file
@ -0,0 +1,165 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
export class SelectionController {
|
||||
static getController(element) {
|
||||
const root = element.getRootNode();
|
||||
if (!root.__selectionController) {
|
||||
root.__selectionController = new SelectionController(root);
|
||||
}
|
||||
return root.__selectionController;
|
||||
}
|
||||
|
||||
constructor(node) {
|
||||
node.addEventListener('keydown', (e) => this._keyDownHandler(e));
|
||||
node.addEventListener('mousedown', (e) => this._mousedownHandler(e));
|
||||
node.addEventListener('mouseup', (e) => this._mouseupHandler(e));
|
||||
this._sets = {};
|
||||
this._property = 'checked';
|
||||
}
|
||||
|
||||
_keyDownHandler(e) {
|
||||
this._keyIsDown = true;
|
||||
const element = e.target;
|
||||
if (!this.has(element)) {
|
||||
return;
|
||||
}
|
||||
if (e.key == 'ArrowRight' || e.key == 'ArrowDown') {
|
||||
this.next(element);
|
||||
} else if (e.key == 'ArrowLeft' || e.key == 'ArrowUp') {
|
||||
this.previous(element);
|
||||
}
|
||||
}
|
||||
|
||||
_mousedownHandler(e) {
|
||||
this._mouseIsDown = true;
|
||||
}
|
||||
|
||||
_mouseupHandler(e) {
|
||||
this._mouseIsDown = false;
|
||||
}
|
||||
|
||||
has(element) {
|
||||
const set = this.getSet(element.name);
|
||||
return set.has(element);
|
||||
}
|
||||
|
||||
previous(element) {
|
||||
const order = this.getOrdered(element);
|
||||
const i = order.indexOf(element);
|
||||
this.select(order[i-1] || order[order.length-1]);
|
||||
}
|
||||
|
||||
next(element) {
|
||||
const order = this.getOrdered(element);
|
||||
const i = order.indexOf(element);
|
||||
this.select(order[i+1] || order[0]);
|
||||
}
|
||||
|
||||
select(element) {
|
||||
element.focus();
|
||||
element.click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Helps to track the focused selection group and if it changes, focuses
|
||||
* the selected item in the group. This matches native radio button behavior.
|
||||
* @param {*} event
|
||||
* @param {*} element
|
||||
*/
|
||||
focus(event, element) {
|
||||
// Only manage focus state when using keyboard
|
||||
if (this._mouseIsDown) {
|
||||
return;
|
||||
}
|
||||
cancelAnimationFrame(this._blurRaf);
|
||||
const set = this.getSet(element.name);
|
||||
const currentFocusedSet = this._focusedSet;
|
||||
this._focusedSet = set;
|
||||
if (currentFocusedSet != set && set._selected && set._selected != element) {
|
||||
// TODO(sorvell): needed because MDC Ripple delays focus/blur until RAF.
|
||||
requestAnimationFrame(() =>{
|
||||
set._selected.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helps track the focused selection group by setting it to null asynchronously
|
||||
* on blur if no focus event is received.
|
||||
* @param {*} element
|
||||
*/
|
||||
blur(element) {
|
||||
// Only manage focus state when using keyboard
|
||||
if (this._mouseIsDown) {
|
||||
return;
|
||||
}
|
||||
this._blurRaf = requestAnimationFrame(() => {
|
||||
this._focusedSet = null;
|
||||
});
|
||||
}
|
||||
|
||||
getOrdered(element) {
|
||||
const set = this.getSet(element.name);
|
||||
if (!set._ordered) {
|
||||
set._ordered = [];
|
||||
for (const e of set) {
|
||||
set._ordered.push(e);
|
||||
}
|
||||
set._ordered.sort((a, b) =>
|
||||
a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0
|
||||
);
|
||||
}
|
||||
return set._ordered;
|
||||
}
|
||||
|
||||
getSet(name) {
|
||||
if (!this._sets[name]) {
|
||||
this._sets[name] = new Set();
|
||||
}
|
||||
return this._sets[name];
|
||||
}
|
||||
|
||||
register(element) {
|
||||
const set = this.getSet(element.name);
|
||||
set.add(element);
|
||||
set._ordered = null;
|
||||
}
|
||||
|
||||
unregister(element) {
|
||||
const set = this.getSet(element.name);
|
||||
set.delete(element);
|
||||
set._ordered = null;
|
||||
if (set._selected == element) {
|
||||
set._selected = null;
|
||||
}
|
||||
}
|
||||
|
||||
update(element) {
|
||||
if (this._updating) {
|
||||
return;
|
||||
}
|
||||
this._updating = true;
|
||||
if (element[this._property]) {
|
||||
const set = this.getSet(element.name);
|
||||
for (const e of set) {
|
||||
e[this._property] = (e == element);
|
||||
}
|
||||
set._selected = element;
|
||||
}
|
||||
this._updating = false;
|
||||
}
|
||||
}
|
||||
47
packages/base/utils.js
Normal file
47
packages/base/utils.js
Normal file
@ -0,0 +1,47 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
function isCustomElementCandidate(element) {
|
||||
return element.localName.match('-');
|
||||
}
|
||||
|
||||
export async function callWhenReady(element, method, args) {
|
||||
if (!element[method] && isCustomElementCandidate(element) && !customElements.get(element.localName)) {
|
||||
await customElements.whenDefined(element.localName);
|
||||
}
|
||||
if (element[method]) {
|
||||
element[method](...args);
|
||||
}
|
||||
}
|
||||
|
||||
let afterRenderPromise;
|
||||
export function afterNextRender() {
|
||||
if (!afterRenderPromise) {
|
||||
afterRenderPromise = new Promise((resolve) => {
|
||||
requestAnimationFrame(() => setTimeout(() => {
|
||||
afterRenderPromise = null;
|
||||
resolve();
|
||||
}));
|
||||
});
|
||||
}
|
||||
return afterRenderPromise;
|
||||
}
|
||||
|
||||
export function findAssignedNode(slot, selector) {
|
||||
return slot.assignedNodes({flatten: true}).find((n) => {
|
||||
return (n.nodeType == Node.ELEMENT_NODE) && n.matches(selector);
|
||||
});
|
||||
}
|
||||
20
packages/button/mwc-button-css.js
Normal file
20
packages/button/mwc-button-css.js
Normal file
File diff suppressed because one or more lines are too long
81
packages/button/mwc-button.js
Normal file
81
packages/button/mwc-button.js
Normal file
@ -0,0 +1,81 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {LitElement, html, classString as c$} from '@polymer/lit-element/lit-element.js';
|
||||
import {style} from './mwc-button-css.js';
|
||||
import {MDCWCRipple} from '@material/mwc-ripple/mwc-ripple.js';
|
||||
import {afterNextRender} from '@material/mwc-base/utils.js';
|
||||
import '@material/mwc-icon/mwc-icon-font.js';
|
||||
|
||||
export class Button extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
raised: Boolean,
|
||||
unelevated: Boolean,
|
||||
stroked: Boolean,
|
||||
dense: Boolean,
|
||||
compact: Boolean,
|
||||
disabled: Boolean,
|
||||
icon: String,
|
||||
label: String,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.raised = false;
|
||||
this.unelevated = false;
|
||||
this.stroked = false;
|
||||
this.dense = false;
|
||||
this.compact = false;
|
||||
this.disabled = false;
|
||||
this.icon = '';
|
||||
this.label = '';
|
||||
}
|
||||
|
||||
_createRoot() {
|
||||
return this.attachShadow({mode: 'open', delegatesFocus: true});
|
||||
}
|
||||
|
||||
async ready() {
|
||||
super.ready();
|
||||
await afterNextRender();
|
||||
this._ripple = new MDCWCRipple(this._root.querySelector('.mdc-button'));
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({raised, unelevated, stroked, dense, compact, disabled, icon, label}) {
|
||||
const hostClasses = c$({
|
||||
'mdc-button--raised': raised,
|
||||
'mdc-button--unelevated': unelevated,
|
||||
'mdc-button--stroked': stroked,
|
||||
'mdc-button--dense': dense,
|
||||
'mdc-button--compact': compact,
|
||||
});
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<button class$="mdc-button ${hostClasses}" disabled?="${disabled}">
|
||||
${icon ? html`<span class="material-icons mdc-button__icon">${icon}</span>` : ''}
|
||||
${label || ''}
|
||||
<slot></slot>
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-button', Button);
|
||||
32
packages/button/mwc-button.scss
Normal file
32
packages/button/mwc-button.scss
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import "@material/mwc-icon/mwc-icon.scss";
|
||||
@import "@material/button/mdc-button.scss";
|
||||
|
||||
.material-icons {
|
||||
@extend %material-icons;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: inline-flex;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mdc-button {
|
||||
flex: 1;
|
||||
}
|
||||
21
packages/button/package.json
Normal file
21
packages/button/package.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "@material/mwc-button",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-button.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@material/button": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@material/mwc-ripple": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/card/mwc-card-css.js
Normal file
20
packages/card/mwc-card-css.js
Normal file
File diff suppressed because one or more lines are too long
45
packages/card/mwc-card.js
Normal file
45
packages/card/mwc-card.js
Normal file
@ -0,0 +1,45 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {LitElement, html} from '@polymer/lit-element/lit-element.js';
|
||||
import {style} from './mwc-card-css.js';
|
||||
|
||||
export class Card extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
stroke: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.stroke = false;
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({stroke}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class$="mdc-card ${stroke ? 'mdc-card--stroked' : ''}">
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-card', Card);
|
||||
31
packages/card/mwc-card.scss
Normal file
31
packages/card/mwc-card.scss
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
@import '@material/card/mdc-card.scss';
|
||||
|
||||
// TODO(sorvell): flex for sizing, border inherit
|
||||
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.mdc-card {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
flex: 1;
|
||||
}
|
||||
18
packages/card/package.json
Normal file
18
packages/card/package.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "@material/mwc-card",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-card.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/card": "^0.35.0",
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/checkbox/mwc-checkbox-css.js
Normal file
20
packages/checkbox/mwc-checkbox-css.js
Normal file
File diff suppressed because one or more lines are too long
105
packages/checkbox/mwc-checkbox.js
Normal file
105
packages/checkbox/mwc-checkbox.js
Normal file
@ -0,0 +1,105 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {FormableComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/formable-component-element.js';
|
||||
import {style} from './mwc-checkbox-css.js';
|
||||
import {MDCCheckbox} from '@material/checkbox';
|
||||
|
||||
export class MDCWCCheckbox extends MDCWebComponentMixin(MDCCheckbox) {}
|
||||
|
||||
export class Checkbox extends FormableComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCCheckbox;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-checkbox';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
checked: Boolean,
|
||||
indeterminate: Boolean,
|
||||
disabled: Boolean,
|
||||
value: String,
|
||||
};
|
||||
}
|
||||
|
||||
// TODO(sorvell): need to add delegatesFocus to ShadyDOM. Using it here,
|
||||
// allows tabIndex order to be changed (note, > 0 is dubious but -1 seems useful)
|
||||
_createRoot() {
|
||||
return this.attachShadow({mode: 'open', delegatesFocus: true});
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
this.checked = false;
|
||||
this.indeterminate = false;
|
||||
this.disabled = false;
|
||||
this.value = '';
|
||||
this._boundInputChangeHandler = this._inputChangeHandler.bind(this);
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: add outline none to avoid focus decoration
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({checked, value}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-checkbox">
|
||||
<input type="checkbox"
|
||||
class="mdc-checkbox__native-control"
|
||||
checked="${checked}" value="${value}"
|
||||
on-change="${this._boundInputChangeHandler}">
|
||||
<div class="mdc-checkbox__frame"></div>
|
||||
<div class="mdc-checkbox__background">
|
||||
<svg class="mdc-checkbox__checkmark"
|
||||
viewBox="0 0 24 24">
|
||||
<path class="mdc-checkbox__checkmark-path"
|
||||
fill="none"
|
||||
stroke="white"
|
||||
d="M4.1,12.7 9,17.6 20.3,6.3"></path>
|
||||
</svg>
|
||||
<div class="mdc-checkbox__mixedmark"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
get indeterminate() {
|
||||
return this._component && this._component.indeterminate;
|
||||
}
|
||||
|
||||
set indeterminate(value) {
|
||||
this.componentReady().then((component) => component.indeterminate = value);
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this._component && this._component.disabled;
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
this.componentReady().then((component) => component.disabled = value);
|
||||
}
|
||||
|
||||
_inputChangeHandler(e) {
|
||||
this.checked = e.target.checked;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-checkbox', Checkbox);
|
||||
22
packages/checkbox/mwc-checkbox.scss
Normal file
22
packages/checkbox/mwc-checkbox.scss
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/checkbox/mdc-checkbox.scss';
|
||||
|
||||
:host {
|
||||
outline: none;
|
||||
}
|
||||
19
packages/checkbox/package.json
Normal file
19
packages/checkbox/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@material/mwc-checkbox",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-checkbox.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@material/checkbox": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/chips/mwc-chip-css.js
Normal file
20
packages/chips/mwc-chip-css.js
Normal file
File diff suppressed because one or more lines are too long
20
packages/chips/mwc-chip-set-css.js
Normal file
20
packages/chips/mwc-chip-set-css.js
Normal file
File diff suppressed because one or more lines are too long
78
packages/chips/mwc-chip-set.js
Normal file
78
packages/chips/mwc-chip-set.js
Normal file
@ -0,0 +1,78 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
|
||||
import {classString as c$} from '@polymer/lit-element/lit-element.js';
|
||||
import {style} from './mwc-chip-set-css.js';
|
||||
import {MDCChipSet} from '@material/chips';
|
||||
|
||||
export class MDCWCChipSet extends MDCWebComponentMixin(MDCChipSet) {
|
||||
get chips() {
|
||||
return Array.from(this.host.chips).map((e) => e._component);
|
||||
}
|
||||
|
||||
// override
|
||||
set chips(value) {}
|
||||
}
|
||||
|
||||
export class ChipSet extends ComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCChipSet;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-chip-set';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
type: String,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
this.type = '';
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({type}) {
|
||||
const hostClasses = c$({
|
||||
'mdc-chip-set--choice': type == 'choice',
|
||||
'mdc-chip-set--filter': type == 'filter',
|
||||
});
|
||||
// TODO(sorvell) #css: added display
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class$="mdc-chip-set ${hostClasses}"><slot></slot></div>`;
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this._slot = this.shadowRoot.querySelector('slot');
|
||||
}
|
||||
|
||||
// TODO(sorvell): handle slotchange.
|
||||
get chips() {
|
||||
return this._slot.assignedNodes({flatten: true}).filter((e) => e.localName == 'mdc-chip');
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-chip-set', ChipSet);
|
||||
33
packages/chips/mwc-chip-set.scss
Normal file
33
packages/chips/mwc-chip-set.scss
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/chips/mdc-chips.scss';
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: note, needs SASS changes in MDC
|
||||
.mdc-chip-set {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mdc-chip-set ::slotted(*) {
|
||||
margin: 4px;
|
||||
}
|
||||
83
packages/chips/mwc-chip.js
Normal file
83
packages/chips/mwc-chip.js
Normal file
@ -0,0 +1,83 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
|
||||
import {style} from './mwc-chip-css.js';
|
||||
import {MDCChip} from '@material/chips';
|
||||
import '@material/mwc-icon/mwc-icon-font.js';
|
||||
|
||||
export class MDCWCChip extends MDCWebComponentMixin(MDCChip) {}
|
||||
|
||||
export class Chip extends ComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCChip;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-chip';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
leadingIcon: String,
|
||||
trailingIcon: String,
|
||||
label: String,
|
||||
active: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.leadingIcon = '';
|
||||
this.trailingIcon = '';
|
||||
this.label = '';
|
||||
this.active = false;
|
||||
this._boundInteractionHandler = this._interactionHandler.bind(this);
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
// TODO(sorvell): Note, nice to have vars for activated colors.
|
||||
render({leadingIcon, trailingIcon, label}) {
|
||||
const leadingIconPart = leadingIcon ? html`<i class="material-icons mdc-chip__icon mdc-chip__icon--leading">${leadingIcon}</i>` : '';
|
||||
const trailingIconPart = trailingIcon ? html`<i class="material-icons mdc-chip__icon mdc-chip__icon--trailing">${trailingIcon}</i>` : '';
|
||||
// TODO(sorvell) #css: added display
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class$="mdc-chip ${this.active ? 'mdc-chip--activated' : ''}"
|
||||
on-MDCChip:interaction="${this._boundInteractionHandler}">
|
||||
${leadingIconPart}
|
||||
<div class="mdc-chip__text">${label}</div>
|
||||
${trailingIconPart}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// TODO(sorvell): Prefer being able to set a property for active rather than
|
||||
// having a method. This enables declarative setting.
|
||||
// toggleActive() {
|
||||
// this.componentReady().then((component) => component.toggleActive());
|
||||
// }
|
||||
|
||||
_interactionHandler(e) {
|
||||
requestAnimationFrame(() => {
|
||||
this.active = this._componentRoot.classList.contains('mdc-chip--activated');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-chip', Chip);
|
||||
32
packages/chips/mwc-chip.scss
Normal file
32
packages/chips/mwc-chip.scss
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/chips/mdc-chips.scss';
|
||||
@import '@material/mwc-icon/mwc-icon.scss';
|
||||
|
||||
.material-icons {
|
||||
@extend %material-icons;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mdc-chip.mdc-chip--activated {
|
||||
background-color: var(--mdc-theme-primary, rgba(0, 0, 0, 0.08));
|
||||
color: var(--mdc-theme-text-primary-on-primary, black);
|
||||
}
|
||||
20
packages/chips/package.json
Normal file
20
packages/chips/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "@material/mwc-chips",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-chip.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/chips": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
86
packages/dialog/mdc-dialog.js
Normal file
86
packages/dialog/mdc-dialog.js
Normal file
@ -0,0 +1,86 @@
|
||||
/**
|
||||
* Copyright 2018 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {MDCComponent} from '@material/base/index';
|
||||
import {MDCRipple} from '@material/ripple/index';
|
||||
|
||||
import MDCDialogFoundation from '@material/dialog/foundation';
|
||||
|
||||
export {MDCDialogFoundation};
|
||||
|
||||
export class MDCDialog extends MDCComponent {
|
||||
static attachTo(root) {
|
||||
return new MDCDialog(root);
|
||||
}
|
||||
|
||||
get open() {
|
||||
return this.foundation_.isOpen();
|
||||
}
|
||||
|
||||
get acceptButton_() {
|
||||
return this.root_.querySelector(MDCDialogFoundation.strings.ACCEPT_SELECTOR);
|
||||
}
|
||||
|
||||
get dialogSurface_() {
|
||||
return this.root_.querySelector(MDCDialogFoundation.strings.DIALOG_SURFACE_SELECTOR);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.footerBtnRipples_ = [];
|
||||
|
||||
const footerBtns = this.root_.querySelectorAll('.mdc-dialog__footer__button');
|
||||
for (let i = 0, footerBtn; footerBtn = footerBtns[i]; i++) {
|
||||
this.footerBtnRipples_.push(new MDCRipple(footerBtn));
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.footerBtnRipples_.forEach((ripple) => ripple.destroy());
|
||||
super.destroy();
|
||||
}
|
||||
|
||||
show() {
|
||||
this.foundation_.open();
|
||||
}
|
||||
|
||||
close() {
|
||||
this.foundation_.close();
|
||||
}
|
||||
|
||||
getDefaultFoundation() {
|
||||
return new MDCDialogFoundation({
|
||||
addClass: (className) => this.root_.classList.add(className),
|
||||
removeClass: (className) => this.root_.classList.remove(className),
|
||||
addBodyClass: (className) => document.body.classList.add(className),
|
||||
removeBodyClass: (className) => document.body.classList.remove(className),
|
||||
eventTargetHasClass: (target, className) => target.classList.contains(className),
|
||||
registerInteractionHandler: (evt, handler) => this.root_.addEventListener(evt, handler),
|
||||
deregisterInteractionHandler: (evt, handler) => this.root_.removeEventListener(evt, handler),
|
||||
registerSurfaceInteractionHandler: (evt, handler) => this.dialogSurface_.addEventListener(evt, handler),
|
||||
deregisterSurfaceInteractionHandler: (evt, handler) => this.dialogSurface_.removeEventListener(evt, handler),
|
||||
registerDocumentKeydownHandler: (handler) => document.addEventListener('keydown', handler),
|
||||
deregisterDocumentKeydownHandler: (handler) => document.removeEventListener('keydown', handler),
|
||||
registerTransitionEndHandler: (handler) => this.dialogSurface_.addEventListener('transitionend', handler),
|
||||
deregisterTransitionEndHandler: (handler) => this.dialogSurface_.removeEventListener('transitionend', handler),
|
||||
notifyAccept: () => this.emit(MDCDialogFoundation.strings.ACCEPT_EVENT),
|
||||
notifyCancel: () => this.emit(MDCDialogFoundation.strings.CANCEL_EVENT),
|
||||
trapFocusOnSurface: () => {},
|
||||
untrapFocusOnSurface: () => {},
|
||||
isDialog: (el) => el === this.dialogSurface_,
|
||||
layoutFooterRipples: () => this.footerBtnRipples_.forEach((ripple) => ripple.layout()),
|
||||
});
|
||||
}
|
||||
}
|
||||
20
packages/dialog/mwc-dialog-css.js
Normal file
20
packages/dialog/mwc-dialog-css.js
Normal file
File diff suppressed because one or more lines are too long
135
packages/dialog/mwc-dialog.js
Normal file
135
packages/dialog/mwc-dialog.js
Normal file
@ -0,0 +1,135 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
|
||||
import {MDCDialog} from './mdc-dialog.js';
|
||||
import {style} from './mwc-dialog-css.js';
|
||||
import 'wicg-inert/dist/inert.js';
|
||||
import 'blocking-elements/blocking-elements.js';
|
||||
|
||||
export class MDCWCDialog extends MDCWebComponentMixin(MDCDialog) {
|
||||
createAdapter() {
|
||||
return {
|
||||
trapFocusOnSurface: () => {
|
||||
this.trapFocus(this.acceptButton_);
|
||||
},
|
||||
untrapFocusOnSurface: () => {
|
||||
this.untrapFocus();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
trapFocus(element) {
|
||||
document.$blockingElements.push(this.host);
|
||||
element.focus();
|
||||
}
|
||||
|
||||
untrapFocus() {
|
||||
document.$blockingElements.remove(this.host);
|
||||
}
|
||||
}
|
||||
|
||||
export class Dialog extends ComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCDialog;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-dialog';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
headerLabel: String,
|
||||
acceptLabel: String,
|
||||
declineLabel: String,
|
||||
scrollable: Boolean,
|
||||
opened: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
this.headerLabel = '';
|
||||
this.acceptLabel = 'OK';
|
||||
this.declineLabel = 'Cancel';
|
||||
this.scrollable = false;
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
// TODO(sorvell): DialogFoundation's `isOff` method does not work with Shadow DOM
|
||||
// because it assumes a parentNode is parentElement (thing you can call getComputedStyle on)
|
||||
// TODO(sorvell) #css: added custom property
|
||||
render({headerLabel, acceptLabel, declineLabel, scrollable}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<aside
|
||||
class="mdc-dialog"
|
||||
role="alertdialog"
|
||||
aria-labelledby="my-mdc-dialog-label"
|
||||
aria-describedby="my-mdc-dialog-description">
|
||||
<div class="mdc-dialog__surface">
|
||||
<header class="mdc-dialog__header">
|
||||
<h2 id="my-mdc-dialog-label" class="mdc-dialog__header__title">${headerLabel}</h2>
|
||||
<slot name="header"></slot>
|
||||
</header>
|
||||
<section id="my-mdc-dialog-description" class$="mdc-dialog__body ${scrollable ? 'mdc-dialog__body--scrollable' : ''}">
|
||||
<slot></slot>
|
||||
</section>
|
||||
<footer class="mdc-dialog__footer">
|
||||
<slot name="footer"></slot>
|
||||
<button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">${declineLabel}</button>
|
||||
<button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept">${acceptLabel}</button>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="mdc-dialog__backdrop"></div>
|
||||
</aside>`;
|
||||
}
|
||||
|
||||
get _backDrop() {
|
||||
return this.__backDrop || (this.__backDrop = this._root.querySelector('.mdc-dialog__backdrop'));
|
||||
}
|
||||
|
||||
get opened() {
|
||||
return this._component && this._component.open;
|
||||
}
|
||||
|
||||
set opened(value) {
|
||||
if (value) {
|
||||
this.show();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
this.componentReady().then((component) => {
|
||||
component.show();
|
||||
});
|
||||
}
|
||||
|
||||
close() {
|
||||
this.componentReady().then((component) => {
|
||||
component.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-dialog', Dialog);
|
||||
23
packages/dialog/mwc-dialog.scss
Normal file
23
packages/dialog/mwc-dialog.scss
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/button/mdc-button.scss';
|
||||
@import '@material/dialog/mdc-dialog.scss';
|
||||
|
||||
.mdc-dialog__body--scrollable {
|
||||
max-height: var(--mwc-dialog-maxHeight, 195px);
|
||||
}
|
||||
22
packages/dialog/package.json
Normal file
22
packages/dialog/package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "@material/mwc-dialog",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-dialog.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/dialog": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-button": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0",
|
||||
"blocking-elements": "^0.0.2",
|
||||
"wicg-inert": "^1.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/fab/mwc-fab-css.js
Normal file
20
packages/fab/mwc-fab-css.js
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
|
||||
export const style = html`<style>.material-icons{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface--test-edge-var-bug{--mdc-ripple-surface-test-edge-var: 1px solid #000;visibility:hidden}.mdc-ripple-surface--test-edge-var-bug::before{border:var(--mdc-ripple-surface-test-edge-var)}.mdc-fab{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:transparent;will-change:transform, opacity;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);display:inline-flex;position:relative;justify-content:center;box-sizing:border-box;width:56px;height:56px;padding:0;transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),opacity 15ms linear 30ms,transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);border:none;border-radius:50%;fill:currentColor;cursor:pointer;user-select:none;-moz-appearance:none;-webkit-appearance:none;overflow:hidden;background-color:#018786;color:#fff;color:var(--mdc-theme-on-secondary, #fff)}.mdc-fab::before,.mdc-fab::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-fab::before{transition:opacity 15ms linear;z-index:1}.mdc-fab.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-fab.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-fab.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-fab.mdc-ripple-upgraded--foreground-activation::after{animation:225ms mdc-ripple-fg-radius-in forwards,75ms mdc-ripple-fg-opacity-in forwards}.mdc-fab.mdc-ripple-upgraded--foreground-deactivation::after{animation:150ms mdc-ripple-fg-opacity-out;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-fab::before,.mdc-fab::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-fab.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-fab::-moz-focus-inner{padding:0;border:0}.mdc-fab:hover,.mdc-fab:focus{box-shadow:0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)}.mdc-fab:active{box-shadow:0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)}.mdc-fab:active,.mdc-fab:focus{outline:none}.mdc-fab:hover{cursor:pointer}.mdc-fab>svg{width:100%}@supports not (-ms-ime-align: auto){.mdc-fab{background-color:var(--mdc-theme-secondary, #018786)}}.mdc-fab .mdc-fab__icon{width:24px;height:24px;font-size:24px}.mdc-fab::before,.mdc-fab::after{background-color:#fff}@supports not (-ms-ime-align: auto){.mdc-fab::before,.mdc-fab::after{background-color:var(--mdc-theme-on-secondary, #fff)}}.mdc-fab:hover::before{opacity:.08}.mdc-fab:not(.mdc-ripple-upgraded):focus::before,.mdc-fab.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.24}.mdc-fab:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-fab:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.32}.mdc-fab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: .32}.mdc-fab--mini{width:40px;height:40px}.mdc-fab__icon{margin:auto;transition:transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);fill:currentColor;will-change:transform}.mdc-fab--exited{transform:scale(0);transition:opacity 15ms linear 150ms,transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);opacity:0}.mdc-fab--exited .mdc-fab__icon{transform:scale(0);transition:transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1)}:host{outline:none}
|
||||
</style>`;
|
||||
67
packages/fab/mwc-fab.js
Normal file
67
packages/fab/mwc-fab.js
Normal file
@ -0,0 +1,67 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {LitElement, html, classString as c$} from '@polymer/lit-element/lit-element.js';
|
||||
import {style} from './mwc-fab-css.js';
|
||||
import {MDCWCRipple} from '@material/mwc-ripple/mwc-ripple.js';
|
||||
import {afterNextRender} from '@material/mwc-base/utils.js';
|
||||
import '@material/mwc-icon/mwc-icon-font.js';
|
||||
|
||||
export class Fab extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
mini: Boolean,
|
||||
exited: Boolean,
|
||||
disabled: Boolean,
|
||||
icon: String,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.icon = '';
|
||||
this.mini = false;
|
||||
this.exited = false;
|
||||
}
|
||||
|
||||
_createRoot() {
|
||||
return this.attachShadow({mode: 'open', delegatesFocus: true});
|
||||
}
|
||||
|
||||
async ready() {
|
||||
super.ready();
|
||||
await afterNextRender();
|
||||
this._ripple = new MDCWCRipple(this._root.querySelector('.mdc-fab'));
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({icon, mini, exited, disabled}) {
|
||||
const hostClasses = c$({
|
||||
'mdc-fab--mini': mini,
|
||||
'mdc-fab--exited': exited,
|
||||
});
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<button class$="mdc-fab ${hostClasses}" disabled?="${disabled}" aria-label$="${icon}">
|
||||
${icon ? html`<span class="material-icons mdc-fab__icon">${icon}</span>` : ''}
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-fab', Fab);
|
||||
26
packages/fab/mwc-fab.scss
Normal file
26
packages/fab/mwc-fab.scss
Normal file
@ -0,0 +1,26 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
@import "@material/mwc-icon/mwc-icon.scss";
|
||||
@import "@material/fab/mdc-fab.scss";
|
||||
|
||||
.material-icons {
|
||||
@extend %material-icons;
|
||||
}
|
||||
|
||||
:host {
|
||||
outline: none;
|
||||
}
|
||||
21
packages/fab/package.json
Normal file
21
packages/fab/package.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "@material/mwc-fab",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-fab.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/fab": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@material/mwc-ripple": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/formfield/mwc-formfield-css.js
Normal file
20
packages/formfield/mwc-formfield-css.js
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
|
||||
export const style = html`<style>.mdc-form-field{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;color:rgba(0,0,0,0.87);color:var(--mdc-theme-text-primary-on-background, rgba(0,0,0,0.87));display:inline-flex;align-items:center;vertical-align:middle}.mdc-form-field>label{order:0;margin-right:auto;padding-left:4px}[dir="rtl"] .mdc-form-field>label,.mdc-form-field[dir="rtl"]>label{margin-left:auto;padding-right:4px}.mdc-form-field--align-end>label{order:-1;margin-left:auto;padding-right:4px}[dir="rtl"] .mdc-form-field--align-end>label,.mdc-form-field--align-end[dir="rtl"]>label{margin-right:auto;padding-left:4px}
|
||||
</style>`;
|
||||
87
packages/formfield/mwc-formfield.js
Normal file
87
packages/formfield/mwc-formfield.js
Normal file
@ -0,0 +1,87 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {ComponentElement, html, MDCWebComponentMixin} from '@material/mwc-base/component-element.js';
|
||||
import {callWhenReady, findAssignedNode, afterNextRender} from '@material/mwc-base/utils.js';
|
||||
import {classString as c$} from '@polymer/lit-element/lit-element.js';
|
||||
import {style} from './mwc-formfield-css.js';
|
||||
import {MDCFormField} from '@material/form-field';
|
||||
|
||||
export class MDCWCFormField extends MDCWebComponentMixin(MDCFormField) {};
|
||||
|
||||
|
||||
export class Formfield extends ComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCFormField;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-form-field';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
label: String,
|
||||
alignEnd: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
this.label = '';
|
||||
this.alignEnd = false;
|
||||
this._setProperty('_labelClickHandler', (e) => {
|
||||
this._labelClickHandler(e);
|
||||
});
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({label, alignEnd, _labelClickHandler}) {
|
||||
return html`${this._renderStyle()}
|
||||
<div class$="mdc-form-field ${alignEnd ? 'mdc-form-field--align-end' : ''}">
|
||||
<slot></slot>
|
||||
<label class="mdc-label" on-click="${_labelClickHandler}">${label}</label>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
didRender(props, changed) {
|
||||
if ('label' in changed && this._input) {
|
||||
if (this._input.localName == 'input') {
|
||||
this._input.setAttribute('aria-label', props.label);
|
||||
} else {
|
||||
callWhenReady(this._input, 'setAriaLabel', [props.label]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_labelClickHandler(e) {
|
||||
if (this._input) {
|
||||
this._input.focus();
|
||||
this._input.click();
|
||||
}
|
||||
}
|
||||
|
||||
get _input() {
|
||||
return this.__input = this.__input ||
|
||||
findAssignedNode(this._root.querySelector('slot'), '*');
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-formfield', Formfield);
|
||||
18
packages/formfield/mwc-formfield.scss
Normal file
18
packages/formfield/mwc-formfield.scss
Normal file
@ -0,0 +1,18 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/form-field/mdc-form-field.scss';
|
||||
19
packages/formfield/package.json
Normal file
19
packages/formfield/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@material/mwc-formfield",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-formfield.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/form-field": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/icon-toggle/mwc-icon-toggle-css.js
Normal file
20
packages/icon-toggle/mwc-icon-toggle-css.js
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
|
||||
export const style = html`<style>@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface--test-edge-var-bug{--mdc-ripple-surface-test-edge-var: 1px solid #000;visibility:hidden}.mdc-ripple-surface--test-edge-var-bug::before{border:var(--mdc-ripple-surface-test-edge-var)}.mdc-icon-toggle{--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:transparent;will-change:transform, opacity;color:rgba(0,0,0,0.87);color:var(--mdc-theme-text-primary-on-light, rgba(0,0,0,0.87));display:flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;padding:12px;outline:none;font-size:1.5rem;cursor:pointer;user-select:none;will-change:initial}.mdc-icon-toggle::before,.mdc-icon-toggle::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-icon-toggle::before{transition:opacity 15ms linear;z-index:1}.mdc-icon-toggle.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-toggle.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-toggle.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-icon-toggle.mdc-ripple-upgraded--foreground-activation::after{animation:225ms mdc-ripple-fg-radius-in forwards,75ms mdc-ripple-fg-opacity-in forwards}.mdc-icon-toggle.mdc-ripple-upgraded--foreground-deactivation::after{animation:150ms mdc-ripple-fg-opacity-out;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-toggle::before,.mdc-icon-toggle::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-icon-toggle.mdc-ripple-upgraded::before,.mdc-icon-toggle.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-toggle.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-toggle::before,.mdc-icon-toggle::after{background-color:#000}.mdc-icon-toggle:hover::before{opacity:.04}.mdc-icon-toggle:not(.mdc-ripple-upgraded):focus::before,.mdc-icon-toggle.mdc-ripple-upgraded--background-focused::before{transition-duration:75ms;opacity:.12}.mdc-icon-toggle:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-icon-toggle:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:.16}.mdc-icon-toggle.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: .16}.mdc-icon-toggle::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-icon-toggle--disabled{color:rgba(0,0,0,0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0,0,0,0.38));pointer-events:none}.material-icons{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:inline-block;outline:none}
|
||||
</style>`;
|
||||
98
packages/icon-toggle/mwc-icon-toggle.js
Normal file
98
packages/icon-toggle/mwc-icon-toggle.js
Normal file
@ -0,0 +1,98 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
|
||||
import {style} from './mwc-icon-toggle-css.js';
|
||||
import {MDCIconToggle} from '@material/icon-toggle';
|
||||
import '@material/mwc-icon/mwc-icon-font.js';
|
||||
|
||||
export class MDCWCIconToggle extends MDCWebComponentMixin(MDCIconToggle) {}
|
||||
|
||||
export class IconToggle extends ComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCIconToggle;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-icon-toggle';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
disabled: Boolean,
|
||||
on: Boolean,
|
||||
icon: String,
|
||||
offIcon: String,
|
||||
label: '',
|
||||
offLabel: '',
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
this.icon = '';
|
||||
this.offIcon = '';
|
||||
this.label = '';
|
||||
this.offLabel = '';
|
||||
this.disabled = false;
|
||||
this.on = false;
|
||||
this._boundChangeHandler = this._changeHandler.bind(this);
|
||||
}
|
||||
|
||||
static get formElementSelector() {
|
||||
return '.mdc-icon-toggle';
|
||||
}
|
||||
|
||||
_createRoot() {
|
||||
return this.attachShadow({mode: 'open', delegatesFocus: true});
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: added display
|
||||
render({on, disabled, icon, offIcon, label, offLabel}) {
|
||||
offIcon = offIcon || icon;
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<span class$="mdc-icon-toggle material-icons ${disabled ? 'mdc-icon-toggle--disabled' : ''}"
|
||||
role="button"
|
||||
aria-disabled$="${disabled}"
|
||||
tabindex="0"
|
||||
data-toggle-on$='{"label": "${label}", "content": "${icon}"}'
|
||||
data-toggle-off$='{"label": "${offLabel}", "content": "${offIcon}"}'
|
||||
on-MDCIconToggle:change="${this._boundChangeHandler}">
|
||||
</span>`;
|
||||
}
|
||||
|
||||
didRender(props, changed) {
|
||||
if ('icon' in changed || 'label' in changed ||
|
||||
'offIcon' in changed || 'offLabel' in changed) {
|
||||
this.componentReady().then((component) => component.refreshToggleData());
|
||||
}
|
||||
if ('on' in changed) {
|
||||
this.componentReady().then((component) => component.on = props.on);
|
||||
}
|
||||
}
|
||||
|
||||
_changeHandler(e) {
|
||||
this.on = e.detail.isOn;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-icon-toggle', IconToggle);
|
||||
28
packages/icon-toggle/mwc-icon-toggle.scss
Normal file
28
packages/icon-toggle/mwc-icon-toggle.scss
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/icon-toggle/mdc-icon-toggle.scss';
|
||||
@import '@material/mwc-icon/mwc-icon.scss';
|
||||
|
||||
.material-icons {
|
||||
@extend %material-icons;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
}
|
||||
20
packages/icon-toggle/package.json
Normal file
20
packages/icon-toggle/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "@material/mwc-icon-toggle",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-icon-toggle.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/icon-toggle": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
19
packages/icon/mwc-icon-css.js
Normal file
19
packages/icon/mwc-icon-css.js
Normal file
@ -0,0 +1,19 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
|
||||
export const style = html`<style></style>`;
|
||||
22
packages/icon/mwc-icon-font.js
Normal file
22
packages/icon/mwc-icon-font.js
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// load material icons font
|
||||
const fontEl = document.createElement('link');
|
||||
fontEl.rel = 'stylesheet';
|
||||
fontEl.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
|
||||
document.head.appendChild(fontEl);
|
||||
20
packages/icon/mwc-icon-host-css.js
Normal file
20
packages/icon/mwc-icon-host-css.js
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
|
||||
export const style = html`<style>:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
|
||||
</style>`;
|
||||
21
packages/icon/mwc-icon-host.scss
Normal file
21
packages/icon/mwc-icon-host.scss
Normal file
@ -0,0 +1,21 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
@import "./mwc-icon.scss";
|
||||
|
||||
:host {
|
||||
@extend %material-icons;
|
||||
}
|
||||
30
packages/icon/mwc-icon.js
Normal file
30
packages/icon/mwc-icon.js
Normal file
@ -0,0 +1,30 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {LitElement, html} from '@polymer/lit-element/lit-element.js';
|
||||
import {style} from './mwc-icon-host-css.js';
|
||||
import './mwc-icon-font.js';
|
||||
|
||||
export class Icon extends LitElement {
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
render() {
|
||||
return html`${this._renderStyle()}<slot></slot>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-icon', Icon);
|
||||
31
packages/icon/mwc-icon.scss
Normal file
31
packages/icon/mwc-icon.scss
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
%material-icons {
|
||||
font-family: var(--mdc-icon-font, 'Material Icons');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: var(--mdc-icon-size, 24px);
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
18
packages/icon/package.json
Normal file
18
packages/icon/package.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "@material/mwc-icon",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-icon.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/linear-progress/mwc-linear-progress-css.js
Normal file
20
packages/linear-progress/mwc-linear-progress-css.js
Normal file
File diff suppressed because one or more lines are too long
110
packages/linear-progress/mwc-linear-progress.js
Normal file
110
packages/linear-progress/mwc-linear-progress.js
Normal file
@ -0,0 +1,110 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
|
||||
import {style} from './mwc-linear-progress-css.js';
|
||||
import {MDCLinearProgress} from '@material/linear-progress';
|
||||
|
||||
export class MDCWCLinearProgress extends MDCWebComponentMixin(MDCLinearProgress) {}
|
||||
|
||||
export class LinearProgress extends ComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCLinearProgress;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-linear-progress';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
determinate: Boolean,
|
||||
progress: Number,
|
||||
buffer: Number,
|
||||
reverse: Boolean,
|
||||
closed: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
this.determinate = false;
|
||||
this.progress = 0;
|
||||
this.buffer = 0;
|
||||
this.reverse = false;
|
||||
this.closed = false;
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div role="progressbar" class="mdc-linear-progress">
|
||||
<div class="mdc-linear-progress__buffering-dots"></div>
|
||||
<div class="mdc-linear-progress__buffer"></div>
|
||||
<div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
|
||||
<span class="mdc-linear-progress__bar-inner"></span>
|
||||
</div>
|
||||
<div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
|
||||
<span class="mdc-linear-progress__bar-inner"></span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async didRender(props, changed, old) {
|
||||
if ('determinate' in changed) {
|
||||
await this.componentReady();
|
||||
this._component.determinate = props.determinate;
|
||||
}
|
||||
if ('progress' in changed) {
|
||||
await this.componentReady();
|
||||
this._component.progress = props.progress;
|
||||
}
|
||||
if ('buffer' in changed) {
|
||||
await this.componentReady();
|
||||
this._component.buffer = props.buffer;
|
||||
}
|
||||
if ('reverse' in changed) {
|
||||
await this.componentReady();
|
||||
this._component.reverse = props.reverse;
|
||||
}
|
||||
if ('closed' in changed) {
|
||||
if (props.closed) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
open() {
|
||||
this.componentReady().then((component) => {
|
||||
component.open();
|
||||
});
|
||||
}
|
||||
|
||||
close() {
|
||||
this.componentReady().then((component) => {
|
||||
component.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-linear-progress', LinearProgress);
|
||||
30
packages/linear-progress/mwc-linear-progress.scss
Normal file
30
packages/linear-progress/mwc-linear-progress.scss
Normal file
@ -0,0 +1,30 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
@import '@material/linear-progress/mdc-linear-progress.scss';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: demo styles inner nodes via descendant selector.
|
||||
// putting in custom properties as a stand in.
|
||||
.mdc-linear-progress__buffer {
|
||||
background-color: var(--mdc-theme-secondary, #e6e6e6);
|
||||
}
|
||||
.mdc-linear-progress__buffering-dots {
|
||||
background-image: var(--mdc-linear-progress-buffering-dots-image, url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E"));
|
||||
}
|
||||
19
packages/linear-progress/package.json
Normal file
19
packages/linear-progress/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@material/mwc-linear-progress",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-linear-progress.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/linear-progress": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/list/mwc-list-item-css.js
Normal file
20
packages/list/mwc-list-item-css.js
Normal file
File diff suppressed because one or more lines are too long
20
packages/list/mwc-list-item-separator-css.js
Normal file
20
packages/list/mwc-list-item-separator-css.js
Normal file
File diff suppressed because one or more lines are too long
32
packages/list/mwc-list-item-separator.js
Normal file
32
packages/list/mwc-list-item-separator.js
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {LitElement, html, classString as c$} from '@polymer/lit-element/lit-element.js';
|
||||
import {style} from './mwc-list-item-separator-css.js';
|
||||
|
||||
export class ListItemSeparator extends LitElement {
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
${style}
|
||||
<div class="mdc-list-divider" role="separator"></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-list-item-separator', ListItemSeparator);
|
||||
18
packages/list/mwc-list-item-separator.scss
Normal file
18
packages/list/mwc-list-item-separator.scss
Normal file
@ -0,0 +1,18 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/list/mdc-list.scss';
|
||||
67
packages/list/mwc-list-item.js
Normal file
67
packages/list/mwc-list-item.js
Normal file
@ -0,0 +1,67 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {LitElement, html, classString as c$, renderAttributes} from '@polymer/lit-element/lit-element.js';
|
||||
import {style} from './mwc-list-item-css.js';
|
||||
import '@material/mwc-icon/mwc-icon-font.js';
|
||||
|
||||
export class ListItem extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
label: String,
|
||||
icon: String,
|
||||
disabled: Boolean,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.label = '';
|
||||
this.icon = '';
|
||||
this.disabled = false;
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
// TODO(sorvell) #css: add styling for disabled.
|
||||
render({label, icon, disabled}) {
|
||||
renderAttributes(this, {'aria-disabled': disabled ? 'true' : null});
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-list-item" role="menuitem" tabindex="0" aria-disabled$="${disabled}">
|
||||
${icon ? html`<span class="material-icons">${icon}</span>` : ''}
|
||||
${label || ''}
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this._listItem = this._root.querySelector('.mdc-list-item');
|
||||
}
|
||||
|
||||
get listItem() {
|
||||
return this._listItem;
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.listItem.focus();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-list-item', ListItem);
|
||||
27
packages/list/mwc-list-item.scss
Normal file
27
packages/list/mwc-list-item.scss
Normal file
@ -0,0 +1,27 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/list/mdc-list.scss';
|
||||
@import '@material/mwc-icon/mwc-icon.scss';
|
||||
|
||||
.material-icons {
|
||||
@extend %material-icons;
|
||||
}
|
||||
|
||||
:host([aria-disabled="true"]) > .mdc-list-item:focus::before {
|
||||
opacity: 0;
|
||||
}
|
||||
19
packages/list/package.json
Normal file
19
packages/list/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "@material/mwc-list",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-list-item.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/mwc-icon": "^0.1.0",
|
||||
"@material/list": "^0.35.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1"
|
||||
}
|
||||
}
|
||||
20
packages/menu/mwc-menu-css-temp.js
Normal file
20
packages/menu/mwc-menu-css-temp.js
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
|
||||
export const style = html`<style>.mdc-menu{box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);background-color:#fff;background-color:var(--mdc-theme-background, #fff);display:none;position:absolute;box-sizing:border-box;min-width:170px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);margin:0;padding:0;transform:scale(1);transform-origin:top left;border-radius:2px;opacity:0;white-space:nowrap;overflow-x:hidden;overflow-y:auto;will-change:transform, opacity;z-index:4}.mdc-menu:focus{outline:none}.mdc-menu--animating-open{display:inline-block;transform:scale(0.8);transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1);opacity:0;overflow-y:hidden}.mdc-menu--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu--animating-closed{display:inline-block;transition:opacity .075s linear;opacity:0;overflow-y:hidden}.mdc-menu__items{box-sizing:border-box;transform:scale(1);overflow-x:hidden;overflow-y:auto;will-change:transform}.mdc-menu__items>.mdc-list-item{cursor:pointer}.mdc-menu--animating .mdc-menu__items{overflow-y:hidden}.mdc-menu--animating-open>.mdc-menu__items{transform:scale(1.25)}.mdc-menu--open>.mdc-menu__items{transform:scale(1)}[dir="rtl"] .mdc-menu{transform-origin:top right}.mdc-menu .mdc-list-group,.mdc-menu .mdc-list{padding:8px 0}.mdc-menu .mdc-list-item{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1rem;line-height:1.75rem;font-weight:400;letter-spacing:.04em;text-decoration:inherit;text-transform:inherit;position:relative;outline:none;color:inherit;text-decoration:none;user-select:none}.mdc-menu .mdc-list-item__graphic{color:rgba(0,0,0,0.54);color:var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.54))}.mdc-menu .mdc-list-item[aria-disabled="true"]{color:rgba(0,0,0,0.38);color:var(--mdc-theme-text-disabled-on-background, rgba(0,0,0,0.38));cursor:default;pointer-events:none}.mdc-menu .mdc-list-item[aria-disabled="true"]:focus::before{opacity:0}.mdc-menu-anchor{position:relative;overflow:visible}.mdc-menu__items ::slotted(*){cursor:pointer;font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1rem;line-height:1.75rem;font-weight:400;letter-spacing:.04em;text-decoration:inherit;text-transform:inherit;position:relative;outline:none;color:inherit;text-decoration:none;user-select:none}.mdc-menu ::slotted([aria-disabled="true"]){color:rgba(0,0,0,0.38);color:var(--mdc-theme-text-disabled-on-background, rgba(0,0,0,0.38));cursor:default;pointer-events:none}.mdc-menu ::slotted([aria-disabled="true"]):focus::before{opacity:0}.mdc-menu ::slotted([graphic]){color:rgba(0,0,0,0.54);color:var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.54))}
|
||||
</style>`;
|
||||
20
packages/menu/mwc-menu-css.js
Normal file
20
packages/menu/mwc-menu-css.js
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {html} from '@polymer/lit-element/lit-element.js';
|
||||
|
||||
export const style = html`<style>.mdc-menu{box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);background-color:#fff;background-color:var(--mdc-theme-background, #fff);display:none;position:absolute;box-sizing:border-box;min-width:170px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);margin:0;padding:0;transform:scale(1);transform-origin:top left;border-radius:2px;opacity:0;white-space:nowrap;overflow-x:hidden;overflow-y:auto;will-change:transform, opacity;z-index:4}.mdc-menu:focus{outline:none}.mdc-menu--animating-open{display:inline-block;transform:scale(0.8);transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1);opacity:0;overflow-y:hidden}.mdc-menu--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu--animating-closed{display:inline-block;transition:opacity .075s linear;opacity:0;overflow-y:hidden}.mdc-menu__items{box-sizing:border-box;transform:scale(1);overflow-x:hidden;overflow-y:auto;will-change:transform}.mdc-menu__items>.mdc-list-item{cursor:pointer}.mdc-menu--animating .mdc-menu__items{overflow-y:hidden}.mdc-menu--animating-open>.mdc-menu__items{transform:scale(1.25)}.mdc-menu--open>.mdc-menu__items{transform:scale(1)}[dir="rtl"] .mdc-menu{transform-origin:top right}.mdc-menu .mdc-list-group,.mdc-menu .mdc-list{padding:8px 0}.mdc-menu .mdc-list-item{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1rem;line-height:1.75rem;font-weight:400;letter-spacing:.00937em;text-decoration:inherit;text-transform:inherit;position:relative;outline:none;color:inherit;text-decoration:none;user-select:none}.mdc-menu .mdc-list-item__graphic{color:rgba(0,0,0,0.54);color:var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.54))}.mdc-menu .mdc-list-item[aria-disabled="true"]{color:rgba(0,0,0,0.38);color:var(--mdc-theme-text-disabled-on-background, rgba(0,0,0,0.38));cursor:default;pointer-events:none}.mdc-menu .mdc-list-item[aria-disabled="true"]:focus::before{opacity:0}.mdc-menu-anchor{position:relative;overflow:visible}.mdc-menu__items ::slotted(*){cursor:pointer;font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1rem;line-height:1.75rem;font-weight:400;letter-spacing:.00937em;text-decoration:inherit;text-transform:inherit;position:relative;outline:none;color:inherit;text-decoration:none;user-select:none}.mdc-menu ::slotted([aria-disabled="true"]){color:rgba(0,0,0,0.38);color:var(--mdc-theme-text-disabled-on-background, rgba(0,0,0,0.38));cursor:default;pointer-events:none}.mdc-menu ::slotted([aria-disabled="true"]):focus::before{opacity:0}.mdc-menu ::slotted([graphic]){color:rgba(0,0,0,0.54);color:var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.54))}
|
||||
</style>`;
|
||||
178
packages/menu/mwc-menu.js
Normal file
178
packages/menu/mwc-menu.js
Normal file
@ -0,0 +1,178 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {ComponentElement, html, MDCWebComponentMixin} from '@material/mwc-base/component-element.js';
|
||||
import {MDCMenu, Corner} from '@material/menu';
|
||||
import {style} from './mwc-menu-css.js';
|
||||
|
||||
// this element depend on the `mwc-list-item` and `mwc-list-item-separator`
|
||||
// elements to be registered ahead of time
|
||||
import '@material/mwc-list/mwc-list-item.js';
|
||||
import '@material/mwc-list/mwc-list-item-separator.js';
|
||||
|
||||
export class MDCWCMenu extends MDCWebComponentMixin(MDCMenu) {
|
||||
get items() {
|
||||
return this.host.items;
|
||||
}
|
||||
|
||||
get listItems() {
|
||||
return this.items.map((e) => e.listItem);
|
||||
}
|
||||
|
||||
get anchor() {
|
||||
const parent = this.host.parentNode;
|
||||
if (parent.matches('mdc-menu-anchor')) {
|
||||
return parent;
|
||||
}
|
||||
}
|
||||
|
||||
createAdapter() {
|
||||
return {
|
||||
hasAnchor: () => this.anchor,
|
||||
getAnchorDimensions: () => this.anchor.getBoundingClientRect(),
|
||||
isFocused: () => this.activeElement === this.host,
|
||||
getFocusedItemIndex: () => this.items.indexOf(this.activeElement),
|
||||
setAttrForOptionAtIndex: (index, attr, value) => this.listItems[index].setAttribute(attr, value),
|
||||
rmAttrForOptionAtIndex: (index, attr) => this.listItems[index].removeAttribute(attr),
|
||||
addClassForOptionAtIndex: (index, className) => this.listItems[index].classList.add(className),
|
||||
rmClassForOptionAtIndex: (index, className) => this.listItems[index].classList.remove(className),
|
||||
// TODO(sorvell): this is only used for disable-ment and we want this to come off of
|
||||
// the wrapped list item. This would be easier if there was an explicit `isItemDisabled`.
|
||||
getAttributeForEventTarget: (target, attr) => {
|
||||
target = target.listItem || target;
|
||||
return target.getAttribute(attr);
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class Menu extends ComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCMenu;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-menu';
|
||||
}
|
||||
|
||||
get Corner() {
|
||||
return Corner;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-menu" tabindex="-1">
|
||||
<div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
get items() {
|
||||
return this.shadowRoot.querySelector('slot').assignedNodes({flatten: true})
|
||||
.filter((e) => e.localName == 'mwc-list-item');
|
||||
}
|
||||
|
||||
get open() {
|
||||
return this._component && this._component.open;
|
||||
}
|
||||
|
||||
/** @param {boolean} value */
|
||||
set open(value) {
|
||||
this.componentReady().then((component) => {
|
||||
component.open = value;
|
||||
});
|
||||
}
|
||||
|
||||
/** @param {{focusIndex: ?number}=} options */
|
||||
show({focusIndex = null} = {}) {
|
||||
this.componentReady().then((component) => {
|
||||
component.open({focusIndex: focusIndex});
|
||||
});
|
||||
}
|
||||
|
||||
close() {
|
||||
this.componentReady().then((component) => {
|
||||
component.close();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Corner} corner Default anchor corner alignment of top-left
|
||||
* menu corner.
|
||||
*/
|
||||
setAnchorCorner(corner) {
|
||||
this.componentReady().then((component) => {
|
||||
component.setAnchorCorner(corner);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {AnchorMargin} margin
|
||||
*/
|
||||
setAnchorMargin(margin) {
|
||||
this.componentReady().then((component) => {
|
||||
component.setAnchorMargin(margin);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the item within the menu that is selected.
|
||||
* @param {number} index
|
||||
* @return {?Element}
|
||||
*/
|
||||
getOptionByIndex(index) {
|
||||
return this._component && this._component.getOptionByIndex(index);
|
||||
}
|
||||
|
||||
/** @param {number} index */
|
||||
set selectedItemIndex(index) {
|
||||
this.componentReady().then((component) => {
|
||||
component.setSelectedIndex(index);
|
||||
});
|
||||
}
|
||||
|
||||
/** @return {number} */
|
||||
get selectedItemIndex() {
|
||||
return this._component && this._component.getSelectedIndex();
|
||||
}
|
||||
|
||||
/** @param {!boolean} rememberSelection */
|
||||
set rememberSelection(rememberSelection) {
|
||||
this.componentReady().then((component) => {
|
||||
component.setRememberSelection(rememberSelection);
|
||||
});
|
||||
}
|
||||
|
||||
/** @param {boolean} quickOpen */
|
||||
set quickOpen(quickOpen) {
|
||||
this.componentReady().then((component) => {
|
||||
component.setQuickOpen(quickOpen);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-menu', Menu);
|
||||
68
packages/menu/mwc-menu.scss
Normal file
68
packages/menu/mwc-menu.scss
Normal file
@ -0,0 +1,68 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@material/menu/mdc-menu.scss';
|
||||
|
||||
// TODO(sorvell) #css: NOTE, these selectors are intended to target elements inside
|
||||
// the shadowRoot of the `mdc-list-item` element which won't work. However,
|
||||
// practically, this isn't a problem here because the styling is inherited properties.
|
||||
// Note also, skeezed this for `disabled`.
|
||||
/*
|
||||
|
||||
old:
|
||||
.mdc-menu
|
||||
.mdc-menu__items
|
||||
.mdc-list-item
|
||||
|
||||
new:
|
||||
<mdc-menu>
|
||||
#shadowRoot
|
||||
.mdc-menu__items
|
||||
slot
|
||||
<mdc-list-item>
|
||||
#shadowRoot
|
||||
.mdc-list-item
|
||||
*/
|
||||
|
||||
// TODO(sorvell) #css: note, needs SASS changes in MDC
|
||||
.mdc-menu__items ::slotted(*) {
|
||||
cursor: pointer;
|
||||
// TODO(dfreedm): use `subtitle1` when MDC revs
|
||||
@include mdc-typography(subtitle1);
|
||||
// @include mdc-typography(subheading2);
|
||||
|
||||
position: relative;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mdc-menu ::slotted([aria-disabled="true"]) {
|
||||
@include mdc-theme-prop(color, text-disabled-on-background);
|
||||
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
||||
&:focus::before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-menu ::slotted([graphic]) {
|
||||
@include mdc-theme-prop(color, text-secondary-on-background);
|
||||
}
|
||||
21
packages/menu/package.json
Normal file
21
packages/menu/package.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "@material/mwc-menu",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"main": "mwc-menu.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@material/menu": "^0.35.0",
|
||||
"@material/mwc-base": "^0.1.0",
|
||||
"@material/mwc-list": "^0.1.0",
|
||||
"@polymer/lit-element": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material/mwc-sass-render": "^0.0.1",
|
||||
"@material/typography": "^0.35.0"
|
||||
}
|
||||
}
|
||||
20
packages/radio/mwc-radio-css.js
Normal file
20
packages/radio/mwc-radio-css.js
Normal file
File diff suppressed because one or more lines are too long
132
packages/radio/mwc-radio.js
Normal file
132
packages/radio/mwc-radio.js
Normal file
@ -0,0 +1,132 @@
|
||||
/**
|
||||
@license
|
||||
Copyright 2018 Google Inc. All Rights Reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {FormableComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/formable-component-element.js';
|
||||
import {style} from './mwc-radio-css.js';
|
||||
import {SelectionController} from '@material/mwc-base/selection-controller.js';
|
||||
import {MDCRadio} from '@material/radio';
|
||||
|
||||
export class MDCWCRadio extends MDCWebComponentMixin(MDCRadio) {}
|
||||
|
||||
export class Radio extends FormableComponentElement {
|
||||
static get ComponentClass() {
|
||||
return MDCWCRadio;
|
||||
}
|
||||
|
||||
static get componentSelector() {
|
||||
return '.mdc-radio';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
checked: Boolean,
|
||||
disabled: Boolean,
|
||||
value: String,
|
||||
name: String,
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._asyncComponent = true;
|
||||
this.checked = false;
|
||||
this.disabled = false;
|
||||
this.name = '';
|
||||
this.value = '';
|
||||
this._boundInputChangeHandler = this._inputChangeHandler.bind(this);
|
||||
this._boundInputFocusHandler = this._inputFocusHandler.bind(this);
|
||||
this._boundInputBlurHandler = this._inputBlurHandler.bind(this);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._selectionController = SelectionController.getController(this);
|
||||
this._selectionController.register(this);
|
||||
this._selectionController.update(this);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._selectionController.unregister(this);
|
||||
}
|
||||
|
||||
_renderStyle() {
|
||||
return style;
|
||||
}
|
||||
|
||||
render({checked, value, name}) {
|
||||
return html`
|
||||
${this._renderStyle()}
|
||||
<div class="mdc-radio">
|
||||
<input class="mdc-radio__native-control" type="radio"
|
||||
checked="${checked}" name="${name}" value="${value}"
|
||||
on-change="${this._boundInputChangeHandler}"
|
||||
on-focus="${this._boundInputFocusHandler}"
|
||||
on-blur="${this._boundInputBlurHandler}">
|
||||
<div class="mdc-radio__background">
|
||||
<div class="mdc-radio__outer-circle"></div>
|
||||
<div class="mdc-radio__inner-circle"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this._component && this._component.disabled;
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
this.componentReady().then((component) => component.disabled = value);
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this._getProperty('checked');
|
||||
}
|
||||
|
||||
set checked(value) {
|
||||
this._setProperty('checked', value);
|
||||
if (this._selectionController) {
|
||||
this._selectionController.update(this);
|
||||
}
|
||||
}
|
||||
|
||||
_inputChangeHandler(e) {
|
||||
this.checked = e.target.checked;
|
||||
}
|
||||
|
||||
_inputFocusHandler(e) {
|
||||
this._selectionController.focus(e, this);
|
||||
}
|
||||
|
||||
_inputBlurHandler(e) {
|
||||
this._selectionController.blur(this);
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this._getProperty('name');
|
||||
}
|
||||
|
||||
set name(value) {
|
||||
if (this._selectionController) {
|
||||
this._selectionController.unregister(this);
|
||||
}
|
||||
this._setProperty('name', value);
|
||||
if (this._selectionController) {
|
||||
this._selectionController.register(this);
|
||||
this._selectionController.update(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('mwc-radio', Radio);
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user