| @@ -0,0 +1,41 @@ | ||
| { | ||
| "name": "iron-fit-behavior", | ||
| "version": "1.2.5", | ||
| "license": "http://polymer.github.io/LICENSE.txt", | ||
| "description": "Fits an element inside another element", | ||
| "private": true, | ||
| "main": "iron-fit-behavior.html", | ||
| "keywords": [ | ||
| "web-components", | ||
| "polymer", | ||
| "behavior" | ||
| ], | ||
| "authors": [ | ||
| "The Polymer Authors" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/PolymerElements/iron-fit-behavior.git" | ||
| }, | ||
| "dependencies": { | ||
| "polymer": "Polymer/polymer#^1.1.0" | ||
| }, | ||
| "devDependencies": { | ||
| "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", | ||
| "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", | ||
| "test-fixture": "PolymerElements/test-fixture#^1.0.0", | ||
| "web-component-tester": "^4.0.0", | ||
| "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" | ||
| }, | ||
| "ignore": [], | ||
| "homepage": "https://github.com/PolymerElements/iron-fit-behavior", | ||
| "_release": "1.2.5", | ||
| "_resolution": { | ||
| "type": "version", | ||
| "tag": "v1.2.5", | ||
| "commit": "8bc774b9376882ae5ba09f9e007764c6ee9fbbca" | ||
| }, | ||
| "_source": "git://github.com/PolymerElements/iron-fit-behavior.git", | ||
| "_target": "^1.0.0", | ||
| "_originalSource": "PolymerElements/iron-fit-behavior" | ||
| } |
| @@ -0,0 +1,41 @@ | ||
| { | ||
| "name": "iron-flex-layout", | ||
| "version": "1.3.1", | ||
| "description": "Provide flexbox-based layouts", | ||
| "keywords": [ | ||
| "web-components", | ||
| "polymer", | ||
| "layout" | ||
| ], | ||
| "main": "iron-flex-layout.html", | ||
| "private": true, | ||
| "license": "http://polymer.github.io/LICENSE.txt", | ||
| "authors": [ | ||
| "The Polymer Authors" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/PolymerElements/iron-flex-layout.git" | ||
| }, | ||
| "dependencies": { | ||
| "polymer": "Polymer/polymer#^1.1.0" | ||
| }, | ||
| "devDependencies": { | ||
| "iron-component-page": "polymerelements/iron-component-page#^1.0.0", | ||
| "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", | ||
| "test-fixture": "PolymerElements/test-fixture#^1.0.0", | ||
| "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", | ||
| "web-component-tester": "^4.0.0" | ||
| }, | ||
| "ignore": [], | ||
| "homepage": "https://github.com/PolymerElements/iron-flex-layout", | ||
| "_release": "1.3.1", | ||
| "_resolution": { | ||
| "type": "version", | ||
| "tag": "v1.3.1", | ||
| "commit": "6d88f29f3a7181daa2a5c7f678de44f0a0e6a717" | ||
| }, | ||
| "_source": "git://github.com/PolymerElements/iron-flex-layout.git", | ||
| "_target": "^1.3.1", | ||
| "_originalSource": "PolymerElements/iron-flex-layout" | ||
| } |
| @@ -0,0 +1,2 @@ | ||
| bower_components | ||
|
|
| @@ -0,0 +1,25 @@ | ||
| language: node_js | ||
| sudo: false | ||
| before_script: | ||
| - npm install -g bower polylint web-component-tester | ||
| - bower install | ||
| - polylint | ||
| env: | ||
| global: | ||
| - secure: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw= | ||
| - secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI= | ||
| - CXX=g++-4.8 | ||
| node_js: stable | ||
| addons: | ||
| firefox: latest | ||
| apt: | ||
| sources: | ||
| - google-chrome | ||
| - ubuntu-toolchain-r-test | ||
| packages: | ||
| - google-chrome-stable | ||
| - g++-4.8 | ||
| sauce_connect: true | ||
| script: | ||
| - xvfb-run wct | ||
| - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" |
| @@ -0,0 +1,55 @@ | ||
|
|
||
| <!--- | ||
| This README is automatically generated from the comments in these files: | ||
| iron-flex-layout.html | ||
| Edit those files, and our readme bot will duplicate them over here! | ||
| Edit this file, and the bot will squash your changes :) | ||
| The bot does some handling of markdown. Please file a bug if it does the wrong | ||
| thing! https://github.com/PolymerLabs/tedium/issues | ||
| --> | ||
|
|
||
| [](https://travis-ci.org/PolymerElements/iron-flex-layout) | ||
|
|
||
| _[Demo and API docs](https://elements.polymer-project.org/elements/iron-flex-layout)_ | ||
|
|
||
|
|
||
| ##<iron-flex-layout> | ||
|
|
||
| The `<iron-flex-layout>` component provides simple ways to use | ||
| [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), | ||
| also known as flexbox. This component provides two different ways to use flexbox: | ||
|
|
||
| 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). | ||
| The layout class stylesheet provides a simple set of class-based flexbox rules, that | ||
| let you specify layout properties directly in markup. You must include this file | ||
| in every element that needs to use them. | ||
|
|
||
| Sample use: | ||
|
|
||
| <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> | ||
|
|
||
| <style is="custom-style" include="iron-flex iron-flex-alignment"></style> | ||
|
|
||
| <div class="layout horizontal layout-start"> | ||
| <div>cross axis start alignment</div> | ||
| </div> | ||
|
|
||
| 1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). | ||
| The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function. | ||
|
|
||
|
|
||
|
|
||
| Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes) | ||
| are deprecated, and should not be used. To continue using layout properties | ||
| directly in markup, please switch to using the new `dom-module`-based | ||
| [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). | ||
| Please note that the new version does not use `/deep/`, and therefore requires you | ||
| to import the `dom-modules` in every element that needs to use them. | ||
|
|
||
| A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available. | ||
|
|
||
|
|
| @@ -0,0 +1,31 @@ | ||
| { | ||
| "name": "iron-flex-layout", | ||
| "version": "1.3.1", | ||
| "description": "Provide flexbox-based layouts", | ||
| "keywords": [ | ||
| "web-components", | ||
| "polymer", | ||
| "layout" | ||
| ], | ||
| "main": "iron-flex-layout.html", | ||
| "private": true, | ||
| "license": "http://polymer.github.io/LICENSE.txt", | ||
| "authors": [ | ||
| "The Polymer Authors" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/PolymerElements/iron-flex-layout.git" | ||
| }, | ||
| "dependencies": { | ||
| "polymer": "Polymer/polymer#^1.1.0" | ||
| }, | ||
| "devDependencies": { | ||
| "iron-component-page": "polymerelements/iron-component-page#^1.0.0", | ||
| "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", | ||
| "test-fixture": "PolymerElements/test-fixture#^1.0.0", | ||
| "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", | ||
| "web-component-tester": "^4.0.0" | ||
| }, | ||
| "ignore": [] | ||
| } |
| @@ -0,0 +1,396 @@ | ||
| <!doctype html> | ||
| <!-- | ||
| @license | ||
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
| Code distributed by Google as part of the polymer project is also | ||
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
| --> | ||
|
|
||
| <html> | ||
| <head> | ||
|
|
||
| <title>iron-flex-layout demo</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
| <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | ||
|
|
||
| <link rel="import" href="../../paper-styles/demo-pages.html"> | ||
| <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> | ||
| <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> | ||
| <link rel="import" href="../iron-flex-layout.html"> | ||
|
|
||
| <style is="custom-style" include="demo-pages-shared-styles"> | ||
| demo-snippet { | ||
| --demo-snippet-demo: { | ||
| padding: 0; | ||
| } | ||
| } | ||
| .container { | ||
| background-color: #ccc; | ||
| padding: 5px; | ||
| margin: 0; | ||
| } | ||
| .container > div { | ||
| padding: 15px; | ||
| margin: 5px; | ||
| background-color: white; | ||
| min-height: 20px; | ||
| } | ||
|
|
||
| .vertical-section-container { | ||
| max-width: 700px | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
| <body unresolved class="fullbleed"> | ||
| <div class="vertical-section-container centered"> | ||
| <h4>Horizontal and vertical layout</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex { | ||
| @apply(--layout-horizontal); | ||
| } | ||
| </style> | ||
| <div class="container flex"> | ||
| <div>one</div> | ||
| <div>two</div> | ||
| <div>three</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Flexible children</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-horizontal { | ||
| @apply(--layout-horizontal); | ||
| } | ||
| .flexchild { | ||
| @apply(--layout-flex); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-horizontal"> | ||
| <div>one</div> | ||
| <div class="flexchild">two (flex)</div> | ||
| <div>three</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Flexible children in vertical layouts</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-vertical { | ||
| @apply(--layout-vertical); | ||
| height: 220px; | ||
| } | ||
| .flexchild-vertical { | ||
| @apply(--layout-flex); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-vertical"> | ||
| <div>one</div> | ||
| <div class="flexchild-vertical">two (flex)</div> | ||
| <div>three</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Flex ratios</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-horizontal-with-ratios { | ||
| @apply(--layout-horizontal); | ||
| } | ||
| .flexchild { | ||
| @apply(--layout-flex); | ||
| } | ||
| .flex2child { | ||
| @apply(--layout-flex-2); | ||
| } | ||
| .flex3child { | ||
| @apply(--layout-flex-3); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-horizontal-with-ratios"> | ||
| <div class="flex3child">one</div> | ||
| <div class="flexchild">two</div> | ||
| <div class="flex2child">three</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Cross-axis stretch alignment (default)</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-stretch-align { | ||
| @apply(--layout-horizontal); | ||
| height: 120px; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-stretch-align"> | ||
| <div>stretch</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Cross-axis center alignment</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-center-align { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-center); | ||
| height: 120px; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-center-align"> | ||
| <div>center</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Cross-axis start alignment</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-start-align { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-start); | ||
| height: 120px; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-start-align"> | ||
| <div>start</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Cross-axis end alignment</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-end-align { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-end); | ||
| height: 120px; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-end-align"> | ||
| <div>end</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Justification, start justified</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-start-justified { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-start-justified); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-start-justified"> | ||
| <div>start-justified</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Justification, start justified</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-center-justified { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-center-justified); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-center-justified"> | ||
| <div>center-justified</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Justification, end justified</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-end-justified { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-end-justified); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-end-justified"> | ||
| <div>end-justified</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Justification, equal space between elements</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-equal-justified { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-justified); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-equal-justified"> | ||
| <div>justified</div> | ||
| <div>justified</div> | ||
| <div>justified</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Justification, equal space around each element</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-equal-around-justified { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-around-justified); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-equal-around-justified"> | ||
| <div>around-justified</div> | ||
| <div>around-justified</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Self alignment</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-self-align { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-justified); | ||
| height: 120px; | ||
| } | ||
| .flex-self-align div { | ||
| @apply(--layout-flex); | ||
| } | ||
| .child1 { | ||
| @apply(--layout-self-start); | ||
| } | ||
| .child2 { | ||
| @apply(--layout-self-center); | ||
| } | ||
| .child3 { | ||
| @apply(--layout-self-end); | ||
| } | ||
| .child4 { | ||
| @apply(--layout-self-stretch); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-self-align"> | ||
| <div class="child1">one</div> | ||
| <div class="child2">two</div> | ||
| <div class="child3">three</div> | ||
| <div class="child4">four</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Wrapping</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-wrap { | ||
| @apply(--layout-horizontal); | ||
| @apply(--layout-wrap); | ||
| width: 200px; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-wrap"> | ||
| <div>one</div> | ||
| <div>two</div> | ||
| <div>three</div> | ||
| <div>four</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>Reversed layouts</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .flex-reversed { | ||
| @apply(--layout-horizontal-reverse); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container flex-reversed"> | ||
| <div>one</div> | ||
| <div>two</div> | ||
| <div>three</div> | ||
| <div>four</div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
|
|
||
| <h4>General purpose rules</h4> | ||
| <demo-snippet> | ||
| <template> | ||
| <style is="custom-style"> | ||
| .general { | ||
| width: 100%; | ||
| } | ||
| .general > div { | ||
| background-color: #ccc; | ||
| padding: 4px; | ||
| margin: 12px; | ||
| } | ||
| .block { | ||
| @apply(--layout-block); | ||
| } | ||
| .invisible { | ||
| @apply(--layout-invisible); | ||
| } | ||
| .relative { | ||
| @apply(--layout-relative); | ||
| } | ||
| .fit { | ||
| @apply(--layout-fit); | ||
| } | ||
| </style> | ||
|
|
||
| <div class="general"> | ||
| <div>Before <span>[A Span]</span> After</div> | ||
| <div>Before <span class="block">[A Block Span]</span> After</div> | ||
| <div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div> | ||
| <div class="relative" style="height: 100px;"> | ||
| <div class="fit" style="background-color: #000;color: white">Fit</div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </demo-snippet> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,24 @@ | ||
| <!doctype html> | ||
| <!-- | ||
| @license | ||
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
| Code distributed by Google as part of the polymer project is also | ||
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
| --> | ||
| <html> | ||
| <head> | ||
|
|
||
| <title>iron-flex-layout</title> | ||
| <script src="../webcomponentsjs/webcomponents-lite.js"></script> | ||
| <link rel="import" href="../iron-component-page/iron-component-page.html"> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <iron-component-page></iron-component-page> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -1,261 +1,31 @@ | ||
| <!doctype html> | ||
| <!-- | ||
| @license | ||
| Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | ||
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
| Code distributed by Google as part of the polymer project is also | ||
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
| --> | ||
| <html> | ||
| <head> | ||
| <title>iron-flex-behavior tests</title> | ||
|
|
||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> | ||
| <script src="../../web-component-tester/browser.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <script> | ||
| WCT.loadSuites([ | ||
| 'iron-flex-layout.html', | ||
| 'iron-flex-layout.html?dom=shadow', | ||
| 'iron-flex-layout-classes.html', | ||
| 'iron-flex-layout-classes.html?dom=shadow' | ||
| ]); | ||
| </script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,41 @@ | ||
| { | ||
| "name": "iron-form-element-behavior", | ||
| "version": "1.0.6", | ||
| "license": "http://polymer.github.io/LICENSE.txt", | ||
| "private": true, | ||
| "main": "iron-form-element-behavior.html", | ||
| "authors": [ | ||
| "The Polymer Authors" | ||
| ], | ||
| "description": "Enables a custom element to be included in an iron-form", | ||
| "keywords": [ | ||
| "web-components", | ||
| "polymer", | ||
| "form" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/PolymerElements/iron-form-element-behavior.git" | ||
| }, | ||
| "dependencies": { | ||
| "polymer": "Polymer/polymer#^1.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", | ||
| "paper-styles": "PolymerElements/paper-styles#^1.0.0", | ||
| "test-fixture": "PolymerElements/test-fixture#^1.0.0", | ||
| "web-component-tester": "polymer/web-component-tester#^3.4.0", | ||
| "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" | ||
| }, | ||
| "ignore": [], | ||
| "homepage": "https://github.com/PolymerElements/iron-form-element-behavior", | ||
| "_release": "1.0.6", | ||
| "_resolution": { | ||
| "type": "version", | ||
| "tag": "v1.0.6", | ||
| "commit": "cf9e09ded62daf3363852ce98260aaad1ed0fae1" | ||
| }, | ||
| "_source": "git://github.com/PolymerElements/iron-form-element-behavior.git", | ||
| "_target": "^1.0.6", | ||
| "_originalSource": "PolymerElements/iron-form-element-behavior" | ||
| } |
| @@ -0,0 +1,22 @@ | ||
| language: node_js | ||
| sudo: false | ||
| before_script: | ||
| - npm install web-component-tester | ||
| - npm install bower | ||
| - 'export PATH=$PWD/node_modules/.bin:$PATH' | ||
| - bower install | ||
| env: | ||
| global: | ||
| - secure: EN5HtbAeaCE1IzGk5JlSq7GWcANh/zYgbpZn1y0VocfkZfzOv8cIh8Zmr4Q6shII6K07Fyx1LQuAjsURqX9mc3AmfMHgPIbpZGpOKrjvt1Vf0bPN+uIC9vIFj3sLQj12gcfJg48EXk6HWsHscCZ3+am1xvRflhNEY3TjHPrUTgkF+KLbBEfb4mCZwVc4dln76ffvTQ/cPI9eYczNp1q9wWpYvn794qRLtAkKuQ5Z1b6hunOAx/hzCjGNbJDO3gkxO68dzzSp9YDIhKEFAUlMDalwLRr7sNgB4sNeDCg4mmie5fe6xk831HvBYFxZxmXD1uS6/Hvd8MiBDiols3lwz8uEUnPyrwDlxUkjn2sl5S+gO8CcHU2mShUCl73JfBtyWDKPSfQLR5QHEk4eqNzNn2HinAE/aezi4/TVCY7P3ujeK8sFlTsb9vlywnlJO3fqyZ+lBwZ4CbNjOTs1L2W+guT1Oq30PJ5TVxU2mvmIMtdpPveZB0iM/PM9FECsb303KeV5Zomk4dp2MxirK1O/4mPAHIz9UUpGopGOtpuODnRV4Lq7V9HaDxYOZzAHZDK4mJ1y6tSRH/yMUTEidhG2j5F6MXmhbKXj3I0oR95xx1RH+b8myErvUBlto4jR21Pd+mOVlkU78CBSN9XGhtBQjklF5+aC8YeH1DEv6mTn2o8= | ||
| - secure: q3AjjaoaTZcdAdjIvzSf8Q1SdEg1mY6lBkeoDTMKJcftJ8zz1qIfjGzEuycSVVnOJhZ6WmvMMBxdThQCymF1wzT++SV+u34DYSFoZ5EhjM0TFhP63PRuhbE3DquPaISpM5aCH7epV4nMFD7PFE1BP4u/qiETAgPeAoY9LMT/JPclOfcQ3euwks3TSM6O8g7Ro1h1ElywCQ1souzkcjvJ3FxsqysJb7Mg/n9bmtwnkol/mrBaP6JzQMURUyswx7ZPj3qiFoA9ZLiNirzf+O781A4msKursjYrKr6TZtB6xcMlEg89YhFBXrLE9IEEM/fNp+vPNhaIA5VjYRy8iIK402RXpbh7/AlPD7yMFITeMSfT+Bqldur+pi0oN1N9SeWrmk6P+bdfdkdyGl1CVKP4S35z8cyFRgmvxO4/UG65cb66AdMeNVBEQsi2flCWgPyaTmOQ53YryCs7cFRu3zSMnU3F/gWqlmletgxGhFOBHTtEmr2A9QBLgg+EvB/83wj2dEEfMlIpoeq83/2PaE8hKAWyqPga7t532vU5AIFNOUk9vGzRCxsqGKF2j0/zFBdgHSLYCsWVrbjxmxdu6Fzi8ZATeqjDoc0eaIPhBkekOvDrUtUSHA9sSSG8j69GGUL4+WkoCMB74dz+GXz85fMJlMZWBXPtazDlNXYfU60T/1E= | ||
| node_js: 4 | ||
| addons: | ||
| firefox: latest | ||
| apt: | ||
| sources: | ||
| - google-chrome | ||
| packages: | ||
| - google-chrome-stable | ||
| script: | ||
| - xvfb-run wct | ||
| - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" |
| @@ -1,35 +1,31 @@ | ||
| { | ||
| "name": "iron-form-element-behavior", | ||
| "version": "1.0.6", | ||
| "license": "http://polymer.github.io/LICENSE.txt", | ||
| "private": true, | ||
| "main": "iron-form-element-behavior.html", | ||
| "authors": [ | ||
| "The Polymer Authors" | ||
| ], | ||
| "description": "Enables a custom element to be included in an iron-form", | ||
| "keywords": [ | ||
| "web-components", | ||
| "polymer", | ||
| "form" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/PolymerElements/iron-form-element-behavior.git" | ||
| }, | ||
| "dependencies": { | ||
| "polymer": "Polymer/polymer#^1.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", | ||
| "paper-styles": "PolymerElements/paper-styles#^1.0.0", | ||
| "test-fixture": "PolymerElements/test-fixture#^1.0.0", | ||
| "web-component-tester": "polymer/web-component-tester#^3.4.0", | ||
| "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" | ||
| }, | ||
| "ignore": [] | ||
| } |
| @@ -0,0 +1,67 @@ | ||
| <!doctype html> | ||
| <!-- | ||
| @license | ||
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
| Code distributed by Google as part of the polymer project is also | ||
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
| --> | ||
| <html> | ||
| <head> | ||
|
|
||
| <title>iron-form-element-behavior demo</title> | ||
|
|
||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> | ||
|
|
||
| <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | ||
|
|
||
| <link rel="import" href="../../paper-styles/demo-pages.html"> | ||
| <link rel="import" href="simple-form.html"> | ||
| <link rel="import" href="simple-element.html"> | ||
| </head> | ||
| <style> | ||
| input { | ||
| margin-bottom: 24px; | ||
| width: 200px; | ||
| } | ||
| </style> | ||
| <body> | ||
|
|
||
| <div class="vertical-section-container centered"> | ||
| <div class="vertical-section"> | ||
| <form is="simple-form" id="form"> | ||
| Element with iron-form-element-behavior <input is="simple-element" type="text" name="one" value="one"> | ||
| <br> | ||
| Element without iron-form-element-behavior <input type="text" name="two" value="two"> | ||
| <br> | ||
| Element with iron-form-element-behavior <input is="simple-element" type="text" name="three" value="three"> | ||
| </form> | ||
|
|
||
| <h4>Elements tracked by the form: <button onclick="update()">Update</button> </h4> | ||
|
|
||
| <ul id="output"> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| function update() { | ||
| var output = document.getElementById('output'); | ||
| var elements = document.getElementById('form').formElements; | ||
| document.getElementById('output').innerHTML = ''; | ||
| for (var i = 0; i < elements.length; i++) { | ||
| var li = document.createElement('li'); | ||
| var text = document.createTextNode(elements[i].value); | ||
| li.appendChild(text); | ||
| output.appendChild(li); | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
|
|
||
|
|
||
| </html> |
| @@ -0,0 +1,71 @@ | ||
| <!doctype html> | ||
| <!-- | ||
| @license | ||
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
| Code distributed by Google as part of the polymer project is also | ||
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
| --> | ||
| <html> | ||
| <head> | ||
| <title>iron-form-element-behavior</title> | ||
|
|
||
| <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | ||
| <script src="../../web-component-tester/browser.js"></script> | ||
|
|
||
| <link rel="import" href="../../polymer/polymer.html"> | ||
| <link rel="import" href="../iron-form-element-behavior.html"> | ||
| <link rel="import" href="simple-element.html"> | ||
| <link rel="import" href="simple-form.html"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <test-fixture id="basic"> | ||
| <template> | ||
| <form is="simple-form"></form> | ||
| </template> | ||
| </test-fixture> | ||
|
|
||
| <script> | ||
| suite('basic', function() { | ||
| var form; | ||
|
|
||
| setup(function() { | ||
| form = fixture('basic'); | ||
| }); | ||
|
|
||
| test('elements fire an event when attached', function(done) { | ||
| var element = document.createElement('input', 'simple-element'); | ||
|
|
||
| var handler = sinon.spy(); | ||
| form.addEventListener('iron-form-element-register', handler); | ||
|
|
||
| form.appendChild(element); | ||
| Polymer.Base.async(function() { | ||
| expect(handler.callCount).to.be.equal(1); | ||
| done(); | ||
| }, 1); | ||
| }); | ||
|
|
||
| test('elements fire an event when detached', function(done) { | ||
| var element = document.createElement('input', 'simple-element'); | ||
| form.appendChild(element); | ||
| element._parentForm = form; | ||
|
|
||
| var handler = sinon.spy(); | ||
| form.addEventListener('iron-form-element-unregister', handler); | ||
|
|
||
| form.removeChild(element); | ||
| Polymer.Base.async(function() { | ||
| expect(handler.callCount).to.be.equal(1); | ||
| done(); | ||
| }, 1); | ||
| }); | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,51 @@ | ||
| { | ||
| "name": "iron-form", | ||
| "version": "1.1.4", | ||
| "description": "Makes it easier to manage forms", | ||
| "keywords": [ | ||
| "web-components", | ||
| "polymer", | ||
| "form" | ||
| ], | ||
| "authors": [ | ||
| "The Polymer Authors" | ||
| ], | ||
| "main": "iron-form.html", | ||
| "private": true, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/PolymerElements/iron-form.git" | ||
| }, | ||
| "license": "http://polymer.github.io/LICENSE.txt", | ||
| "homepage": "https://github.com/PolymerElements/iron-form", | ||
| "ignore": [], | ||
| "dependencies": { | ||
| "polymer": "Polymer/polymer#^1.1.0", | ||
| "iron-ajax": "PolymerElements/iron-ajax#^1.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", | ||
| "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", | ||
| "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0", | ||
| "paper-button": "PolymerElements/paper-button#^1.0.0", | ||
| "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0", | ||
| "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0", | ||
| "paper-input": "PolymerElements/paper-input#^1.0.0", | ||
| "paper-item": "PolymerElements/paper-item#^1.0.0", | ||
| "paper-menu": "PolymerElements/paper-menu#^1.0.0", | ||
| "paper-spinner": "PolymerElements/paper-spinner#^1.0.0", | ||
| "paper-styles": "PolymerElements/paper-styles#^1.0.0", | ||
| "test-fixture": "PolymerElements/test-fixture#^1.0.0", | ||
| "web-component-tester": "^4.0.0", | ||
| "webcomponentsjs": "^0.7.0" | ||
| }, | ||
| "_release": "1.1.4", | ||
| "_resolution": { | ||
| "type": "version", | ||
| "tag": "v1.1.4", | ||
| "commit": "8559a69ecc0481b235f91f1584103240ff76d4c4" | ||
| }, | ||
| "_source": "git://github.com/PolymerElements/iron-form.git", | ||
| "_target": "^1.1.4", | ||
| "_originalSource": "PolymerElements/iron-form" | ||
| } |
| @@ -0,0 +1,23 @@ | ||
| language: node_js | ||
| sudo: required | ||
| before_script: | ||
| - npm install -g bower polylint web-component-tester | ||
| - bower install | ||
| - polylint | ||
| env: | ||
| global: | ||
| - secure: JeSfmBNQGyT7fu9NURSHqK9miBYrieoVdCnzOIq1QRDpWEiUGJKrcWKbabA/1MrlYfbQDFwXIDGrv0hcZzf0xbDblo5s/jUnep1vq/w/IRznEDnhJelpjG6c38vlBbPQOZI3L32eu8w5BBmlXhc4XXpUGkIy94O1Iz7Tn3zkeFI/fKhMyrmgDUOuehP0EHyoKxLCyWGLV+aTRtif6TK/wn6ULwM+GvLiS7nykrnA2WoDEECAuCoIsfRD9UFoLH4dNmOoiEHGeSx3rL6aE0TV9GVpPpBkL6qe8LFJLV4GJsekVyeOnKlekbzts8joIrR62P9m2BHZMQkizyx6Tj22vF6uXI8HAvocNIbijiJPSKFRA2Ir6ZAtBKPFMv73upROSvzqT+8UjW4DM9EDQiheCZ+Hkv0cQqtSmmiS3GxrTxW622lKdg2uVbD2qH2Ac2wJNGztukKtAyR2wSyjD7R/wE2MiQrT2YlGw95aMMqVylF1CtXoUJWGXUdfT6NZ7WCjbRj3fwABBY6BT+bJioIolHORdY6QbFUJ8GASqHqYlZShd23JtM5LJeDyJrJ4oEWNJ7q+jYl5xN7zwy/W0H86bn+6JX/Lxq71kvkohpzAHwSWAuAANLYf7cIUZ7GBo1lUzWaSJ1SaW981jH9s87NnyBP2thJAnyr78T6UXjPFZYk= | ||
| - secure: THJhGmuNJqLVeRfN2qJL1FKH3TXNwovC0z8G1GU4ML3pYbRL8oFw7nrtnofwgI99axLNEoJFZnkWcmkKRWlDHYX+LwQCUtYr3eW/pncrWGVBElr9HUgw6q0tY0o6v1Oe0Oj3kqxWuFkA1Kv8V7bHvB9ABT7CimwXDAC+uwP4SDqEtlVz8LAg6G74ywJaKg+S1gL8EHTIAGjeMSfKw4UjFAi6QKebJBsPOu8qmGrBSSdaLoDKhQb+kJqcLncJ0PB2AKC8zTzpxsDSwZizGDGLcbuFR1pnqTqISKgfpTVycTHJrEQwYsS6bTR7X86i3lcJ4H5dtI/HHaAQTmeT3JpvTfz5f9dvAuJVqimQOzdFlKM7ehhNk3j9KtED/vnQW9+0AJhOT9+7trokW++jl219QS29FOPYTxSo/XvI6iLZfOr4X0l4VhNkgHeE6EyCUoGNwDRxUvn+KcsQMk6JdHLY+lCckZ+tRFQIUjMPqjn9tB/MjBqtXxDhF5ZjaOcLufzuywKBzlMT4OkAiOGK9qFENKpTVaqvmRPPM1bjkZuzfTBJTOzWDznf2V4r65/s6ZRpoqEy0ozb7NjUEjYOR+OuZfKYVwT5VmAykKLNW3eQJc1zJjvhjghSIxOWH9AvD18UeQtEcv2J5pVFIp+BFVR25i0BH+efOwWJ49hk0o0N+Dw= | ||
| node_js: stable | ||
| addons: | ||
| firefox: '46.0' | ||
| apt: | ||
| sources: | ||
| - google-chrome | ||
| packages: | ||
| - google-chrome-stable | ||
| sauce_connect: true | ||
| script: | ||
| - xvfb-run wct | ||
| - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi | ||
| dist: trusty |
| @@ -0,0 +1,78 @@ | ||
|
|
||
| <!--- | ||
| This README is automatically generated from the comments in these files: | ||
| iron-form.html | ||
| Edit those files, and our readme bot will duplicate them over here! | ||
| Edit this file, and the bot will squash your changes :) | ||
| The bot does some handling of markdown. Please file a bug if it does the wrong | ||
| thing! https://github.com/PolymerLabs/tedium/issues | ||
| --> | ||
|
|
||
| [](https://travis-ci.org/PolymerElements/iron-form) | ||
|
|
||
| _[Demo and API docs](https://elements.polymer-project.org/elements/iron-form)_ | ||
|
|
||
|
|
||
| ##<iron-form> | ||
|
|
||
| `<iron-form>` is an HTML `<form>` element that can validate and submit any custom | ||
| elements that implement `Polymer.IronFormElementBehavior`, as well as any | ||
| native HTML elements. For more information on which attributes are | ||
| available on the native form element, see [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) | ||
|
|
||
| It supports both `get` and `post` methods, and uses an `iron-ajax` element to | ||
| submit the form data to the action URL. | ||
|
|
||
| Example: | ||
|
|
||
| ```html | ||
| <form is="iron-form" id="form" method="post" action="/form/handler"> | ||
| <paper-input name="name" label="name"></paper-input> | ||
| <input name="address"> | ||
| ... | ||
| </form> | ||
| ``` | ||
|
|
||
| By default, a native `<button>` element will submit this form. However, if you | ||
| want to submit it from a custom element's click handler, you need to explicitly | ||
| call the form's `submit` method. | ||
|
|
||
| Example: | ||
|
|
||
| ```html | ||
| <paper-button raised onclick="submitForm()">Submit</paper-button> | ||
|
|
||
| function submitForm() { | ||
| document.getElementById('form').submit(); | ||
| } | ||
| ``` | ||
|
|
||
| To customize the request sent to the server, you can listen to the `iron-form-presubmit` | ||
| event, and modify the form's[`iron-ajax`](https://elements.polymer-project.org/elements/iron-ajax) | ||
| object. However, If you want to not use `iron-ajax` at all, you can cancel the | ||
| event and do your own custom submission: | ||
|
|
||
| Example of modifying the request, but still using the build-in form submission: | ||
|
|
||
| ```javascript | ||
| form.addEventListener('iron-form-presubmit', function() { | ||
| this.request.method = 'put'; | ||
| this.request.params = someCustomParams; | ||
| }); | ||
| ``` | ||
|
|
||
| Example of bypassing the build-in form submission: | ||
|
|
||
| ```javascript | ||
| form.addEventListener('iron-form-presubmit', function(event) { | ||
| event.preventDefault(); | ||
| var firebase = new Firebase(form.getAttribute('action')); | ||
| firebase.set(form.serialize()); | ||
| }); | ||
| ``` | ||
|
|
||
|
|
| @@ -1,31 +1,42 @@ | ||
| { | ||
| "name": "iron-form", | ||
| "version": "1.1.4", | ||
| "description": "Makes it easier to manage forms", | ||
| "keywords": [ | ||
| "web-components", | ||
| "polymer", | ||
| "form" | ||
| ], | ||
| "authors": [ | ||
| "The Polymer Authors" | ||
| ], | ||
| "main": "iron-form.html", | ||
| "private": true, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/PolymerElements/iron-form.git" | ||
| }, | ||
| "license": "http://polymer.github.io/LICENSE.txt", | ||
| "homepage": "https://github.com/PolymerElements/iron-form", | ||
| "ignore": [], | ||
| "dependencies": { | ||
| "polymer": "Polymer/polymer#^1.1.0", | ||
| "iron-ajax": "PolymerElements/iron-ajax#^1.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", | ||
| "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", | ||
| "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0", | ||
| "paper-button": "PolymerElements/paper-button#^1.0.0", | ||
| "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0", | ||
| "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0", | ||
| "paper-input": "PolymerElements/paper-input#^1.0.0", | ||
| "paper-item": "PolymerElements/paper-item#^1.0.0", | ||
| "paper-menu": "PolymerElements/paper-menu#^1.0.0", | ||
| "paper-spinner": "PolymerElements/paper-spinner#^1.0.0", | ||
| "paper-styles": "PolymerElements/paper-styles#^1.0.0", | ||
| "test-fixture": "PolymerElements/test-fixture#^1.0.0", | ||
| "web-component-tester": "^4.0.0", | ||
| "webcomponentsjs": "^0.7.0" | ||
| } | ||
| } |