[
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\nindent_style = tab\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[{package.json,.*rc,*.yml}]\nindent_style = space\nindent_size = 2\n\n[*.md]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".eslintignore",
    "content": "*.md\n*.conf.js\n"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"parser\": \"babel-eslint\",\n  \"extends\": \"eslint:recommended\",\n  \"plugins\": [\n    \"react\"\n  ],\n  \"env\": {\n    \"browser\": true,\n    \"mocha\": true,\n    \"es6\": true\n  },\n  \"parserOptions\": {\n    \"ecmaFeatures\": {\n      \"modules\": true,\n      \"jsx\": true\n    }\n  },\n  \"globals\": {\n    \"sinon\": true,\n    \"expect\": true\n  },\n  \"rules\": {\n    \"react/jsx-uses-react\": 2,\n    \"react/jsx-uses-vars\": 2,\n    \"no-empty\": 0,\n    \"no-console\": 0,\n    \"no-unused-vars\": [0, { \"varsIgnorePattern\": \"^h$\" }],\n    \"no-cond-assign\": 1,\n    \"semi\": 2,\n    \"camelcase\": 0,\n    \"comma-style\": 2,\n    \"comma-dangle\": [2, \"never\"],\n    \"indent\": [2, \"tab\", {\"SwitchCase\": 1}],\n    \"no-mixed-spaces-and-tabs\": [2, \"smart-tabs\"],\n    \"no-trailing-spaces\": [2, { \"skipBlankLines\": true }],\n    \"max-nested-callbacks\": [2, 3],\n    \"no-eval\": 2,\n    \"no-implied-eval\": 2,\n    \"no-new-func\": 2,\n    \"guard-for-in\": 2,\n    \"eqeqeq\": 2,\n    \"no-else-return\": 2,\n    \"no-redeclare\": 2,\n    \"no-dupe-keys\": 2,\n    \"radix\": 2,\n    \"strict\": [2, \"never\"],\n    \"no-shadow\": 0,\n    \"callback-return\": [1, [\"callback\", \"cb\", \"next\", \"done\"]],\n    \"no-delete-var\": 2,\n    \"no-undef-init\": 2,\n    \"no-shadow-restricted-names\": 2,\n    \"handle-callback-err\": 0,\n    \"no-lonely-if\": 2,\n    \"keyword-spacing\": 2,\n    \"constructor-super\": 2,\n    \"no-this-before-super\": 2,\n    \"no-dupe-class-members\": 2,\n    \"no-const-assign\": 2,\n    \"prefer-spread\": 2,\n    \"no-useless-concat\": 2,\n    \"no-var\": 2,\n    \"object-shorthand\": 2,\n    \"prefer-arrow-callback\": 2\n  }\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "/dist\n/node_modules\n/npm-debug.log\n.DS_Store\n"
  },
  {
    "path": ".npmignore",
    "content": ".eslintrc\n"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\nnode_js:\n  - 4\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Jason Miller\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# preact-mdl\n\n[![NPM](http://img.shields.io/npm/v/preact-mdl.svg)](https://www.npmjs.com/package/preact-mdl)\n[![travis-ci](https://travis-ci.org/developit/preact-mdl.svg?branch=master)](https://travis-ci.org/developit/preact-mdl)\n\nA collection of [Preact] Components that encapsulate Google's [Material Design Lite].\n\n## Quick Start\n\n[![Edit Preact Material Design](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6w66jzw3mn)\n\nGrab the App Skeleton from [JSFiddle](https://jsfiddle.net/developit/weq28uq3/), [Codepen](https://codepen.io/alexkrolick/project/editor/ANGjjr), or [Code Sandbox](https://codesandbox.io/s/6w66jzw3mn)\n\n**Using TypeScript?** [preact-mdl-example](https://github.com/tbekolay/preact-mdl-example) is an instant full project setup.\n\n\n## [Documentation](docs.md)\n\n\n## Installation\n\n```sh\nnpm install --save material-design-lite preact-mdl\n```\n\n## What does it look like?\n\nSee for yourself - `preact-mdl` powers [ESBench](http://esbench.com) and [Nectarine](http://nectarine.rocks).\n\n_Here's some live-action demos:_\n\n<img src=\"https://i.gyazo.com/d6db6fedde6734bcc8450a4c16611704.gif\" width=\"319\" />\n<img src=\"https://i.gyazo.com/892ba9ed1e0c43bd024078d650c01ce4.gif\" width=\"199\" />\n\n<img src=\"https://i.gyazo.com/352cc02ba18a811ee36a8a4837688023.gif\" width=\"254\" />\n<img src=\"https://i.imgur.com/I6RDmBm.gif\" width=\"122\" />\n<img src=\"https://i.gyazo.com/70724d88b290ff47c793cf6f9ddc13f1.gif\" width=\"107\" />\n\n\n---\n\n\n## Usage\n\n* Add MDL stylesheets to your html\n```html \n<!DOCTYPE html>\n<html style=\"height: 100%; width: 100%;\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=viewport content=\"width=device-width, initial-scale=1\">\n    <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n    <link rel=\"stylesheet\" href=\"https://code.getmdl.io/1.2.1/material.indigo-pink.min.css\">\n    <title>Preact-mdl Example</title>\n</head>\n<body style=\"height: 100%; width: 100%;\">\n  <script src=\"/bundle.js\"></script>\n</body>\n</html>\n```\n\n* Import mdl module and components from preact-mdl\n\n```JavaScript\nimport { h, Component } from 'preact';\nimport mdl from 'material-design-lite/material';\nimport { Button } from 'preact-mdl';\n\nexport default class MyButton extends Component {\n  render() {\n    return(\n      <div>\n        <Button>I am button!</Button>\n      </div>\n    )\n  }\n}\n\n```\n\n## Demos\n\nFor now, browse these Open Source projects using `preact-mdl`:\n\n- **[Documentation Viewer](https://github.com/developit/documentation-viewer/)**\n- **[Nectarine.rocks](https://github.com/developit/nectarine.rocks/)**\n- **[Preact Simple Starter](https://github.com/ooade/PreactSimpleStarter)**\n- _[add yours!](https://github.com/developit/preact-mdl/issues)_\n\n\n---\n\n\n### License\n\n[MIT]\n\n\n[Material Design Lite]: http://www.getmdl.io\n[Preact]: https://github.com/developit/preact\n[MIT]: http://choosealicense.com/licenses/mit/\n"
  },
  {
    "path": "docs.md",
    "content": "<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Icon](#icon)\n-   [Button](#button)\n-   [Card](#card)\n-   [Dialog](#dialog)\n-   [Layout](#layout)\n-   [Layout](#layout-1)\n-   [LayoutHeader](#layoutheader)\n-   [LayoutTab](#layouttab)\n-   [LayoutTabPanel](#layouttabpanel)\n-   [Navigation](#navigation)\n-   [Grid](#grid)\n-   [Progress](#progress)\n-   [Spinner](#spinner)\n-   [Menu](#menu)\n-   [MenuItem](#menuitem)\n-   [Slider](#slider)\n-   [Snackbar](#snackbar)\n-   [CheckBox](#checkbox)\n-   [Radio](#radio)\n-   [IconToggle](#icontoggle)\n-   [Switch](#switch)\n-   [Table](#table)\n-   [TableCell](#tablecell)\n-   [ListItem](#listitem)\n-   [TextField](#textfield)\n-   [Tooltip](#tooltip)\n\n## Icon\n\n**Extends MaterialComponent**\n\nAn Icon in the Material Icons font. Note that you must include the font, usually by Google Fonts\n\n**Parameters**\n\n-   `icon`  The icon to render. Can also be specified in the Icon text\n\n**Examples**\n\n```javascript\n<Icon icon=\"menu\" />\n```\n\n```javascript\n<Icon>menu</Icon>\n```\n\n## Button\n\n**Extends MaterialComponent**\n\nA material button\n\n**Parameters**\n\n-   `primary`  = false\n-   `accent`  = false\n-   `colored`  = false\n-   `raised`  = false\n-   `icon`  = false\n-   `fab`  = false\n-   `mini-fab`  = false\n-   `disabled`  = false\n\n**Examples**\n\n```javascript\n<Button onClick={this.handleClick}>Hello World</Button>\n```\n\n## Card\n\n**Extends MaterialComponent**\n\nCards are how you represent blocks of infomation. From the Material Design Specifications: A card is a sheet of material that serves as an entry point to more detailed information.\nTODO: example\n\n## Dialog\n\n**Extends MaterialComponent**\n\nDialogs\n\n## Layout\n\n**Extends MaterialComponent**\n\nUse a layout to specify how your app will use some of material's aspects. Your app should reside in this component. If you want a fixed header, drawer, or tabs, specify them here.\n\n**Parameters**\n\n-   `fixed-header`  = false\n-   `fixed-drawer`  = false\n-   `overlay-drawer-button`  = false\n-   `fixed-tabs`  = false\n\n**Examples**\n\n```javascript\n<Layout fixed-header>\n\t<Layout.Header>\n     ...\n\t</Layout.Header>\n\t...\n </Layout>\n```\n\n## Layout\n\n**Extends MaterialComponent**\n\nLayouts\n\n## LayoutHeader\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `waterfall`  = false\n-   `scroll`  = false\n\n## LayoutTab\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `active`  \n\n## LayoutTabPanel\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `active`  \n\n## Navigation\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `large-screen-only`  = false\n\n## Grid\n\n**Extends MaterialComponent**\n\nResponsive Grid\n\n**Parameters**\n\n-   `no-spacing`  = false\n\n## Progress\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `indeterminate`  = false\n\n## Spinner\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `active`  = false\n-   `single-color`  = false\n\n## Menu\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `bottom-left`  = true\n-   `bottom-right`  = false\n-   `top-left`  = false\n-   `top-right`  = false\n\n## MenuItem\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `disabled`  = false\n\n## Slider\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `min`  = 0\n-   `max`  = 100\n-   `value`  = 0\n-   `tabindex`  = 0\n-   `disabled`  = false\n\n## Snackbar\n\n**Extends MaterialComponent**\n\nSnackbar\n\n## CheckBox\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `checked`  = false\n-   `disabled`  = false\n\n## Radio\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `name`  (required)\n-   `value`  (required)\n-   `checked`  = false\n-   `disabled`  = false\n\n## IconToggle\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `checked`  = false\n-   `disabled`  = false\n\n## Switch\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `checked`  = false\n-   `disabled`  = false\n\n## Table\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `selectable`  = false\n\n## TableCell\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `non-numeric`  = false\n\n## ListItem\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `two-line`  = false\n-   `three-line`  = false\n\n## TextField\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `args` **...any** \n-   `floating-label`  = false\n-   `multiline`  = false\n-   `expandable`  = false\n-   `errorMessage`  = null\n-   `icon`  (used with expandable)\n\n## Tooltip\n\n**Extends MaterialComponent**\n\n**Parameters**\n\n-   `for`  [id]\n-   `large`  = false\n"
  },
  {
    "path": "karma.conf.js",
    "content": "var path = require('path');\n\nmodule.exports = function(config) {\n\tconfig.set({\n\t\tframeworks: ['mocha', 'chai-sinon'],\n\t\treporters: ['mocha'],\n\n\t\tbrowsers: ['PhantomJS'],\n\n\t\tfiles: [\n\t\t\t'test/_setup.js',\n\t\t\t'test/**/*.js'\n\t\t],\n\n\t\tpreprocessors: {\n\t\t\t'test/**/*.js': ['webpack'],\n\t\t\t'src/**/*.js': ['webpack'],\n\t\t\t'**/*.js': ['sourcemap']\n\t\t},\n\n\t\twebpack: {\n\t\t\tmodule: {\n\t\t\t\tloaders: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttest: /\\.jsx?$/,\n\t\t\t\t\t\texclude: /node_modules/,\n\t\t\t\t\t\tloader: 'babel',\n\t\t\t\t\t\tquery: {\n\t\t\t\t\t\t\tsourceMap: 'inline',\n\t\t\t\t\t\t\tpresets: ['es2015-loose', 'stage-0'],\n\t\t\t\t\t\t\tplugins: [\n\t\t\t\t\t\t\t\t'transform-object-rest-spread',\n\t\t\t\t\t\t\t\t['transform-react-jsx', { pragma:'h' }]\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\tresolve: {\n\t\t\t\tmodulesDirectories: [__dirname, 'node_modules'],\n\t\t\t\talias: {\n\t\t\t\t\tsrc: __dirname+'/src'\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\twebpackMiddleware: {\n\t\t\tnoInfo: true\n\t\t}\n\t});\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"preact-mdl\",\n  \"amdName\": \"preactMdl\",\n  \"version\": \"2.2.2\",\n  \"description\": \"A collection of Preact Components that encapsulate Google's Material Design Lite.\",\n  \"main\": \"dist/preact-mdl.js\",\n  \"minified:main\": \"dist/preact-mdl.min.js\",\n  \"scripts\": {\n    \"copy-typescript-definition\": \"copyfiles -f src/index.d.ts dist\",\n    \"build\": \"npm-run-all transpile copy-typescript-definition minify size docs\",\n    \"transpile\": \"rollup -c rollup.config.js\",\n    \"minify\": \"cross-var cross-env uglifyjs $npm_package_main -cm -o $npm_package_minified_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_minified_main}.map\",\n    \"size\": \"printf \\\"gzip size: \\\" && cross-var cross-env gzip-size $npm_package_minified_main | pretty-bytes\",\n    \"test\": \"npm-run-all lint build test:karma\",\n    \"lint\": \"eslint src test\",\n    \"test:karma\": \"karma start --single-run\",\n    \"docs\": \"documentation build -f md -o docs.md --infer-private=\\\"^(component|js|nodeName|render|mdlRender|propClassMapping|ripple|constructor|handle.*|options)$\\\" --markdown-toc src/index.js\",\n    \"prepublish\": \"npm-run-all build test\",\n    \"release\": \"cross-var cross-env npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish\"\n  },\n  \"typings\": \"./dist/index.d.ts\",\n  \"keywords\": [\n    \"preact\",\n    \"mdl\",\n    \"material design\"\n  ],\n  \"author\": \"Jason Miller <jason@developit.ca>\",\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/developit/preact-mdl.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/developit/preact-mdl/issues\"\n  },\n  \"homepage\": \"https://github.com/developit/preact-mdl\",\n  \"peerDependencies\": {\n    \"preact\": \">=7\"\n  },\n  \"devDependencies\": {\n    \"babel-core\": \"^6.5.2\",\n    \"babel-eslint\": \"^6.0.2\",\n    \"babel-loader\": \"^6.2.3\",\n    \"babel-plugin-transform-class-properties\": \"^6.5.2\",\n    \"babel-plugin-transform-es2015-classes\": \"^6.5.2\",\n    \"babel-plugin-transform-object-rest-spread\": \"^6.6.5\",\n    \"babel-plugin-transform-react-jsx\": \"^6.5.2\",\n    \"babel-preset-es2015\": \"^6.6.0\",\n    \"babel-preset-es2015-loose\": \"^7.0.0\",\n    \"babel-preset-es2015-loose-rollup\": \"^7.0.0\",\n    \"babel-preset-stage-0\": \"^6.5.0\",\n    \"chai\": \"^3.5.0\",\n    \"copyfiles\": \"^1.0.0\",\n    \"cross-env\": \"^4.0.0\",\n    \"cross-var\": \"^1.0.3\",\n    \"documentation\": \"^4.0.0-beta.18\",\n    \"eslint\": \"^2.2.0\",\n    \"eslint-plugin-react\": \"^4.3.0\",\n    \"gzip-size-cli\": \"^1.0.0\",\n    \"karma\": \"^0.13.21\",\n    \"karma-chai\": \"^0.1.0\",\n    \"karma-chai-sinon\": \"^0.1.5\",\n    \"karma-mocha\": \"^0.2.2\",\n    \"karma-mocha-reporter\": \"^2.0.0\",\n    \"karma-phantomjs-launcher\": \"^1.0.0\",\n    \"karma-sourcemap-loader\": \"^0.3.7\",\n    \"karma-webpack\": \"^1.7.0\",\n    \"mkdirp\": \"^0.5.1\",\n    \"mocha\": \"^2.4.5\",\n    \"npm-run-all\": \"^1.7.0\",\n    \"phantomjs\": \"^2.1.3\",\n    \"phantomjs-prebuilt\": \"^2.1.4\",\n    \"preact\": \"^7.1.0\",\n    \"preact-jsx-chai\": \"^1.4.1\",\n    \"pretty-bytes-cli\": \"^1.0.0\",\n    \"rollup\": \"^0.25.4\",\n    \"rollup-plugin-babel\": \"^2.4.0\",\n    \"rollup-plugin-commonjs\": \"^2.2.1\",\n    \"rollup-plugin-node-resolve\": \"^1.5.0\",\n    \"sinon\": \"^1.17.2\",\n    \"sinon-chai\": \"^2.8.0\",\n    \"uglify-js\": \"^2.6.2\",\n    \"webpack\": \"^1.12.14\"\n  },\n  \"dependencies\": {}\n}\n"
  },
  {
    "path": "rollup.config.js",
    "content": "import path from 'path';\nimport fs from 'fs';\nimport babel from 'rollup-plugin-babel';\nimport nodeResolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollup-plugin-commonjs';\n\nlet pkg = JSON.parse(fs.readFileSync('./package.json'));\n\nlet external = Object.keys(pkg.peerDependencies || {}).concat(Object.keys(pkg.dependencies || {}));\n\nexport default {\n\tentry: 'src/index.js',\n\tdest: pkg.main,\n\tsourceMap: path.resolve(pkg.main),\n\tmoduleName: pkg.amdName,\n\tformat: 'umd',\n\texternal,\n\tplugins: [\n\t\tbabel({\n\t\t\tbabelrc: false,\n\t\t\tcomments: false,\n\t\t\texclude: 'node_modules/**',\n\t\t\tpresets: [\n\t\t\t\t'es2015-loose-rollup',\n\t\t\t\t'stage-0'\n\t\t\t],\n\t\t\tplugins: [\n\t\t\t\t'transform-class-properties',\n\t\t\t\t['transform-react-jsx', { pragma: 'h' }]\n\t\t\t]\n\t\t}),\n\t\tnodeResolve({\n\t\t\tjsnext: true,\n\t\t\tmain: true,\n\t\t\tskip: external\n\t\t}),\n\t\tcommonjs({\n\t\t\tinclude: 'node_modules/**',\n\t\t\texclude: '**/*.css'\n\t\t})\n\t]\n};\n"
  },
  {
    "path": "src/index.d.ts",
    "content": "export const options: {};\n\nexport class MaterialComponent<PropsType, StateType> extends preact.Component<PropsType, StateType> {\n    component: string;\n    js: boolean;\n    mdlClasses: string[];\n    nodeName: string;\n    propClassMapping: {[prop: string]: string};\n    ripple: boolean;\n    upgradedBase: HTMLElement;\n\n    createMdlClasses(props: PropsType & preact.ComponentProps<this>): string[];\n    mdlRender(props: PropsType & preact.ComponentProps<this>): preact.VNode;\n    preserveMdlDom(base: HTMLElement, r: HTMLElement): void;\n    render(props: PropsType & preact.ComponentProps<this>, state: StateType): preact.VNode;\n}\n\nexport interface HTMLProps extends JSX.HTMLAttributes { }\n\n/** Icon */\nexport interface IconProps extends HTMLProps {\n    badge?: string;\n}\nexport class Icon extends MaterialComponent<IconProps, {}> { }\n\n/** Button */\nexport interface ButtonProps extends HTMLProps {\n    accent?: boolean;\n    colored?: boolean;\n    fab?: boolean;\n    \"mini-fab\"?: boolean;\n    primary?: boolean;\n    raised?: boolean;\n    ripple?: boolean;\n}\nexport class Button extends MaterialComponent<ButtonProps, {}> { }\n\n/** Cards */\nexport interface CardProps extends HTMLProps {\n    shadow?: number;\n}\nexport class Card extends MaterialComponent<CardProps, {}> { }\nexport class CardActions extends MaterialComponent<HTMLProps, {}> { }\nexport class CardMedia extends MaterialComponent<HTMLProps, {}> { }\nexport class CardMenu extends MaterialComponent<HTMLProps, {}> { }\nexport class CardText extends MaterialComponent<HTMLProps, {}> { }\nexport class CardTitle extends MaterialComponent<HTMLProps, {}> { }\nexport class CardTitleText extends MaterialComponent<HTMLProps, {}> { }\nexport namespace Card {\n    var Actions: typeof CardActions;\n    var Media: typeof CardMedia;\n    var Menu: typeof CardMenu;\n    var Text: typeof CardText;\n    var Title: typeof CardTitle;\n    var TitleText: typeof CardTitleText;\n}\n\n/** Dialogs */\nexport class Dialog extends MaterialComponent<HTMLProps, {}> {}\nexport class DialogActions extends MaterialComponent<HTMLProps, {}> { }\nexport class DialogContent extends MaterialComponent<HTMLProps, {}> { }\nexport class DialogTitle extends MaterialComponent<HTMLProps, {}> { }\nexport namespace Dialog {\n    var Actions: typeof DialogActions;\n    var Content: typeof DialogContent;\n    var Title: typeof DialogTitle;\n}\n\n/** Layouts */\nexport interface LayoutProps extends HTMLProps {\n    \"fixed-header\"?: boolean;\n    \"fixed-drawer\"?: boolean;\n    \"fixed-tabs\"?: boolean;\n    \"overlay-drawer-button\"?: boolean;\n}\nexport class Layout extends MaterialComponent<LayoutProps, {}> { }\nexport class LayoutContent extends MaterialComponent<HTMLProps, {}> { }\nexport class LayoutDrawer extends MaterialComponent<HTMLProps, {}> { }\nexport interface LayoutHeaderProps extends HTMLProps {\n    scroll?: boolean;\n    waterfall?: boolean;\n}\nexport class LayoutHeader extends MaterialComponent<LayoutHeaderProps, {}> { }\nexport class LayoutHeaderRow extends MaterialComponent<HTMLProps, {}> { }\nexport class LayoutSpacer extends MaterialComponent<HTMLProps, {}> { }\nexport interface LayoutTabProps extends HTMLProps {\n    active?: boolean;\n}\nexport class LayoutTab extends MaterialComponent<LayoutTabProps, {}> { }\nexport class LayoutTabBar extends MaterialComponent<HTMLProps, {}> { }\nexport interface LayoutTabPanelProps extends HTMLProps {\n    active?: boolean;\n}\nexport class LayoutTabPanel extends MaterialComponent<LayoutTabPanelProps, {}> { }\nexport class LayoutTitle extends MaterialComponent<HTMLProps, {}> { }\nexport namespace Layout {\n    var Content: typeof LayoutContent;\n    var Drawer: typeof LayoutDrawer;\n    var Header: typeof LayoutHeader;\n    var HeaderRow: typeof LayoutHeaderRow;\n    var Spacer: typeof LayoutSpacer;\n    var Tab: typeof LayoutTab;\n    var TabBar: typeof LayoutTabBar;\n    var TabPanel: typeof LayoutTabPanel;\n    var Title: typeof LayoutTitle;\n}\n\n/** Navigation */\nexport interface NavigationProps extends HTMLProps {\n    \"large-screen-only\"?: boolean;\n}\nexport class Navigation extends MaterialComponent<NavigationProps, {}> { }\nexport class NavigationLink extends MaterialComponent<HTMLProps, {}> {\n    handleClick(e: any): boolean|void;\n}\nexport namespace Navigation {\n    var Link: typeof NavigationLink;\n}\n\n/** Tabs */\nexport class Tabs extends MaterialComponent<HTMLProps, {}> { }\nexport interface TabProps extends HTMLProps {\n    active?: boolean;\n}\nexport class Tab extends MaterialComponent<TabProps, {}> { }\nexport class TabBar extends MaterialComponent<HTMLProps, {}> { }\nexport interface TabPanelProps extends HTMLProps {\n    active?: boolean;\n}\nexport class TabPanel extends MaterialComponent<TabPanelProps, {}> { }\nexport namespace Tabs {\n    var Bar: typeof TabBar;\n    var Panel: typeof TabPanel;\n}\n\n/** MegaFooter */\nexport class MegaFooter extends MaterialComponent<HTMLProps, {}> { }\nexport class MegaFooterBottomSection extends MaterialComponent<HTMLProps, {}> { }\nexport class MegaFooterDropDownSection extends MaterialComponent<HTMLProps, {}> { }\nexport class MegaFooterHeading extends MaterialComponent<HTMLProps, {}> { }\nexport class MegaFooterLinkList extends MaterialComponent<HTMLProps, {}> { }\nexport class MegaFooterMiddleSection extends MaterialComponent<HTMLProps, {}> { }\nexport namespace MegaFooter {\n    var BottomSection: typeof MegaFooterBottomSection;\n    var DropDownSection: typeof MegaFooterDropDownSection;\n    var Heading: typeof MegaFooterHeading;\n    var LinkList: typeof MegaFooterLinkList;\n    var MiddleSection: typeof MegaFooterMiddleSection;\n}\n\n/** MiniFooter */\nexport class MiniFooter extends MaterialComponent<HTMLProps, {}> { }\nexport class MiniFooterLeftSection extends MaterialComponent<HTMLProps, {}> { }\nexport class MiniFooterLinkList extends MaterialComponent<HTMLProps, {}> { }\nexport namespace MiniFooter {\n    var LeftSection: typeof MiniFooterLeftSection;\n    var LinkList: typeof MiniFooterLinkList;\n}\n\n/** Grid */\nexport interface GridProps extends HTMLProps {\n    \"no-spacing\"?: boolean;\n}\nexport class Grid extends MaterialComponent<GridProps, {}> { }\nexport class Cell extends MaterialComponent<HTMLProps, {}> { }\nexport namespace Grid {\n    var Cell: any; // XXX should be typeof Cell but TypeScript complains\n}\n\n/** Progress */\nexport interface ProgressProps extends HTMLProps {\n    indeterminate?: boolean;\n}\nexport class Progress extends MaterialComponent<ProgressProps, {}> { }\n\n/** Spinner */\nexport interface SpinnerProps extends HTMLProps {\n    \"single-color\"?: boolean;\n    active?: boolean;\n}\nexport class Spinner extends MaterialComponent<SpinnerProps, {}> { }\n\n/** Menu */\nexport interface MenuProps extends HTMLProps {\n    \"bottom-left\"?: boolean;\n    \"bottom-right\"?: boolean;\n    \"top-left\"?: boolean;\n    \"top-right\"?: boolean;\n    ripple?: boolean;\n}\nexport class Menu extends MaterialComponent<MenuProps, {}> { }\nexport class MenuItem extends MaterialComponent<HTMLProps, {}> { }\nexport namespace Menu {\n    var Item: typeof MenuItem;\n}\n\n/** Slider */\nexport interface SliderProps extends HTMLProps {\n    min?: number;\n    max?: number;\n}\nexport class Slider extends MaterialComponent<SliderProps, {}> { }\n\n/** Snackbar */\nexport class Snackbar extends MaterialComponent<HTMLProps, {}> { }\n\n/** CheckBox */\nexport interface CheckBoxProps extends HTMLProps {\n    ripple?: boolean;\n}\nexport class CheckBox extends MaterialComponent<CheckBoxProps, {}> {\n    getValue(): boolean;\n}\n\n/** Radio */\nexport interface RadioProps extends HTMLProps {\n    name: string;\n    value: string;\n    ripple?: boolean;\n}\nexport class Radio extends MaterialComponent<RadioProps, {}> {\n    getValue(): boolean;\n}\n\n/** IconToggle */\nexport interface IconToggleProps extends HTMLProps {\n    ripple?: boolean;\n}\nexport class IconToggle extends MaterialComponent<IconToggleProps, {}> {\n    getValue(): boolean;\n}\n\n/** Switch */\nexport interface SwitchProps extends HTMLProps {\n    ripple?: boolean;\n}\nexport class Switch extends MaterialComponent<SwitchProps, {}> {\n    getValue(): boolean;\n}\n\n/** Table */\nexport interface TableProps extends HTMLProps {\n    selectable?: boolean;\n    shadow?: number;\n}\nexport class Table extends MaterialComponent<TableProps, {}> { }\nexport interface TableCellProps extends HTMLProps {\n    \"non-numeric\"?: boolean;\n}\nexport class TableCell extends MaterialComponent<TableCellProps, {}> { }\nexport namespace Table {\n    var Cell: typeof TableCell;\n}\n\n/** List */\nexport class List extends MaterialComponent<HTMLProps, {}> { }\nexport interface ListItemProps extends HTMLProps {\n    \"two-line\"?: boolean;\n    \"three-line\"?: boolean;\n}\nexport class ListItem extends MaterialComponent<ListItemProps, {}> { }\nexport namespace List {\n    var Item: typeof ListItem;\n}\n\n/** TextField */\nexport interface TextFieldProps extends HTMLProps {\n    \"floating-label\"?: boolean;\n    errorMessage?: string;\n    expandable?: boolean;\n    multiline?: boolean;\n    onSearch?: ((event) => boolean|void);\n}\nexport class TextField extends MaterialComponent<TextFieldProps, {}> { }\n\n/** Tooltip */\nexport interface TooltipProps extends HTMLProps {\n    for: string;\n    large?: boolean;\n}\nexport class Tooltip extends MaterialComponent<TooltipProps, {}> { }\n\nexport default {\n    options,\n    Button,\n    Card,\n    Cell,\n    CheckBox,\n    Dialog,\n    Grid,\n    Icon,\n    IconToggle,\n    Layout,\n    List,\n    ListItem,\n    Progress,\n    MegaFooter,\n    Menu,\n    MiniFooter,\n    Navigation,\n    Radio,\n    Slider,\n    Snackbar,\n    Spinner,\n    Switch,\n    Table,\n    Tabs,\n    TextField,\n    Tooltip,\n};\n"
  },
  {
    "path": "src/index.js",
    "content": "import { h, Component } from 'preact';\n\nexport const options = {};\n\nfunction mdl() {\n\treturn options.mdl || options.componentHandler || window.componentHandler;\n}\n\nconst RIPPLE_CLASS = 'js-ripple-effect';\n\nconst MDL_PREFIX = s => MDL_NO_PREFIX[s] ? s : `mdl-${s}`;\n\nconst MDL_NO_PREFIX = { 'is-active': true };\n\nlet uidCounter = 1;\n\nfunction uid() {\n\treturn ++uidCounter;\n}\n\nfunction extend(base, props) {\n\tfor (let i in props) if (props.hasOwnProperty(i)) base[i] = props[i];\n\treturn base;\n}\n\nfunction setClass(attributes, value, append) {\n\tlet cl = getClass(attributes);\n\tif (attributes.className) delete attributes.className;\n\tif (append) value = cl ? (cl + ' ' + value) : value;\n\tattributes.class = value;\n}\n\nfunction getClass(attributes) {\n\treturn attributes.class || attributes.className;\n}\n\nlet propMaps = {\n\tdisabled({ attributes }) {\n\t\tif (attributes.hasOwnProperty('disabled') && !attributes.disabled) {\n\t\t\tattributes.disabled = null;\n\t\t}\n\t},\n\tbadge({ attributes }) {\n\t\tattributes['data-badge'] = attributes.badge;\n\t\tdelete attributes.badge;\n\t\tsetClass(attributes, 'mdl-badge', true);\n\t},\n\tactive({ attributes }) {\n\t\tif (attributes.active) {\n\t\t\tsetClass(attributes, 'is-active', true);\n\t\t}\n\t},\n\tshadow({ attributes }) {\n\t\tlet d = parseFloat(attributes.shadow)|0,\n\t\t\tc = getClass(attributes).replace(/\\smdl-[^ ]+--shadow\\b/g,'');\n\t\tsetClass(attributes, c + (c ? ' ' : '') + `mdl-shadow--${d}dp`);\n\t}\n};\n\nexport class MaterialComponent extends Component {\n\tcomponent = 'none';\n\tjs = false;\n\tripple = false;\n\tmdlClasses = null;\n\tupgradedBase = null;\n\n\tmdlRender(props) {\n\t\treturn <div {...props}>{ props.children }</div>;\n\t}\n\n\trender(props, state) {\n\t\tlet r = this.mdlRender(props, state);\n\t\tif (this.nodeName) r.nodeName = this.nodeName;\n\t\tif (!r.attributes) r.attributes = {};\n\t\tr.attributes.class = this.createMdlClasses(props).concat(r.attributes.class || [], r.attributes.className || []).join(' ');\n\t\tfor (let i in propMaps) if (propMaps.hasOwnProperty(i)) {\n\t\t\tif (props.hasOwnProperty(i)) {\n\t\t\t\tpropMaps[i](r);\n\t\t\t}\n\t\t}\n\t\tif (this.base && this.upgradedBase) {\n\t\t\tthis.preserveMdlDom(this.base, r);\n\t\t}\n\t\treturn r;\n\t}\n\n\t// Copy some transient properties back out of the DOM into VDOM prior to diffing so they don't get overwritten\n\tpreserveMdlDom(base, r) {\n\t\tif (!base || !base.hasAttribute || !r) return;\n\n\t\tlet c = base.childNodes,\n\t\t\tpersist = [\n\t\t\t\t'mdl-js-ripple-effect--ignore-events',\n\t\t\t\t'mdl-js-ripple-effect',\n\t\t\t\t'is-upgraded',\n\t\t\t\t'is-dirty'\n\t\t\t],\n\t\t\tv = base.getAttribute('data-upgraded'),\n\t\t\ta = r.attributes,\n\t\t\tcl = getClass(a) || '',\n\t\t\tfoundRipple = false;\n\n\t\tif (!a) a = {};\n\n\t\tif (v) {\n\t\t\ta['data-upgraded'] = v;\n\t\t\tupgradeQueue.add(base);\n\t\t}\n\n\t\tif (base.hasAttribute('ink-enabled')) {\n\t\t\tif (!r.attributes) r.attributes = {};\n\t\t\tr.attributes['ink-enabled'] = 'true';\n\t\t}\n\n\t\tfor (let i=0; i<persist.length; i++) {\n\t\t\tif (base.classList.contains(persist[i])) {\n\t\t\t\tif (typeof a.class==='string') {\n\t\t\t\t\tif (cl.indexOf(persist[i])===-1) {\n\t\t\t\t\t\tcl += ' ' + persist[i];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\t(cl || (cl = {}))[persist[i]] = true;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tsetClass(a, cl);\n\t}\n\n\tcreateMdlClasses(props) {\n\t\tlet name = this.component,\n\t\t\tc = [],\n\t\t\tmapping = this.propClassMapping || {},\n\t\t\tjs = props.js!==false && (this.js || this.ripple);\n\t\tif (name) c.push(name);\n\t\tif (this.mdlClasses) c.push(...this.mdlClasses);\n\t\tif (this.ripple && props.ripple!==false) {\n\t\t\tc.push(RIPPLE_CLASS);\n\t\t}\n\t\tif (js) c.push(`js-${name}`);\n\t\tfor (let i in props) {\n\t\t\tif (props.hasOwnProperty(i) && props[i]===true) {\n\t\t\t\tc.push(MDL_NO_PREFIX[i] ? i : (mapping[i] || `${name}--${i}`));\n\t\t\t}\n\t\t}\n\t\treturn c.map(MDL_PREFIX);\n\t}\n\n\tcomponentDidMount() {\n\t\tif (this.base!==this.upgradedBase) {\n\t\t\tif (this.upgradedBase) {\n\t\t\t\tmdl().downgradeElements(this.upgradedBase);\n\t\t\t}\n\t\t\tthis.upgradedBase = null;\n\t\t\tif (this.base && this.base.parentElement) {\n\t\t\t\tthis.upgradedBase = this.base;\n\t\t\t\tmdl().upgradeElement(this.base);\n\t\t\t}\n\t\t}\n\t}\n\n\tcomponentWillUnmount() {\n\t\tif (this.upgradedBase) {\n\t\t\tmdl().downgradeElements(this.upgradedBase);\n\t\t\tthis.upgradedBase = null;\n\t\t}\n\t}\n}\n\n\nlet upgradeQueue = {\n\titems: [],\n\tadd(base) {\n\t\tif (upgradeQueue.items.push(base)===1) {\n\t\t\trequestAnimationFrame(upgradeQueue.process);\n\t\t\t// setTimeout(upgradeQueue.process, 1);\n\t\t}\n\t},\n\tprocess() {\n\t\t// console.log(`upgrading ${upgradeQueue.items.length} items`);\n\t\tlet p = upgradeQueue.items;\n\t\tfor (let i=p.length; i--; ) {\n\t\t\tlet el = p[i],\n\t\t\t\tv = el.getAttribute('data-upgraded'),\n\t\t\t\tu = v && v.split(',');\n\t\t\tif (!u) continue;\n\t\t\tfor (let j=u.length; j--; ) {\n\t\t\t\tlet c = u[j],\n\t\t\t\t\ta = c && el[c];\n\t\t\t\tif (a) {\n\t\t\t\t\tif (a.updateClasses_) {\n\t\t\t\t\t\ta.updateClasses_();\n\t\t\t\t\t}\n\t\t\t\t\tif (a.onFocus_ && a.input_ && a.input_.matches && a.input_.matches(':focus')) {\n\t\t\t\t\t\ta.onFocus_();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tp.length = 0;\n\t}\n};\n\n\n\n/**\n * @class Icon\n * @desc An Icon in the Material Icons font. Note that you must include the font, usually by Google Fonts\n * @param icon The icon to render. Can also be specified in the Icon text\n *\n * @example\n * <Icon icon=\"menu\" />\n * @example\n * <Icon>menu</Icon>\n */\nexport class Icon extends MaterialComponent {\n\tmdlRender(props) {\n\t\tlet c = getClass(props) || '',\n\t\t\ticon = String(props.icon || props.children).replace(/[ -]/g, '_');\n\t\tdelete props.icon;\n\t\tdelete props.className;\n\t\tif (typeof c==='string') {\n\t\t\tc = 'material-icons ' + c;\n\t\t}\n\t\telse {\n\t\t\tc['material-icons'] = true;\n\t\t}\n\t\treturn <i {...props} class={c}>{ icon }</i>;\n\t}\n}\n\n\n\n\n/** @class Button\n *  @desc A material button\n *\n *  @example\n *  <Button onClick={this.handleClick}>Hello World</Button>\n *\n *  @param primary = false\n *\t@param accent = false\n *\t@param colored = false\n *\t@param raised = false\n *\t@param icon = false\n *\t@param fab = false\n *\t@param mini-fab = false\n *\t@param disabled = false\n */\nexport class Button extends MaterialComponent {\n\tcomponent = 'button';\n\tnodeName = 'button';\n\tjs = true;\n\tripple = true;\n}\n\n\n\n\n\n\n/**\n * @class Card\n * @desc Cards are how you represent blocks of infomation. From the Material Design Specifications: A card is a sheet of material that serves as an entry point to more detailed information.\n * TODO: example\n */\nexport class Card extends MaterialComponent {\n\tcomponent = 'card';\n}\n\nexport class CardTitle extends MaterialComponent {\n\tcomponent = 'card__title';\n\tpropClassMapping = {\n\t\texpand: 'card--expand'\n\t};\n}\n\nexport class CardTitleText extends MaterialComponent {\n\tcomponent = 'card__title-text';\n\tnodeName = 'h2';\n}\n\nexport class CardMedia extends MaterialComponent {\n\tcomponent = 'card__media';\n}\n\nexport class CardText extends MaterialComponent {\n\tcomponent = 'card__supporting-text';\n}\n\nexport class CardActions extends MaterialComponent {\n\tcomponent = 'card__actions';\n\t// mdlClasses = ['card--border'];\n}\n\nexport class CardMenu extends MaterialComponent {\n\tcomponent = 'card__menu';\n}\n\nextend(Card, {\n\tTitle: CardTitle,\n\tTitleText: CardTitleText,\n\tMedia: CardMedia,\n\tText: CardText,\n\tActions: CardActions,\n\tMenu: CardMenu\n});\n\n\n\n/** Dialogs */\n\nexport class Dialog extends MaterialComponent {\n\tcomponent = 'dialog';\n\tnodeName = 'dialog';\n\tshow = () => {\n\t\tthis.base.show();\n\t}\n\tshowModal = () => {\n\t\tthis.base.showModal();\n\t}\n\tclose = () => {\n\t\tthis.base.close && this.base.close();\n\t}\n}\n\nexport class DialogTitle extends MaterialComponent {\n\tcomponent = 'dialog__title';\n}\n\nexport class DialogContent extends MaterialComponent {\n\tcomponent = 'dialog__content';\n}\n\nexport class DialogActions extends MaterialComponent {\n\tcomponent = 'dialog__actions';\n}\n\nextend(Dialog, {\n\tTitle: DialogTitle,\n\tContent: DialogContent,\n\tActions: DialogActions\n});\n\n\n\n\n/** Layouts */\n\n/**\n *  @class Layout\n *  @desc Use a layout to specify how your app will use some of material's aspects. Your app should reside in this component. If you want a fixed header, drawer, or tabs, specify them here.\n *  @param fixed-header = false\n *\t@param fixed-drawer = false\n *\t@param overlay-drawer-button = false\n *\t@param fixed-tabs = false\n *\n *  @example\n *  <Layout fixed-header>\n *\t\t<Layout.Header>\n *      ...\n *\t\t</Layout.Header>\n *\t\t...\n *  </Layout>\n */\nexport class Layout extends MaterialComponent {\n\tcomponent = 'layout';\n\tjs = true;\n}\n\n/** @param waterfall = false\n *\t@param scroll = false\n */\nexport class LayoutHeader extends MaterialComponent {\n\tcomponent = 'layout__header';\n\tnodeName = 'header';\n}\n\nexport class LayoutHeaderRow extends MaterialComponent {\n\tcomponent = 'layout__header-row';\n}\n\nexport class LayoutTitle extends MaterialComponent {\n\tcomponent = 'layout-title';\n\tnodeName = 'span';\n}\n\nexport class LayoutSpacer extends MaterialComponent {\n\tcomponent = 'layout-spacer';\n}\n\nexport class LayoutDrawer extends MaterialComponent {\n\tcomponent = 'layout__drawer';\n}\n\nexport class LayoutContent extends MaterialComponent {\n\tcomponent = 'layout__content';\n\tnodeName = 'main';\n}\n\nexport class LayoutTabBar extends MaterialComponent {\n\tcomponent = 'layout__tab-bar';\n\tjs = true;\n\tripple = false;\n}\n\n/** @param active */\nexport class LayoutTab extends MaterialComponent {\n\tcomponent = 'layout__tab';\n\tnodeName = 'a';\n}\n\n/** @param active */\nexport class LayoutTabPanel extends MaterialComponent {\n\tcomponent = 'layout__tab-panel';\n\n\tmdlRender(props) {\n\t\treturn <section {...props}><div class=\"page-content\">{ props.children }</div></section>;\n\t}\n}\n\nextend(Layout, {\n\tHeader: LayoutHeader,\n\tHeaderRow: LayoutHeaderRow,\n\tTitle: LayoutTitle,\n\tSpacer: LayoutSpacer,\n\tDrawer: LayoutDrawer,\n\tContent: LayoutContent,\n\tTabBar: LayoutTabBar,\n\tTab: LayoutTab,\n\tTabPanel: LayoutTabPanel\n});\n\n\n\n/** @param large-screen-only = false */\nexport class Navigation extends MaterialComponent {\n\tcomponent = 'navigation';\n\tnodeName = 'nav';\n\tpropClassMapping = {\n\t\t'large-screen-only': 'layout--large-screen-only'\n\t}\n\n\tmdlRender(props, state) {\n\t\tlet r = super.mdlRender(props, state);\n\t\tr.children.forEach( item => {\n\t\t\tif (!item) return item;\n\t\t\tlet c = item.attributes && getClass(item.attributes) || '';\n\t\t\tif (!c.match(/\\bmdl-navigation__link\\b/g)) {\n\t\t\t\tif (!item.attributes) item.attributes = {};\n\t\t\t\tsetClass(item.attributes, ' mdl-navigation__link', true);\n\t\t\t}\n\t\t});\n\t\treturn r;\n\t}\n}\n\nexport class NavigationLink extends MaterialComponent {\n\tcomponent = 'navigation__link';\n\tnodeName = 'a';\n\n\tconstructor(...args) {\n\t\tsuper(...args);\n\t\tthis.handleClick = this.handleClick.bind(this);\n\t}\n\n\thandleClick(e) {\n\t\tlet { route, href, onClick, onclick } = this.props;\n\t\tonClick = onClick || onclick;\n\t\tif (typeof onClick==='function' && onClick({ type: 'click', target: this })===false) {\n\t\t}\n\t\telse if (typeof route==='function') {\n\t\t\troute(href);\n\t\t}\n\t\te.preventDefault();\n\t\treturn false;\n\t}\n\n\tmdlRender({ children, ...props }, state) {\n\t\treturn <a {...props} onclick={ this.handleClick }>{ children }</a>;\n\t}\n}\n\nNavigation.Link = NavigationLink;\n\n\n\n\nexport class Tabs extends MaterialComponent {\n\tcomponent = 'tabs';\n\tjs = true;\n\tripple = false;\n}\n\nexport class TabBar extends MaterialComponent {\n\tcomponent = 'tabs__tab-bar';\n}\n\nexport class Tab extends MaterialComponent {\n\tcomponent = 'tabs__tab';\n\tnodeName = 'a';\n}\n\nexport class TabPanel extends MaterialComponent {\n\tcomponent = 'tabs__panel';\n\tnodeName = 'section';\n}\n\nextend(Tabs, {\n\tTabBar,\n\tBar: TabBar,\n\tTab,\n\tTabPanel,\n\tPanel: TabPanel\n});\n\n\n\nexport class MegaFooter extends MaterialComponent {\n\tcomponent = 'mega-footer';\n\tnodeName = 'footer';\n}\n\nexport class MegaFooterMiddleSection extends MaterialComponent {\n\tcomponent = 'mega-footer__middle-section';\n}\n\nexport class MegaFooterDropDownSection extends MaterialComponent {\n\tcomponent = 'mega-footer__drop-down-section';\n}\n\nexport class MegaFooterHeading extends MaterialComponent {\n\tcomponent = 'mega-footer__heading';\n\tnodeName = 'h1';\n}\n\nexport class MegaFooterLinkList extends MaterialComponent {\n\tcomponent = 'mega-footer__link-list';\n\tnodeName = 'ul';\n}\n\nexport class MegaFooterBottomSection extends MaterialComponent {\n\tcomponent = 'mega-footer__bottom-section';\n}\n\nextend(MegaFooter, {\n\tMiddleSection: MegaFooterMiddleSection,\n\tDropDownSection: MegaFooterDropDownSection,\n\tHeading: MegaFooterHeading,\n\tLinkList: MegaFooterLinkList,\n\tBottomSection: MegaFooterBottomSection\n});\n\n\n\n\nexport class MiniFooter extends MaterialComponent {\n\tcomponent = 'mini-footer';\n\tnodeName = 'footer';\n}\n\nexport class MiniFooterLeftSection extends MaterialComponent {\n\tcomponent = 'mini-footer__left-section';\n}\n\nexport class MiniFooterLinkList extends MaterialComponent {\n\tcomponent = 'mini-footer__link-list';\n\tnodeName = 'ul';\n}\n\nextend(MiniFooter, {\n\tLeftSection: MiniFooterLeftSection,\n\tLinkList: MiniFooterLinkList\n});\n\n\n\n\n/** Responsive Grid\n *\t@param no-spacing = false\n */\nexport class Grid extends MaterialComponent {\n\tcomponent = 'grid';\n}\n\nexport class Cell extends MaterialComponent {\n\tcomponent = 'cell';\n}\n\nGrid.Cell = Cell;\n\n\n\n\n\n/** @param indeterminate = false */\nexport class Progress extends MaterialComponent {\n\tcomponent = 'progress';\n\tjs = true;\n\n\tmdlRender(props) {\n\t\treturn (\n\t\t\t<div {...props}>\n\t\t\t\t<div class=\"progressbar bar bar1\" />\n\t\t\t\t<div class=\"bufferbar bar bar2\" />\n\t\t\t\t<div class=\"auxbar bar bar3\" />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tcomponentDidUpdate() {\n\t\tlet api = this.base.MaterialProgress,\n\t\t\tp = this.props;\n\t\tif (p.progress) api.setProgress(p.progress);\n\t\tif (p.buffer) api.setBuffer(p.buffer);\n\t}\n}\n\n\n\n\n\n/** @param active = false\n *\t@param single-color = false\n */\nexport class Spinner extends MaterialComponent {\n\tcomponent = 'spinner';\n\tjs = true;\n\t// shouldComponentUpdate = () => false;\n}\n\n\n\n\n\n/** @param bottom-left = true\n *\t@param bottom-right = false\n *\t@param top-left = false\n *\t@param top-right = false\n */\nexport class Menu extends MaterialComponent {\n\tcomponent = 'menu';\n\tnodeName = 'ul';\n\tjs = true;\n\tripple = true;\n}\n\n/** @param disabled = false */\nexport class MenuItem extends MaterialComponent {\n\tcomponent = 'menu__item';\n\tnodeName = 'li';\n}\n\nMenu.Item = MenuItem;\n\n\n\n\n\n/** @param min = 0\n *\t@param max = 100\n *\t@param value = 0\n *\t@param tabindex = 0\n *\t@param disabled = false\n */\nexport class Slider extends MaterialComponent {\n\tcomponent = 'slider';\n\tjs = true;\n\n\tmdlRender(props) {\n\t\treturn <input type=\"range\" tabindex=\"0\" {...props} />;\n\t}\n}\n\n\n\n\n/** Snackbar\n */\n\nexport class Snackbar extends MaterialComponent {\n\tcomponent = 'snackbar';\n\tjs = true;\n\n\tmdlRender(props) {\n\t\treturn (\n\t\t\t<div {...props}>\n\t\t\t\t<div class=\"mdl-snackbar__text\">{props.children}</div>\n\t\t\t\t<button class=\"mdl-snackbar__action\" type=\"button\"></button>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\n\n\n\n/** @param checked = false\n *\t@param disabled = false\n */\nexport class CheckBox extends MaterialComponent {\n\tcomponent = 'checkbox';\n\tjs = true;\n\tripple = true;\n\n\tgetValue() {\n\t\treturn this.base.children[0].checked;\n\t}\n\n\tmdlRender(props) {\n\t\tlet evt = {};\n\t\tfor (let i in props) if (i.match(/^on[a-z]+$/gi)) {\n\t\t\tevt[i] = props[i];\n\t\t\tdelete props[i];\n\t\t}\n\t\treturn (\n\t\t\t<label {...props}>\n\t\t\t\t<input type=\"checkbox\" class=\"mdl-checkbox__input\" checked={ props.checked } disabled={ props.disabled } {...evt} />\n\t\t\t\t<span class=\"mdl-checkbox__label\">{ props.children }</span>\n\t\t\t\t<span class=\"mdl-checkbox__focus-helper\" />\n\t\t\t\t<span class=\"mdl-checkbox__box-outline\">\n\t\t\t\t\t<span class=\"mdl-checkbox__tick-outline\" />\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t);\n\t}\n}\n\n\n\n\n/** @param name (required)\n*\t@param value (required)\n*\t@param checked = false\n  *\t@param disabled = false\n */\nexport class Radio extends MaterialComponent {\n\tcomponent = 'radio';\n\tjs = true;\n\tripple = true;\n\n\tgetValue() {\n\t\treturn this.base.children[0].checked;\n\t}\n\n\tmdlRender(props) {\n\t\treturn (\n\t\t\t<label {...props}>\n\t\t\t\t<input type=\"radio\" class=\"mdl-radio__button\" name={ props.name } value={ props.value } checked={ props.checked } disabled={ props.disabled } />\n\t\t\t\t<span class=\"mdl-radio__label\">{ props.children }</span>\n\t\t\t</label>\n\t\t);\n\t}\n}\n\n\n\n\n/** @param checked = false\n *\t@param disabled = false\n */\nexport class IconToggle extends MaterialComponent {\n\tcomponent = 'icon-toggle';\n\tjs = true;\n\tripple = true;\n\n\tgetValue() {\n\t\treturn this.base.children[0].checked;\n\t}\n\n\tmdlRender(props) {\n\t\treturn (\n\t\t\t<label {...props}>\n\t\t\t\t<input type=\"checkbox\" class=\"mdl-icon-toggle__input\" checked={ props.checked } disabled={ props.disabled } />\n\t\t\t\t<span class=\"mdl-icon-toggle__label material-icons\">{ props.children }</span>\n\t\t\t</label>\n\t\t);\n\t}\n}\n\n\n\n\n/** @param checked = false\n *\t@param disabled = false\n */\nexport class Switch extends MaterialComponent {\n\tcomponent = 'switch';\n\tnodeName = 'label';\n\tjs = true;\n\tripple = true;\n\n\tshouldComponentUpdate({ checked }) {\n\t\tif (Boolean(checked)===Boolean(this.props.checked)) return false;\n\t\treturn true;\n\t}\n\n\tgetValue() {\n\t\treturn this.base.children[0].checked;\n\t}\n\n\tmdlRender({ ...props }) {\n\t\tlet evt = {};\n\t\tfor (let i in props) if (i.match(/^on[a-z]+$/gi)) {\n\t\t\tevt[i] = props[i];\n\t\t\tdelete props[i];\n\t\t}\n\t\treturn (\n\t\t\t<label {...props}>\n\t\t\t\t<input type=\"checkbox\" class=\"mdl-switch__input\" checked={ props.checked } disabled={ props.disabled } {...evt} />\n\t\t\t\t<span class=\"mdl-switch__label\">{ props.children }</span>\n\t\t\t\t<div class=\"mdl-switch__track\"></div>\n\t\t\t\t<div class=\"mdl-switch__thumb\">\n\t\t\t\t\t<span class=\"mdl-switch__focus-helper\"></span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t);\n\t}\n}\n\n\n\n\n/** @param selectable = false */\nexport class Table extends MaterialComponent {\n\tcomponent = 'data-table';\n\tnodeName = 'table';\n\tjs = true;\n}\n\n/** @param non-numeric = false */\nexport class TableCell extends MaterialComponent {\n\tcomponent = 'data-table__cell';\n\tnodeName = 'td';\n}\n\nTable.Cell = TableCell;\n\n\nexport class List extends MaterialComponent {\n\tcomponent = 'list';\n\tnodeName = 'ul';\n}\n\n/** @param two-line = false\n*\t@param three-line = false\n */\nexport class ListItem extends MaterialComponent {\n\tcomponent = 'list__item';\n\tnodeName = 'li';\n}\n\nList.Item = ListItem;\n\n\n/** @param floating-label = false\n*\t@param multiline = false\n*\t@param expandable = false\n*\t@param errorMessage = null\n*\t@param icon (used with expandable)\n */\nexport class TextField extends MaterialComponent {\n\tcomponent = 'textfield';\n\tjs = true;\n\n\tconstructor(...args) {\n\t\tsuper(...args);\n\t\tthis.id = uid();\n\t}\n\n\tcomponentDidUpdate() {\n\t\tlet input = this.base && this.base.querySelector && this.base.querySelector('input,textarea');\n\t\tif (input && input.value && input.value!==this.props.value) {\n\t\t\tinput.value = this.props.value;\n\t\t}\n\t\tif (input && input.setCustomValidity) {\n\t\t\tinput.setCustomValidity(this.props.errorMessage || \"\");\n\t\t}\n\t}\n\n\tmdlRender(props={}) {\n\t\tlet id = props.id || this.id,\n\t\t\terrorMessage = props.errorMessage,\n\t\t\tp = extend({}, props);\n\n\t\tdelete p.class;\n\t\tdelete p.errorMessage;\n\n\t\tlet field = (\n\t\t\t<div>\n\t\t\t\t<input type=\"text\" class=\"mdl-textfield__input\" id={id} value=\"\" {...p} />\n\t\t\t\t<label class=\"mdl-textfield__label\" for={id}>{ props.label || props.children }</label>\n\t\t\t\t{errorMessage ? <span class=\"mdl-textfield__error\">{errorMessage}</span> : null}\n\t\t\t</div>\n\t\t);\n\t\tif (props.multiline) {\n\t\t\tfield.children[0].nodeName = 'textarea';\n\t\t\t// field.children[0].children = [props.value];\n\t\t}\n\t\tif (props.expandable===true) {\n\t\t\t(field.attributes = field.attributes || {}).class = 'mdl-textfield__expandable-holder';\n\t\t\tfield = (\n\t\t\t\t<div>\n\t\t\t\t\t<label class=\"mdl-button mdl-js-button mdl-button--icon\" for={id}>\n\t\t\t\t\t\t<i class=\"material-icons\">{ props.icon }</i>\n\t\t\t\t\t</label>\n\t\t\t\t\t{ field }\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\t\tlet cl = getClass(props);\n\t\tif (cl) {\n\t\t\t(field.attributes = field.attributes || {}).class = cl;\n\t\t}\n\n\t\treturn field;\n\t}\n}\n\n\n\n\n\n\n/** @param for [id]\n *\t@param large = false\n */\nexport class Tooltip extends MaterialComponent {\n\tcomponent = 'tooltip';\n}\n\n\n\n\nexport default {\n\toptions,\n\tIcon,\n\tButton,\n\tCard,\n\tDialog,\n\tLayout,\n\tNavigation,\n\tTabs,\n\tMegaFooter,\n\tMiniFooter,\n\tGrid,\n\tCell,\n\tProgress,\n\tSpinner,\n\tMenu,\n\tSlider,\n\tSnackbar,\n\tCheckBox,\n\tRadio,\n\tIconToggle,\n\tSwitch,\n\tTable,\n\tTextField,\n\tTooltip,\n\tList,\n\tListItem\n};\n"
  },
  {
    "path": "test/_setup.js",
    "content": "if (!Function.prototype.bind) {\n\tFunction.prototype.bind = function(context, ...curry) {\n\t\treturn (...args) => this.call(context, ...curry, ...args);\n\t};\n}\n"
  },
  {
    "path": "test/index.js",
    "content": "import { h, render, Component } from 'preact';\nimport assertJsx from 'preact-jsx-chai';\nchai.use(assertJsx);\nimport { Button, TextField } from '..';\n\n/*eslint-env browser,mocha*/\n/*global sinon,expect,chai*/\n\ndescribe('preact-mdl', () => {\n\tlet scratch;\n\n\tbefore( () => {\n\t\tscratch = document.createElement('div');\n\t\t(document.body || document.documentElement).appendChild(scratch);\n\t});\n\n\tbeforeEach( () => {\n\t\tscratch.innerHTML = '';\n\t});\n\n\tafter( () => {\n\t\tscratch.parentNode.removeChild(scratch);\n\t\tscratch = null;\n\t});\n\n\tdescribe('<Button />', () => {\n\t\tit('should render a button', () => {\n\t\t\texpect(\n\t\t\t\t<Button>Text</Button>\n\t\t\t).to.eql(\n\t\t\t\t<button class=\"mdl-button mdl-js-ripple-effect mdl-js-button\">\n\t\t\t\t\tText\n\t\t\t\t</button>\n\t\t\t);\n\t\t});\n\t});\n\n\tdescribe('<TextField />', () => {\n\t\tit('should add the custom class', () => {\n\t\t\tlet field = <TextField class=\"custom_class\"/>;\n\t\t\texpect(field).to.contain('custom_class');\n\t\t});\n\t});\n});\n"
  }
]