├── .bowerrc
├── .gitignore
├── .npmignore
├── .yo-rc.json
├── README.md
├── animations
    ├── fade-in-slide-from-left-animation.html
    ├── fade-in-slide-from-right-animation.html
    ├── fade-out-slide-left-animation.html
    └── fade-out-slide-right-animation.html
├── bower.json
├── demo
    ├── index.html
    └── paper-stepper-sandbox
    │   ├── index.html
    │   └── paper-stepper-sandbox.html
├── hero.svg
├── index.html
├── paper-step.html
├── paper-stepper.html
├── step-horizontal-label.html
├── step-label-behavior.html
├── step-label-shared-styles.html
├── step-vertical-label.html
└── test
    ├── basic-test.html
    └── index.html


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"directory": "bower_components"
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | 


--------------------------------------------------------------------------------
/.yo-rc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "generator-polymer": {
3 |     "ghUser": "Zecat"
4 |   }
5 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # paper-stepper
 2 | 
 3 | 
 4 | Paper-stepper is an element made with [Polymer](polymer-project.org/1.0/) to easily create a stepper with respect to the [material specification](https://www.google.com/design/spec/components/steppers.html). 
 5 | 
 6 | 
 7 | > Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps. They may also be used for navigation.
 8 | 
 9 | ## demo & doc
10 | 
11 | See [component page](http://zecat.github.io/paper-stepper)
12 | 
13 | ## installation
14 | 
15 | `bower install -S Zecat/paper-stepper#v2.0-beta.5`
16 | 
17 | ## Basic use
18 | 
19 | ```html
20 | <paper-stepper>
21 | 	<paper-step label="step 1"> content step 1 </paper-step>
22 | 	<paper-step label="step 2"> content step 2 </paper-step>
23 | 	<paper-step label="step 3"> content step 3 </paper-step>
24 | </paper-stepper>
25 | ```
26 | 


--------------------------------------------------------------------------------
/animations/fade-in-slide-from-left-animation.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../polymer/polymer.html">
12 | <link rel="import" href="../../neon-animation/neon-animation-behavior.html">
13 | <link rel="import" href="../../neon-animation/web-animations.html">
14 | 
15 | <script>
16 | 
17 |   Polymer({
18 | 
19 |     is: 'fade-in-slide-from-left-animation',
20 | 
21 |     behaviors: [
22 |       Polymer.NeonAnimationBehavior
23 |     ],
24 | 
25 |     configure: function(config) {
26 |       var node = config.node;
27 | 
28 |       this._effect = new KeyframeEffect(node, [
29 |         {'transform': 'translateX(-100%)', 'opacity': '0'},
30 |         {'transform': 'translateX(-50%)', 'opacity': '0'},
31 |         {'transform': 'none', 'opacity': '1'}
32 |       ], this.timingFromConfig(config));
33 | 
34 |       if (config.transformOrigin) {
35 |         this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
36 |       } else {
37 |         this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
38 |       }
39 | 
40 |       return this._effect;
41 |     }
42 | 
43 |   });
44 | 
45 | </script>
46 | 


--------------------------------------------------------------------------------
/animations/fade-in-slide-from-right-animation.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../polymer/polymer.html">
12 | <link rel="import" href="../../neon-animation/neon-animation-behavior.html">
13 | <link rel="import" href="../../neon-animation/web-animations.html">
14 | 
15 | <script>
16 | 
17 |   Polymer({
18 | 
19 |     is: 'fade-in-slide-from-right-animation',
20 | 
21 |     behaviors: [
22 |       Polymer.NeonAnimationBehavior
23 |     ],
24 | 
25 |     configure: function(config) {
26 |       var node = config.node;
27 | 
28 |       this._effect = new KeyframeEffect(node, [
29 |         {'transform': 'translateX(100%)', 'opacity': '0'},
30 |         {'transform': 'translateX(50%)', 'opacity': '0'},
31 |         {'transform': 'none', 'opacity': '1'}
32 |       ], this.timingFromConfig(config));
33 | 
34 |       if (config.transformOrigin) {
35 |         this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
36 |       } else {
37 |         this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
38 |       }
39 | 
40 |       return this._effect;
41 |     }
42 | 
43 |   });
44 | 
45 | </script>
46 | 


--------------------------------------------------------------------------------
/animations/fade-out-slide-left-animation.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../polymer/polymer.html">
12 | <link rel="import" href="../../neon-animation/neon-animation-behavior.html">
13 | <link rel="import" href="../../neon-animation/web-animations.html">
14 | 
15 | <script>
16 | 
17 |   Polymer({
18 | 
19 |     is: 'fade-out-slide-left-animation',
20 | 
21 |     behaviors: [
22 |       Polymer.NeonAnimationBehavior
23 |     ],
24 | 
25 |     configure: function(config) {
26 |       var node = config.node;
27 | 
28 |       this._effect = new KeyframeEffect(node, [
29 |         {'transform': 'none', 'opacity': '1'},
30 |         {'transform': 'translateX(-50%)', 'opacity': '0'},
31 |         {'transform': 'translateX(-100%)', 'opacity': '0'},
32 |       ], this.timingFromConfig(config));
33 | 
34 |       if (config.transformOrigin) {
35 |         this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
36 |       } else {
37 |         this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
38 |       }
39 | 
40 |       return this._effect;
41 |     }
42 | 
43 |   });
44 | 
45 | </script>
46 | 


--------------------------------------------------------------------------------
/animations/fade-out-slide-right-animation.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../polymer/polymer.html">
12 | <link rel="import" href="../../neon-animation/neon-animation-behavior.html">
13 | <link rel="import" href="../../neon-animation/web-animations.html">
14 | 
15 | <script>
16 | 
17 |   Polymer({
18 | 
19 |     is: 'fade-out-slide-right-animation',
20 | 
21 |     behaviors: [
22 |       Polymer.NeonAnimationBehavior
23 |     ],
24 | 
25 |     configure: function(config) {
26 |       var node = config.node;
27 | 
28 |       this._effect = new KeyframeEffect(node, [
29 |         {'transform': 'none', 'opacity': '1'},
30 |         {'transform': 'translateX(50%)', 'opacity': '1'},
31 |         {'transform': 'translateX(100%)', 'opacity': '0'}
32 |       ], this.timingFromConfig(config));
33 | 
34 |       if (config.transformOrigin) {
35 |         this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
36 |       } else {
37 |         this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
38 |       }
39 | 
40 |       return this._effect;
41 |     }
42 | 
43 |   });
44 | 
45 | </script>
46 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "paper-stepper",
 3 |   "version": "2.0-beta.5",
 4 |   "authors": [
 5 |     "Zecat <jullienfelix@gmail.com>"
 6 |   ],
 7 |   "description": "Material paper-stepper element.",
 8 |   "keywords": [
 9 |     "web-component",
10 |     "polymer",
11 |     "seed"
12 |   ],
13 |   "main": "paper-stepper.html",
14 |   "license": "http://polymer.github.io/LICENSE.txt",
15 |   "homepage": "https://github.com/zecat/paper-stepper/",
16 |   "ignore": [
17 |     "/.*",
18 |     "/test/"
19 |   ],
20 |   "dependencies": {
21 |     "polymer": "Polymer/polymer#^1.2.0",
22 |     "paper-button": "PolymerElements/paper-button#^1.0.11",
23 |     "iron-icons": "PolymerElements/iron-icons#^1.1.3",
24 |     "paper-styles": "PolymerElements/paper-styles#^1.1.4",
25 |     "paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
26 |     "iron-selector": "PolymerElements/iron-selector#^1.3.0",
27 |     "iron-icon": "PolymerElements/iron-icon#^1.0.8",
28 |     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
29 |     "neon-animation": "PolymerElements/neon-animation#^1.1.1",
30 |     "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5",
31 |     "iron-collapse": "PolymerElements/iron-collapse#^1.2.0"
32 |   },
33 |   "devDependencies": {
34 |     "paper-input": "PolymerElements/paper-input#^1.1.10",
35 |     "paper-material": "PolymerElements/paper-material#^1.0.6",
36 |     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
37 |     "web-component-tester": "*",
38 |     "iron-form": "PolymerElements/iron-form#^1.0.16",
39 |     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2",
40 |     "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0",
41 |     "app-layout": "PolymerElements/app-layout#^0.10.2",
42 |     "paper-menu": "PolymerElements/paper-menu#^1.2.2",
43 |     "iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0",
44 |     "paper-item": "PolymerElements/paper-item#^1.2.1",
45 |     "paper-toast": "PolymerElements/paper-toast#^1.3.0",
46 |     "paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 | @license
  4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 | Code distributed by Google as part of the polymer project is also
  9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 10 | -->
 11 | <html>
 12 |   <head>
 13 |     <meta charset="utf-8">
 14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 15 |     <title>Paper-stepper Demo</title>
 16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 17 |     <link rel="import" href="../../paper-input/paper-input.html">
 18 |     <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
 19 |     <link rel="import" href="../../paper-input/paper-textarea.html">
 20 |     <link rel="import" href="../../paper-styles/shadow.html">
 21 |     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
 22 |     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 23 |     <link rel="import" href="../../iron-form/iron-form.html">
 24 |     <link rel="import" href="../../iron-flex-layout/iron-flex-layout-classes.html">
 25 |     <link rel="import" href="../../app-layout/app-drawer/app-drawer.html">
 26 |     <link rel="import" href="../../app-layout/app-drawer-layout/app-drawer-layout.html">
 27 |     <link rel="import" href="../../paper-menu/paper-menu.html">
 28 |     <link rel="import" href="../../paper-menu/paper-submenu.html">
 29 |     <link rel="import" href="../../paper-item/paper-item.html">
 30 |     <link rel="import" href="../../paper-toast/paper-toast.html">
 31 |     <link rel="import" href="../../iron-scroll-spy/iron-auto-scroll-spy.html">
 32 |     <link rel="import" href="../../neon-animation/animations/slide-from-left-animation.html">
 33 |     <link rel="import" href="../../neon-animation/animations/slide-from-right-animation.html">
 34 |     <link rel="import" href="../../neon-animation/animations/slide-left-animation.html">
 35 |     <link rel="import" href="../../neon-animation/animations/slide-right-animation.html">
 36 |     <link rel="import" href="../../neon-animation/animations/fade-out-animation.html">
 37 |     <link rel="import" href="../paper-stepper.html">
 38 |     <link rel="import" href="paper-stepper-sandbox/paper-stepper-sandbox.html">
 39 |     <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300" rel="stylesheet" type="text/css">
 40 |   </head>
 41 |   <body unresolved>
 42 | 
 43 |   <style is="custom-style" include="demo-pages-shared-styles iron-flex">
 44 |     body {
 45 |       padding:0;
 46 |     }
 47 |     :root {
 48 |       --primary-color: var(--paper-blue-500);
 49 |     }
 50 |     demo-snippet {
 51 |       margin: 24px 24px 42px 24px;
 52 |       --demo-snippet-demo: {
 53 |         padding: 0;
 54 |       };
 55 |     }
 56 |     app-drawer {
 57 |       z-index: 1;
 58 |       --app-drawer-content-container: {
 59 |         background: var(--primary-color);
 60 |       };
 61 |     }
 62 |     iron-auto-scroll-spy {
 63 |       padding: 0 24px;
 64 |       height: 100vh;
 65 |     }
 66 |     iron-auto-scroll-spy > * {
 67 |       padding-bottom: 48px;
 68 |     }
 69 |     iron-auto-scroll-spy > * > :not(h2){
 70 |       margin-left: 24px;
 71 |       margin-right: 24px;
 72 |     }
 73 |     paper-item {
 74 |       cursor: pointer;
 75 |       font-family: 'Roboto Slab', serif;
 76 |       color: white;
 77 |       font-size: 18px;
 78 |       --paper-item-focused-before: {
 79 |         opacity: 0.005;
 80 |       };
 81 |       --paper-item-selected: {
 82 |         background: rgba(255, 255, 255, 0.2);
 83 |       };
 84 |     }
 85 |     paper-menu {
 86 |       background: var(--primary-color);
 87 |       -webkit-overflow-scrolling: touch;
 88 |       overflow: auto;
 89 |       height: 100%;
 90 |     }
 91 |     h3, li, p {
 92 |       color: var(--paper-grey-800);
 93 |     }
 94 |     h2 {
 95 |       margin: 0;
 96 |       padding: 24px 24px 48px 0;
 97 |       font-size: 30px;
 98 |       color: var(--primary-color);
 99 |       font-family: 'Roboto Slab', serif;
100 |     }
101 |     h2:after {
102 |       content: '';
103 |       display: block;
104 |       width: 100%;
105 |       height: 1px;
106 |       background: var(--primary-color);
107 |       margin-top: 2px;
108 |     }
109 |     h3 {
110 |       padding-top: 24px;
111 |     }
112 |     li {
113 |       padding: 5px 0;
114 |     }
115 |     ul {
116 |       margin: 0;
117 |     }
118 |     a {
119 |       color: var(--primary-color);
120 |       text-decoration: none;
121 |     }
122 |     a:hover {
123 |       text-decoration: underline;
124 |     }
125 |     @media (max-width: 1000px) {
126 |       iron-auto-scroll-spy > * > :not(h2){
127 |         margin-left: 0;
128 |         margin-right: 0;
129 |       }
130 |     }
131 |   </style>
132 | 
133 |   <app-drawer-layout fullbleed id="drawerLayout">
134 |     <app-drawer swipe-open>
135 |       <paper-menu id="paperMenu">
136 |         <paper-item>Description</paper-item>
137 |         <paper-item>Configuration</paper-item>
138 |         <paper-item>Validation</paper-item>
139 |         <paper-item>Layout</paper-item>
140 |         <paper-item>Buttons</paper-item>
141 |         <paper-item>Styling</paper-item>
142 |         <paper-item>Selection</paper-item>
143 |         <paper-item>Animations</paper-item>
144 |         <paper-item>Events</paper-item>
145 |         <paper-item>Methods</paper-item>
146 |         <paper-item>Binding</paper-item>
147 |         <paper-item>Extra</paper-item>
148 |         <paper-item>Sandbox</paper-item>
149 |         <paper-submenu>
150 |           <paper-item></paper-item>
151 |           <paper-item></paper-item>
152 |         </paper-submenu>
153 |       </paper-menu>
154 |     </app-drawer>
155 |     <iron-auto-scroll-spy id="scrollSpy" activate-event="" no-scroll-for-initial-selection>
156 |       <div>
157 |         <h2>Description</h2>
158 |         <p>Paper-stepper is an element made with <a href="https://www.polymer-project.org/1.0/" target="_blank">Polymer</a> with respect to the <a href="https://www.google.com/design/spec/components/steppers.html" target="_blank">material specifications</a>.</p>
159 |         <p>Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps. They may also be used for navigation.</p>
160 |         <p>Spec recommendation: Avoid using steppers to break up sections in a short form, or multiple times on one page and don’t embed steppers within steppers.</p>
161 |         <p>Start using now <strong>bower install -S Zecat/paper-stepper#v2.0-beta.5</strong></p>
162 |         <p>Note, it is still a beta release, attributes and methods might change suddenly.</p>  
163 |       </div>
164 |       <div>
165 |         <h2>Configuration</h2>
166 |         <p>Paper-stepper is a container for paper-step's. Give a <strong>label</strong> to your steps, once the user tap the primary button, the step is saved and the stepper progress. He can come back to update a saved step if it has <strong>editable</strong> attribute set.</p>
167 |         <ul>
168 |           <li>Editable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session.</li>
169 |           <li>Non-editable steps should be used when the users cannot edit a step later and when step editing poses a distraction risk to form completion.</li>
170 |         </ul>
171 |         <demo-snippet>
172 |           <template>
173 |             <paper-stepper>
174 |               <paper-step label="step 1"></paper-step>
175 |               <paper-step label="step 2"></paper-step>
176 |               <paper-step label="step 3" editable></paper-step>
177 |               <paper-step label="step 4"></paper-step>
178 |             </paper-stepper>
179 |           </template>
180 |         </demo-snippet>
181 |         <p>Include any content you want in a step, simply ensure that the contents for each step are responsive and don’t embed steppers within steppers. If the content overflow, the step will be scrollable.</p>
182 |         <demo-snippet>
183 |           <template>
184 |             <style>
185 |               iframe {
186 |                 width: 100%;
187 |                 height: 100%;
188 |               }
189 |             </style>
190 |             <paper-stepper>
191 |               <paper-step label="Listen to music" editable>
192 |                 <iframe src="https://www.youtube.com/embed/QPuU-iTIFoI?list=PL-su_cs7W8Vqhoy03LlE4nviUll_qSyPZ" frameborder="0" allowfullscreen></iframe>
193 |               </paper-step>
194 |               <paper-step label="Leave a comment">
195 |                 <paper-input label="Name"></paper-input>
196 |                 <paper-textarea label="Your message" rows="12"></paper-textarea>
197 |               </paper-step>
198 |             </paper-stepper>
199 |           </template>
200 |         </demo-snippet>
201 |         <p>The stepper is non-linear by default, which allow users to enter a multi-step flow at any point whereas a <strong>linear</strong> stepper requires users to complete one step in order to move on to the next.</p>
202 |         <demo-snippet>
203 |           <template>
204 |             <paper-stepper linear>
205 |               <paper-step label="step 1"></paper-step>
206 |               <paper-step label="step 2"></paper-step>
207 |               <paper-step label="step 3" editable></paper-step>
208 |               <paper-step label="step 4"></paper-step>
209 |             </paper-stepper>
210 |           </template>
211 |         </demo-snippet>
212 |         <p><strong>optional</strong> steps don't bloc the progression in linear stepper [<strong>Missing feature</strong>]. You can configure the text displayed which default to "optional" with <strong>optional-text</strong> attribute.</p>
213 |         <demo-snippet>
214 |           <template>
215 |             <paper-stepper linear optional-text="opcional">
216 |               <paper-step label="etapa 1"></paper-step>
217 |               <paper-step label="etapa 2" optional></paper-step>
218 |               <paper-step label="etapa 3"></paper-step>
219 |               <paper-step label="etapa 4"></paper-step>
220 |             </paper-stepper>
221 |           </template>
222 |         </demo-snippet>
223 |       </div>
224 |       <div>
225 |         <h2>Validation</h2>
226 |         <p>Paper-step implement <a href="https://elements.polymer-project.org/elements/iron-validatable-behavior" target="_blank">IronValidatableBehavior</a>. Override <strong>_getValidity()</strong> method on a step to create your own validation logique.</p>
227 |          <demo-snippet>
228 |           <template>
229 |             <template is="dom-bind" id="validationScope">
230 | 
231 |               <paper-stepper linear>
232 |                 <paper-step label="step 1" id="stepToValidate">
233 |                   <form is="iron-form" id="formStep1">
234 |                     <paper-input label="Enter something to continue" required error-message="Field required"></paper-input>
235 |                   </form>
236 |                 </paper-step>
237 |                 <paper-step label="step 2"></paper-step>
238 |               </paper-stepper>
239 | 
240 |               <script>
241 |                 var scope = document.getElementById('validationScope');
242 |                 var step = scope.$.stepToValidate;
243 |                 var form = scope.$.formStep1;
244 |                 step._getValidity = function() {
245 |                   return form.validate();
246 |                 };
247 |               </script>
248 | 
249 |             </template>
250 |           </template>
251 |         </demo-snippet>
252 |       </div>
253 |       <div>
254 |       <h2>Layout</h2>
255 |       <p>Paper-stepper is horizontal by default. Horizontal steppers are ideal when the contents of one step depend on an earlier step. Avoid using long step names in horizontal steppers.</p>
256 |       <p>The <strong>alternative label</strong> take effect in horizontal layout and allows slightly longer labels.</p>
257 |       <demo-snippet>
258 |         <template>
259 |           <paper-stepper alternative-label>
260 |             <paper-step label="step 1"></paper-step>
261 |             <paper-step label="step 2"></paper-step>
262 |             <paper-step label="step 3" editable></paper-step>
263 |             <paper-step label="step 4"></paper-step>
264 |           </paper-stepper>
265 |         </template>
266 |       </demo-snippet>
267 |       <p>Use the <strong>vertical</strong> layout for narrow screen sizes, when your labels are too long or when you have too many steps. It is ideal for mobile.</p>
268 |       <demo-snippet>
269 |         <template>
270 |           <paper-stepper vertical>
271 |             <paper-step label="step 1"></paper-step>
272 |             <paper-step label="step 2"></paper-step>
273 |             <paper-step label="step 3" editable></paper-step>
274 |             <paper-step label="step 4"></paper-step>
275 |           </paper-stepper>
276 |         </template>
277 |       </demo-snippet>
278 |       <p>If you specify <strong>--paper-stepper-vertical-responsive-width</strong>, the stepper manage the <strong>vertical</strong> attribute itself. When the width of the stepper (not the viewport width!) is inferior to the variable, the vertical layout is use.</p>
279 |       <p>For performance reason, the responsive check is debounced according to <strong>responsive-check-frequence</strong> which default to 200ms.</p>
280 |       <p>Resize your window to see the effect.</p>
281 |       <demo-snippet>
282 |         <template>
283 |           <style is="custom-style">
284 |             #visualResponsiveWidth {
285 |               width: 500px;
286 |               max-width: 100%;
287 |               height: 4px;
288 |               background: var(--primary-color);
289 |             }
290 |             #responsiveStepper {
291 |               --paper-stepper-vertical-responsive-width: 500px;
292 |             }
293 |           </style>
294 |           
295 |           <div id="visualResponsiveWidth"></div>
296 | 
297 |           <paper-stepper id="responsiveStepper" responsive-check-frequence="500">
298 |             <paper-step label="step 1"></paper-step>
299 |             <paper-step label="step 2"></paper-step>
300 |           </paper-stepper>
301 |         </template>
302 |       </demo-snippet>
303 |       </div>
304 |        <div>
305 |         <h2>Buttons</h2>
306 |         <ul>
307 |           <li>Set <strong>has-back-button</strong> if you want a back button, the back action send you to the previous sibling selectable step and is disabled if this step doesn't exist.</li>
308 |           <li>Set <strong>has-skip-button</strong> if you want a skip button. The skip action loops around the steps to find the next selectable unsaved step. If this step doesn't exist, the button is disabled.</li>
309 |         </ul>
310 |         <demo-snippet>
311 |         <template>
312 |           <paper-stepper vertical has-skip-button has-back-button>
313 |             <paper-step label="step 1"></paper-step>
314 |             <paper-step label="step 3" editable></paper-step>
315 |             <paper-step label="step 4"></paper-step>
316 |           </paper-stepper>
317 |         </template>
318 |         </demo-snippet>
319 |         <p>You can configure the text of the above buttons with <strong>back-text</strong> and <strong>skip-text</strong> attributes.</p>
320 |         <p>The text of the primary button correspond to <strong>continue-text</strong> attribute by default, <strong>update-text</strong> if the step is saved and <strong>finish-text</strong> if it is the last unsaved step. Texts are capitalized within the buttons.</p>
321 |         <demo-snippet>
322 |         <template>
323 |           <paper-stepper has-back-button has-skip-button continue-text="continuer" back-text="retour" skip-text="passer" update-text="mettre à jour" finish-text="terminer">
324 |             <paper-step label="étape 1"></paper-step>
325 |             <paper-step label="étape 2" editable></paper-step>
326 |             <paper-step label="étape 4"></paper-step>
327 |           </paper-stepper>
328 |         </template>
329 |       </demo-snippet>
330 |       </div>
331 |       <div>
332 |         <h2>Styling</h2>
333 |         <p>In vertical layout, the height of the stepper depends on his steps and in an opened horizontal stepper, it defaults to 450px.</p>
334 |         <p>Use the following variables instead of setting 'height' and 'max-height', they allow to configure the stepper and its steps depending on the layout.</p>
335 |         <h3>Stepper CSS variables</h3>
336 |         <ul>
337 |           <li><strong>--paper-stepper-horizontal-opened-height</strong> : the height of paper stepper in horizontal layout when it is opened, default to 450px.</li>
338 |           <li><strong>--paper-stepper-vertical-max-height</strong>: the max height of the vertical stepper, not defined by default.</li>
339 |           <li><strong>--paper-stepper-horizontal-opening-transition-duration</strong>: the horizontal stepper opening transition duration, default to 500ms.</li>
340 |         </ul>
341 |         <demo-snippet>
342 |         <template is="dom-bind">
343 |           <style is="custom-style">
344 |             #stepper {
345 |               --paper-stepper-horizontal-opened-height: 300px;
346 |               --paper-stepper-vertical-max-height: 200px;
347 |               --paper-stepper-horizontal-opening-transition-duration: 800ms;
348 |             }
349 |             paper-toggle-button {
350 |               padding: 24px;
351 |             }
352 |           </style>
353 | 
354 |           <paper-stepper id="stepper" vertical="[[vertical]]">
355 |             <paper-step label="step 1"></paper-step>
356 |             <paper-step label="step 2"></paper-step>
357 |             <paper-step label="step 3"></paper-step>
358 |             <paper-step label="step 4"></paper-step>
359 |           </paper-stepper>
360 | 
361 |           <paper-toggle-button checked="{{vertical}}">Vertical</paper-toggle-button>
362 |         </template>
363 |       </demo-snippet>
364 |       <h3>Steps CSS variables</h3>
365 |       <ul>
366 |         <li><strong>--paper-vertical-step-transition-duration</strong>: the vertical step opening transition duration, default to 500ms.</li>
367 |         <li><strong>--paper-vertical-step-max-height</strong>: the max-height of the content of your step, default to 400px.</li>
368 |       </ul>
369 |       <demo-snippet>
370 |         <template is="dom-bind">
371 |           <style is="custom-style">
372 |             #vertical-stepper paper-step {
373 |               --paper-vertical-step-max-height: 300px;
374 |               --paper-vertical-step-transition-duration: 1s;
375 |             }
376 |           </style>
377 |           <paper-stepper id="vertical-stepper" vertical>
378 |             <paper-step label="step 1">
379 |               <paper-textarea rows="8"></paper-textarea>
380 |             </paper-step>
381 |             <paper-step label="step 2"></paper-step>
382 |             <paper-step label="step 3"></paper-step>
383 |             <paper-step label="step 4"></paper-step>
384 |           </paper-stepper>
385 |         </template>
386 |       </demo-snippet>
387 |       </div>
388 |       <div>
389 |         <h2>Selection</h2>
390 |         <p>Paper-stepper implement <a href="https://elements.polymer-project.org/elements/iron-selector?active=Polymer.IronSelectableBehavior" target="_blank">IronSelectableBehavior</a>. By default, selected reflet the selected index (the first step has index 0). Give a default value to <strong>selected</strong> for the step to be opened when the user land on the stepper.</p>
391 |         <p>Note: The behavior is slightly modified to only allow the selection of selectable steps.</p>
392 |          <demo-snippet>
393 |           <template is="dom-bind">
394 |             <paper-stepper vertical selected="0">
395 |               <paper-step label="step 1"></paper-step>
396 |               <paper-step label="step 2"></paper-step>
397 |               <paper-step label="step 3"></paper-step>
398 |               <paper-step label="step 4"></paper-step>
399 |             </paper-stepper>
400 |           </template>
401 |         </demo-snippet>
402 |         <p>You can use <strong>attr-for-selected</strong> for selected to reflect an attribute on your step.</p>
403 |         <demo-snippet>
404 |           <template is="dom-bind">
405 |             <style>
406 |               #select-input {
407 |                 width: 100px;
408 |                 padding-left: 24px;
409 |               }
410 |             </style>
411 | 
412 |             <paper-input id="select-input" label="Selected step" value="{{selected}}"></paper-input>
413 |             <paper-stepper selected="{{selected}}" attr-for-selected="label">
414 |               <paper-step label="step 1"></paper-step>
415 |               <paper-step label="step 2" editable></paper-step>
416 |               <paper-step label="step 3" editable></paper-step>
417 |               <paper-step label="step 4" editable></paper-step>
418 |             </paper-stepper>
419 |           </template>
420 |         </demo-snippet>
421 |       </div>
422 |       <div>
423 |         <h2>Animations</h2>
424 |         <p>You can define animations between steps in horizontal layout. Import your animations and set</p>
425 |         <ul>
426 |           <li>horizontal-higher-entry-animation</li>
427 |           <li>horizontal-lower-entry-animation</li>
428 |           <li>horizontal-higher-exit-animation</li>
429 |           <li>horizontal-lower-exit-animation</li>
430 |         </ul>
431 |         <p>to the name of the wanted animation, directly on paper-stepper or on a specific paper-step.</p>
432 |          <demo-snippet>
433 |           <template is="dom-bind">
434 |             <paper-stepper
435 |               selected="0"
436 |               horizontal-higher-entry-animation="slide-from-right-animation"
437 |               horizontal-lower-entry-animation="slide-from-left-animation"
438 |               horizontal-higher-exit-animation="slide-right-animation"
439 |               horizontal-lower-exit-animation="slide-left-animation">
440 |               <paper-step label="step 1">Step 1</paper-step>
441 |               <paper-step label="step 2" horizontal-higher-exit-animation="fade-out-animation">Step 2</paper-step>
442 |               <paper-step label="step 3">Step 3</paper-step>
443 |               <paper-step label="step 4">Step 4</paper-step>
444 |             </paper-stepper>
445 |           </template>
446 |         </demo-snippet>
447 |         </div>
448 |       <div>
449 |       <h2>Events</h2>
450 |       <ul>
451 |         <li><strong>paper-stepper-completed</strong> is fired from the stepper when all the steps are saved.</li>
452 |         <li><strong>paper-step-saved</strong> is fired from a step when it become saved.</li>
453 |         <li><strong>paper-step-updated</strong> is fired from a step it is saved again.</li>
454 |       </ul>
455 |       <demo-snippet>
456 |       <template>
457 |         <template is="dom-bind" id="eventScope">
458 | 
459 |           <paper-stepper on-paper-stepper-completed="completed">
460 |             <paper-step label="step 1" on-paper-step-saved="saved" editable on-paper-step-updated="updated"></paper-step>
461 |             <paper-step label="step 2" ></paper-step>
462 |           </paper-stepper>
463 |           <paper-toast id="toast"></paper-toast>
464 |           
465 |           <script>
466 |             scope = document.getElementById('eventScope');
467 |             scope.completed = function() { this.$.toast.show('Stepper completed'); }
468 |             scope.saved = function() { this.$.toast.show('Step 1 saved'); }
469 |             scope.updated = function() { this.$.toast.show('Step 1 updated'); }
470 |           </script>
471 | 
472 |         </template>
473 |       </template>
474 |       </demo-snippet>
475 |       </div>
476 |       <div>
477 |         <h2>Methods</h2>
478 |         <demo-snippet>
479 |         <template>
480 |         <template is="dom-bind" id="methodScope">
481 | 
482 |           <style>
483 |             #button-container {
484 |               padding: 24px;
485 |             }
486 |           </style>
487 |           <div id="button-container">
488 |             <paper-button raised on-tap="progress">Progress</paper-button>
489 |             <paper-button raised on-tap="back">Back</paper-button>
490 |             <paper-button raised on-tap="continue">Continue</paper-button>
491 |             <paper-button raised on-tap="save">Save step 2</paper-button>
492 |             <paper-button raised on-tap="reset">Reset</paper-button>
493 |           </div>
494 | 
495 |           <paper-stepper id="controledStepper">
496 |             <paper-step label="step 1"></paper-step>
497 |             <paper-step label="step 2" id="step2"></paper-step>
498 |             <paper-step label="step 3"></paper-step>
499 |           </paper-stepper>
500 |           
501 |           <script>
502 |             scope = document.getElementById('methodScope');
503 |             scope.progress = function() { this.$.controledStepper.progress()};
504 |             scope.back = function() { this.$.controledStepper.back()};
505 |             scope.continue = function() { this.$.controledStepper.continue()};
506 |             scope.save = function() { this.$.step2.save()};
507 |             scope.reset = function() { this.$.controledStepper.reset();};
508 |           </script>
509 | 
510 |         </template>
511 |         </template>
512 |       </demo-snippet>
513 |       </div>
514 |       <div>
515 |         <h2>Binding</h2>
516 |         <p>You can bind these attributes to be notified of changes about the stepper and its steps.</p>
517 |         <demo-snippet>
518 |         <template is="dom-bind">
519 |           <style>
520 |             ul {
521 |               padding: 24px 42px;
522 |             }
523 |           </style>
524 | 
525 |           <ul>
526 |             <li>Stepper opened: [[opened]]</li>
527 |             <li>Stepper completed: [[completed]]</li>
528 |             <li>Stepper step number: [[stepNumber]]</li>
529 |             <li>Stepper saved step number: [[savedStepNumber]]</li>
530 |             <li>Step 1 saved: [[saved]]</li>
531 |             <li>Step 2 index: [[index]]</li>
532 |             <li>Step 3 selectable: [[selectable]]</li>
533 |           </ul>
534 |           <paper-stepper linear opened="{{opened}}" completed="{{completed}}" step-number="{{stepNumber}}" saved-step-number="{{savedStepNumber}}">
535 |             <paper-step label="step 1" saved="{{saved}}"></paper-step>
536 |             <paper-step label="step 2" editable index="{{index}}"></paper-step>
537 |             <paper-step label="step 3" selectable="{{selectable}}"></paper-step>
538 |           </paper-stepper>
539 |         </template>
540 |       </demo-snippet>
541 |       </div>
542 |       <div>
543 |         <h2>Extra</h2>
544 |         <p>In horizontal layout, labels are overflow ellipsis and will be revealed on hover. For long labels, prefer use alternative label or vertical layout.</p>
545 |         <demo-snippet>
546 |         <template>
547 |           <paper-stepper>
548 |             <paper-step label="step 1"></paper-step>
549 |             <paper-step label="A loooooooooooooooooooooooooooooooooooooong label"></paper-step>
550 |             <paper-step label="A loooooooooooooooooooooooooooooooooooooong label"></paper-step>
551 |             <paper-step label="step 3"></paper-step>
552 |           </paper-stepper>
553 |         </template>
554 |       </demo-snippet>
555 | 
556 |       <p>By-product: This demo is made with <a href="https://github.com/Zecat/iron-scroll-spy" target="_blank">iron-scroll-spy</a>, fork!</p>
557 |       
558 |       </div>
559 |       <div>
560 |       <h2>Sandbox</h2>
561 |       <p>Change on an attribute will be immediately reflected.</p>
562 | 
563 |         <paper-stepper-sandbox class="flex"></paper-stepper-sandbox>
564 |       </div>
565 |     </iron-auto-scroll-spy>
566 |   </app-drawer-layout>
567 |   <script>
568 |     var scrollSpy = document.getElementById('scrollSpy');
569 |     var paperMenu = document.getElementById('paperMenu');
570 |     var drawerLayout = document.getElementById('drawerLayout');
571 |     /* manual binding because demo-snippet can't be wrapped by a <template> see https://github.com/PolymerElements/iron-demo-helpers/issues/29 */
572 |     scrollSpy.addEventListener('selected-changed', function(e) {
573 |       paperMenu.selected = e.detail.value;
574 |     });
575 |     paperMenu.addEventListener('selected-changed', function(e) {
576 |       scrollSpy.selected = e.detail.value;
577 |     });
578 |   </script>
579 | 
580 |   </body>
581 | </html>
582 | 


--------------------------------------------------------------------------------
/demo/paper-stepper-sandbox/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 |   <head>
13 |     <meta charset="utf-8">
14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 |     <title>Paper-stepper Demo</title>
16 |     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
17 |     <link rel="import" href="../../paper-stepper.html">
18 |     <link rel="import" href="paper-stepper-sandbox.html">
19 |     <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300" rel="stylesheet" type="text/css">
20 |   </head>
21 |   <body unresolved>
22 | 
23 |   <style is="custom-style">
24 |     body {
25 |       padding:0;
26 |     }
27 |     :root {
28 |       --primary-color: var(--paper-blue-500);
29 |     }
30 |   </style>
31 | 
32 |   <paper-stepper-sandbox></paper-stepper-sandbox>
33 | 
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/demo/paper-stepper-sandbox/paper-stepper-sandbox.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../../paper-input/paper-input.html">
  2 | <link rel="import" href="../../../paper-material/paper-material.html">
  3 | <link rel="import" href="../../../paper-checkbox/paper-checkbox.html">
  4 | <link rel="import" href="../../../iron-flex-layout/iron-flex-layout-classes.html">
  5 | <link rel="import" href="../../../neon-animation/animations/slide-from-left-animation.html">
  6 | <link rel="import" href="../../../neon-animation/animations/slide-from-right-animation.html">
  7 | <link rel="import" href="../../../neon-animation/animations/slide-left-animation.html">
  8 | <link rel="import" href="../../../neon-animation/animations/slide-right-animation.html">
  9 | <link rel="import" href="../../../polymer/polymer.html">
 10 | <link rel="import" href="../../paper-stepper.html">
 11 | 
 12 | <dom-module id="paper-stepper-sandbox">
 13 |   <template>
 14 |     <style include="iron-flex iron-flex-alignment">
 15 |       :host {
 16 |   			display: block;
 17 |         box-sizing: border-box;
 18 |       }
 19 |       paper-checkbox {
 20 |         box-sizing: border-box;
 21 |         padding: 4px 0;
 22 |       }
 23 |       paper-material {
 24 |         background: white;
 25 |         margin-top: 24px;
 26 |         padding: 24px 0;
 27 |       }
 28 |       paper-material > * {
 29 |         padding: 0 24px;
 30 |       }
 31 |       paper-button {
 32 |         margin-top: 32px;
 33 |         margin-right: 16px;
 34 |       }
 35 |     </style>
 36 | 
 37 |     <paper-stepper id="stepper" continue-text="[[continueText]]" update-text="[[updateText]]" finish-text="[[finishText]]" optional-text="[[optionalText]]" skip-text="[[skipText]]" back-text="[[backText]]" id="stepper" vertical="[[vertical]]" selected="{{selected}}" alternative-label="{{alternativeLabel}}" linear="{{linear}}" has-skip-button="[[hasSkipButton]]" has-back-button="[[hasBackButton]]" horizontal-higher-entry-animation="slide-from-right-animation" horizontal-lower-entry-animation="slide-from-left-animation" horizontal-higher-exit-animation="slide-right-animation" horizontal-lower-exit-animation="slide-left-animation">
 38 |       <paper-step id="step1" label="Step 1" optional>
 39 |         <h1>Step 1 content</h1>
 40 |       </paper-step>
 41 |       <paper-step label="Step 2" editable>
 42 |         <h1>Step 2 content</h1>
 43 |       </paper-step>
 44 |       <paper-step label="Step 3" editable optional>
 45 |         <h1>Step 3 content</h1>
 46 |       </paper-step>
 47 |       <paper-step label="Step 4">
 48 |         <h1>Step 4 content</h1>
 49 |       </paper-step>
 50 |     </paper-stepper>
 51 | 
 52 |     <paper-material class="layout horizontal">
 53 |       <div class="layout vertical flex">
 54 |         <paper-input label="Selected step" value="{{selected}}" type="number"></paper-input>
 55 |         <paper-checkbox checked="{{alternativeLabel}}">alternative-label</paper-checkbox>
 56 |         <paper-checkbox checked="{{vertical}}">vertical</paper-checkbox>
 57 |         <paper-checkbox checked="{{linear}}">linear</paper-checkbox>
 58 |         <paper-checkbox checked="{{hasSkipButton}}">has-skip-button</paper-checkbox>
 59 |         <paper-checkbox checked="{{hasBackButton}}">has-back-button</paper-checkbox>
 60 |         <div class="layout horizontal wrap"><paper-button raised on-tap="reset">Reset</paper-button>
 61 |         <paper-button raised on-tap="progress">Progress</paper-button>
 62 |         <paper-button raised on-tap="back">Back</paper-button>
 63 |         <paper-button raised on-tap="continue">Continue</paper-button></div>
 64 |         
 65 |       </div>
 66 |       <div class="layout vertical flex">
 67 |         <paper-input label="Continue button text" value="{{continueText}}"></paper-input>
 68 |         <paper-input label="Update button text" value="{{updateText}}"></paper-input>
 69 |         <paper-input label="Finish button text" value="{{finishText}}"></paper-input>
 70 |         <paper-input label="Optional button text" value="{{optionalText}}"></paper-input>
 71 |         <paper-input label="Skip button text" value="{{skipText}}"></paper-input>
 72 |         <paper-input label="Back button text" value="{{backText}}"></paper-input>
 73 |       </div>
 74 |     </paper-material>
 75 | 
 76 |   </template>
 77 |   <script>
 78 |     Polymer({
 79 |       is: 'paper-stepper-sandbox',
 80 | 
 81 |       reset: function() {
 82 |         this.$.stepper.reset();
 83 |       },
 84 |       progress: function() {
 85 |         this.$.stepper.progress();
 86 |       },
 87 |       back: function() {
 88 |         this.$.stepper.back();
 89 |       },
 90 |       continue: function() {
 91 |         this.$.stepper.continue();
 92 |       },
 93 | 
 94 |       attached: function() {
 95 |         this.selected = -1;
 96 |         this.continueText = 'Continue';
 97 |         this.updateText = 'Update';
 98 |         this.finishText = 'Finish';
 99 |         this.optionalText = 'Optional';
100 |         this.skipText = 'Skip';
101 |         this.backText = 'Back';
102 |       }
103 |      });
104 |   </script>
105 | </dom-module>
106 | 


--------------------------------------------------------------------------------
/hero.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
 6 | <g id="background" display="none">
 7 | 	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
 8 | </g>
 9 | <g id="label">
10 | </g>
11 | <g id="art">
12 | 	<g id="ic_x5F_add_x0D_">
13 | 	</g>
14 | 	<circle cx="78" cy="98" r="4"/>
15 | 	<circle cx="171" cy="90" r="4"/>
16 | 	<circle cx="132" cy="61" r="4"/>
17 | 	<circle cx="53" cy="61" r="4"/>
18 | 	<circle cx="126" cy="28" r="4"/>
19 | 	<circle cx="91" cy="67" r="4"/>
20 | 	<circle cx="132" cy="90" r="4"/>
21 | 	<circle cx="65" cy="32" r="4"/>
22 | 	<path d="M77.7,99.4L51.9,61.1L64.3,31l64.1-4.2L92.6,66.7l16.1,9l23.3-16L174,91h-42.3l-23-12.9L77.7,99.4z M54.1,60.9l24.1,35.7
23 | 		L106.8,77l-17.4-9.8l34.2-38.1L65.7,33L54.1,60.9z M132.3,89H168l-36-26.8l-21.4,14.6L132.3,89z"/>
24 | </g>
25 | <g id="Guides">
26 | </g>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | <head>
13 | 
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 | 
17 |   <script src="../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <link rel="import" href="../iron-component-page/iron-component-page.html">
19 | 
20 | </head>
21 | <body unresolved>
22 |   <!-- Note: if the main element for this repository doesn't
23 |        match the folder name, add a src="&lt;main-component&gt;.html" attribute,
24 |        where &lt;main-component&gt;.html" is a file that imports all of the
25 |        components you want documented. -->
26 |   <iron-component-page></iron-component-page>
27 | 
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/paper-step.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
  2 | <link rel="import" href="../paper-item/paper-item-behavior.html">
  3 | <link rel="import" href="../paper-button/paper-button.html">
  4 | <link rel="import" href="../iron-collapse/iron-collapse.html">
  5 | <link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">
  6 | <link rel="import" href="../neon-animation/neon-animatable-behavior.html">
  7 | <link rel="import" href="../paper-styles/default-theme.html">
  8 | <link rel="import" href="../polymer/polymer.html">
  9 | <link rel="import" href="step-horizontal-label.html">
 10 | <link rel="import" href="step-vertical-label.html">
 11 | 
 12 | <!--
 13 | Missing Doc
 14 | @element paper-step
 15 | @demo demo/index.html
 16 | @hero hero.svg
 17 | -->
 18 | <dom-module id="paper-step">
 19 |   <template>
 20 |     <style>
 21 |       :host {
 22 |         display: block;
 23 |         box-sizing: border-box;
 24 |         outline: 0;
 25 |       }
 26 |       :host(:not([vertical])) {
 27 |         overflow: hidden;
 28 |         @apply(--layout);
 29 |         @apply(--layout-flex);
 30 |       }
 31 |       :host(:not([vertical]):hover){
 32 |         overflow: visible;
 33 |       }
 34 |       :host(:not([opened]):not(.neon-animating)) #slideshowViewport{
 35 |         display: none;
 36 |       }
 37 |       #horizontalStepLabel {
 38 |         @apply(--layout-flex);
 39 |       }
 40 |       #slideshowViewport {
 41 |         position: absolute;
 42 |         bottom: 84px;
 43 |         left: 0;
 44 |         right: 0;
 45 |         overflow: hidden;
 46 |       }
 47 |       #contentWrapper {
 48 |         padding: 24px 24px 0 24px;
 49 |         @apply(--layout-scroll);
 50 |         @apply(--layout-fit);
 51 |         pointer-events: auto;
 52 |       }
 53 |       :host(:focus:not([opened]):not([saved])) step-horizontal-label ::content #badge {
 54 |         background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500);
 55 |       }
 56 |       #slideshowViewport {
 57 |         @apply(--layout);
 58 |         @apply(--layout-center-center);
 59 |       }
 60 |       :host([vertical]) {
 61 |         @apply(--layout-vertical);
 62 |       }
 63 |       #collapse {
 64 |         --iron-collapse-transition-duration: var(--paper-vertical-step-transition-duration, 500ms);
 65 |         @apply(--layout-horizontal);
 66 |       }
 67 |       #stepWrapper {
 68 |         @apply(--layout-flex);
 69 |         /*should be 48px on large screen?*/
 70 |         padding-right: 24px;
 71 |       }
 72 |       #paperStepWrapper {
 73 |         max-height: calc(var(--paper-vertical-step-max-height, 400px) - 92px);
 74 |         @apply(--layout-scroll);
 75 |       }
 76 |       #contentConnectorLine {
 77 |         width: 1px;
 78 |         background: var(--divider-color, --paper-grey-300);
 79 |         margin-left: 36px;
 80 |         margin-right: 24px;
 81 |       }
 82 |       /**
 83 |        * Vertical Buttons
 84 |        */
 85 |       #buttonsWrapper {
 86 |         height: 48px;
 87 |         padding-top: 16px;
 88 |         padding-bottom: 28px;
 89 |         @apply(--layout-horizontal);
 90 |         @apply(--layout-center);
 91 |         @apply(--layout-flex-none);
 92 |       }
 93 |       #buttonsWrapper > paper-button {
 94 |         margin-right: 8px;
 95 |         margin-left: 0;
 96 |       }
 97 |       #continueButton {
 98 |         --paper-button: {
 99 |           background: var(--paper-vertical-step-continue-button-background, --primary-color);
100 |           color: var(--paper-vertical-step-continue-button-color, --dark-theme-text-color);
101 |         };
102 |       }
103 |     </style>
104 | 
105 |     <!-- horizontal step layout -->
106 | 
107 |     <template is="dom-if" if="[[!vertical]]">
108 |       <step-horizontal-label
109 |         id="horizontalStepLabel"
110 |         editable="[[editable]]"
111 |         label="[[label]]"
112 |         alternative-label="[[_alternativeLabel]]"
113 |         optional="[[optional]]"
114 |         opened="[[opened]]"
115 |         selectable="[[selectable]]"
116 |         index="[[index]]"
117 |         saved="[[saved]]"
118 |         stepper-data="[[_stepperData]]">
119 |       </step-horizontal-label>
120 |       <div id="slideshowViewport">
121 |         <div id="contentWrapper">
122 |         </div>
123 |       </div>
124 |     </template>
125 | 
126 |     <!-- vertical step layout -->
127 | 
128 |     <template is="dom-if" if="[[vertical]]">
129 |       <step-vertical-label
130 |         id="verticalStepLabel"
131 |         editable="[[editable]]"
132 |         label="[[label]]"
133 |         optional="[[optional]]"
134 |         opened="[[opened]]"
135 |         selectable="[[selectable]]"
136 |         stepper-data="[[_stepperData]]"
137 |         index="[[index]]"
138 |         saved="[[saved]]">
139 |       </step-vertical-label>
140 |       <iron-collapse id="collapse" opened="[[opened]]">
141 |       <div id="contentConnectorLine"></div>
142 |       <div id="stepWrapper">
143 |         <div id="paperStepWrapper">
144 |         </div>
145 |         <div id="buttonsWrapper">
146 |           <paper-button id="continueButton" on-tap="continue">
147 |             {{_choosePrimaryButtonText(_attrForPrimaryButtonText, _stepperData.continueText, _stepperData.finishText, _stepperData.updateText)}}
148 |           </paper-button>
149 |           <paper-button id="backButton" disabled="[[!_hasBackStep]]" on-tap="back" hidden$="[[!_stepperData.hasBackButton]]">
150 |             [[_stepperData.backText]]
151 |           </paper-button>
152 |           <paper-button id="skipButton" disabled="[[!_canSkip]]" on-tap="skip" hidden$="[[!_stepperData.hasSkipButton]]">
153 |             [[_stepperData.skipText]]
154 |           </paper-button>
155 |         </div>
156 |       </div>
157 |     </iron-collapse>
158 |     </template>
159 |   </template>
160 | 
161 |   <script>
162 |     Polymer({
163 | 
164 |       is: 'paper-step',
165 | 
166 |       behaviors: [
167 |         Polymer.IronValidatableBehavior,
168 |         Polymer.NeonAnimatableBehavior,
169 |         Polymer.PaperItemBehavior,
170 |         Polymer.PaperRippleBehavior
171 |       ],
172 |       
173 |       /**
174 |        * Fired when the step has been saved.
175 |        *
176 |        * @event paper-step-saved
177 |        */
178 |       /**
179 |        * Fired when the step has been updated
180 |        *
181 |        * @event paper-step-updated
182 |        */
183 |       properties: {
184 |         /**
185 |          * MISSING Doc
186 |          */
187 |         saved: {
188 |           type: Boolean,
189 |           value: false,
190 |           notify: true,
191 |           readOnly: true
192 |         },
193 |         /**
194 |          * Missing Doc
195 |          */
196 |         editable: {
197 |           type: Boolean,
198 |           value: false
199 |         },
200 |         /**
201 |          * Missing Doc
202 |          */
203 |         index: {
204 |           type: Number,
205 |           notify: true,
206 |           readOnly: true
207 |         },
208 |         /**
209 |          * Missing Doc
210 |          */
211 |         _previousSaved: {
212 |           type: Boolean,
213 |           readOnly: true
214 |         },
215 |         /**
216 |          * Missing Doc
217 |          */
218 |         optional: {
219 |           type: Boolean,
220 |           value: false
221 |         },
222 |         /**
223 |          * Missing Doc
224 |          */
225 |         selectable: {
226 |           type: Boolean,
227 |           computed: '_computeSelectable(_stepperData.linear, saved, editable, _previousSaved)',
228 |           reflectToAttribute: true,
229 |           notify: true
230 |         },
231 |         /**
232 |          * Missing Doc
233 |          */
234 |         disabled: {
235 |           computed: '_computeDisabled(selectable)'
236 |         },
237 |         /**
238 |          * Missing Doc
239 |          */
240 |         label: {
241 |           type: String,
242 |           value: ''
243 |         },
244 |         /**
245 |          * Missing Doc
246 |          */
247 |         opened: {
248 |           type: Boolean,
249 |           value: false,
250 |           notify: true
251 |         },
252 |         /**
253 |          * Missing Doc
254 |          */
255 |         animationConfig: {
256 |           readOnly: true
257 |         },
258 |         /**
259 |          * Missing Doc
260 |          */
261 |         entryAnimation: {
262 |           readOnly: true
263 |         },
264 |         /**
265 |          * Missing Doc
266 |          */
267 |         exitAnimation: {
268 |           readOnly: true
269 |         },
270 |         /**
271 |          * Missing Doc
272 |          */
273 |         vertical: {
274 |           type: Boolean,
275 |           readOnly: true,
276 |           reflectToAttribute: true
277 |         },
278 |         /**
279 |          * Missing Doc
280 |          */
281 |         horizontalHigherEntryAnimation: {
282 |           type: String
283 |         },
284 |         /**
285 |          * Missing Doc
286 |          */
287 |         horizontalHigherExitAnimation: {
288 |           type: String
289 |         },
290 |         /**
291 |          * Missing Doc
292 |          */
293 |         horizontalLowerEntryAnimation: {
294 |           type: String
295 |         },
296 |         /**
297 |          * Missing Doc
298 |          */
299 |         horizontalLowerExitAnimation: {
300 |           type: String
301 |         },
302 |         /**
303 |          * Missing Doc
304 |          */
305 |         _alternativeLabel: {
306 |           type: Boolean,
307 |           readOnly: true
308 |         },
309 |         /**
310 |          * Missing Doc
311 |          */
312 |         _optionalText: {
313 |           type: Boolean,
314 |           readOnly: true
315 |         },
316 |         /**
317 |          * Missing Doc
318 |          */
319 |         _attrForPrimaryButtonText: {
320 |           type: String,
321 |           readOnly: true
322 |         },
323 |         /**
324 |          * A reference to the parent stepper
325 |          */
326 |         _stepper: {
327 |           type: Object,
328 |           readOnly: true
329 |         },
330 |         _stepperData: {
331 |           type: Object,
332 |           readOnly: true
333 |         },
334 |         _canSkip: {
335 |           type: Boolean,
336 |           readOnly: true
337 |         },
338 |         _hasBackStep: {
339 |           type: Boolean,
340 |           readOnly: true
341 |         }
342 |       },
343 | 
344 |       listeners: {
345 |         'paper-step-vertical-skip-tapped': 'skip',
346 |         'paper-step-vertical-back-tapped': 'back',
347 |         'paper-step-vertical-continue-tapped': 'continue',
348 |         'tap': '_tapHandler'
349 |       },
350 | 
351 |       observers: [
352 |         '_toggleClassPosition(index, _stepperData.stepNumber, vertical)',
353 |         '_updateSlideshowViewportTop(optional, _alternativeLabel, vertical)',
354 |         '_verticalChange(vertical)',
355 |         '_focusedChanged(receivedFocusFromKeyboard)',
356 |         '_labelElementChanged(_labelElement)'
357 |       ],
358 | 
359 |       _focusedChanged: function(receivedFocusFromKeyboard) {
360 |         if (receivedFocusFromKeyboard) {
361 |           this.ensureRipple();
362 |           // generate a ripple effect from the center of the badge
363 |           var badge = this._rippleContainer.$.badge;
364 |           var badgePos = badge.getBoundingClientRect();
365 |           var rippleX = badgePos.left + 12;
366 |           var rippleY = badgePos.top + 12;
367 |           this._ripple.downAction({detail: {x: rippleX, y: rippleY}});
368 |         }
369 |         if (this.hasRipple()) {
370 |           this._ripple.holdDown = receivedFocusFromKeyboard;
371 |         }
372 |       },
373 | 
374 |       _tapHandler: function(e) {
375 |         var rootTarget = Polymer.dom(e).rootTarget;
376 |         if (rootTarget !== this && rootTarget !== this._rippleContainer) {
377 |           e.stopImmediatePropagation();
378 |         }
379 |       },
380 | 
381 |       /**
382 |        * Missing Doc
383 |        */
384 |       skip: function() {
385 |         // would it be better to send an event?
386 |         this._stepper.progress();
387 |       },
388 | 
389 |       /**
390 |        * Missing Doc
391 |        */
392 |       back: function() {
393 |         // would it be better to send an event?
394 |         this._stepper.back();
395 |       },
396 | 
397 |       /**
398 |        * Mark the step as saved and fire `paper-step-saved` if it is valid.
399 |        * @return {Boolean} True if the step has been saved.
400 |        */
401 |       save: function() {
402 |         if ((!this.saved || this.editable) && this.validate()) {
403 |           if (this.saved) {
404 |             this.fire('paper-step-updated');
405 |           } else {
406 |             this._setSaved(true);
407 |             this.fire('paper-step-saved');
408 |           }
409 |           return true;
410 |         }
411 |         return false;
412 |       },
413 | 
414 |       /**
415 |        * Atempte to save the step and select and to progress into the stepper.
416 |        * @return {Boolean} True if the step is valid for saving.
417 |        */
418 |       continue: function() {
419 |         if (this.save()) {
420 |           // would it be better to send an event?
421 |           this._stepper.progress();
422 |           return true;
423 |         }
424 |         return false;
425 |       },
426 | 
427 |       _updateSlideshowViewportTop: function(optional, _alternativeLabel, vertical) {
428 |         if (!vertical) {
429 |           this.async(function() {
430 |             this.$$('#slideshowViewport').style.top = this.clientHeight+'px';
431 |             this.fire('step-horizontal-label-resize');
432 |           }, 1);
433 |         }
434 |       },
435 | 
436 |       _toggleClassPosition: function(index, stepNumber, vertical) {
437 |         this.async(function() {
438 |           var stepLabel = this.$$(vertical ? '#verticalStepLabel' : '#horizontalStepLabel');
439 |           this.toggleClass('first-step', (index == 1), stepLabel);
440 |           this.toggleClass('last-step', (index == stepNumber), stepLabel);
441 |         });
442 |       },
443 | 
444 |       _updateAnimationConfig: function() {
445 |         /* TODO: call this method when horizontalHigher/LowerEntry/ExitAnimation change */
446 |         var animatedNode = this.$$('#contentWrapper');
447 |         this._setAnimationConfig({
448 |           'higher-step-entry': {
449 |             node: animatedNode,
450 |             name: this.horizontalHigherEntryAnimation
451 |           },
452 |           'higher-step-exit': {
453 |             node: animatedNode,
454 |             name: this.horizontalHigherExitAnimation
455 |           },
456 |           'lower-step-entry': {
457 |             node: animatedNode,
458 |             name: this.horizontalLowerEntryAnimation
459 |           },
460 |           'lower-step-exit': {
461 |             node: animatedNode,
462 |             name: this.horizontalLowerExitAnimation
463 |           }
464 |         });
465 |       },
466 | 
467 |       _verticalChange: function(vertical) {
468 |         this.async(function() {
469 |           // move or create the content tag
470 |           Polymer.dom(this.$$(vertical ? '#paperStepWrapper' : '#contentWrapper')).appendChild(this.$$('content') || this.create('content'));
471 |           // reset the ripple
472 |           this._ripple = false;
473 |           this._rippleContainer = this.$$(vertical ? '#verticalStepLabel' : '#horizontalStepLabel');
474 |           if (!vertical) {
475 |             this._updateAnimationConfig();
476 |           }
477 |         }.bind(this));
478 |       },
479 | 
480 |       _computeSelectable: function(linear, saved, editable, previousSaved) {
481 |         // TODO: factorize the expression
482 |         return (!linear || previousSaved) && (!saved || editable) || (editable && saved);
483 |       },
484 | 
485 |       _computeDisabled: function(selectable) {
486 |         // disabled is used by IronMenuBehavior in paper-stepper
487 |         // TODO: remove selectable attribute and use disabled instead
488 |         return !selectable;
489 |       },
490 | 
491 |       _choosePrimaryButtonText: function(_attrForPrimaryButtonText) {
492 |         return this._stepperData[_attrForPrimaryButtonText];
493 |       },
494 | 
495 |       /**
496 |        * Overriden from paper-ripple-behavior
497 |        * TODO: post issue about that ?
498 |        */
499 |       ensureRipple: function(optTriggeringEvent) {
500 |       if (!this.hasRipple()) {
501 |         this._ripple = this._createRipple();
502 |         this._ripple.noink = this.noink;
503 |         var rippleContainer = this._rippleContainer || this.root;
504 |         if (rippleContainer) {
505 |           // ------- line changed -------
506 |           Polymer.dom(rippleContainer.root).appendChild(this._ripple);
507 |         }
508 |         if (optTriggeringEvent) {
509 |           // Check if the event happened inside of the ripple container
510 |           // Fall back to host instead of the root because distributed text
511 |           // nodes are not valid event targets
512 |           var domContainer = Polymer.dom(this._rippleContainer || this);
513 |           var target = Polymer.dom(optTriggeringEvent).rootTarget;
514 |           if (domContainer.deepContains( /** @type {Node} */(target))) {
515 |             this._ripple.uiDownAction(optTriggeringEvent);
516 |           }
517 |         }
518 |       }
519 |     },
520 | 
521 |     });
522 | 
523 |   </script>
524 | </dom-module>
525 | 


--------------------------------------------------------------------------------
/paper-stepper.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  2 | <link rel="import" href="../iron-selector/iron-selectable.html">
  3 | <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
  4 | <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
  5 | <link rel="import" href="../paper-button/paper-button.html">
  6 | <link rel="import" href="../paper-styles/default-theme.html">
  7 | <link rel="import" href="../paper-styles/shadow.html">
  8 | <link rel="import" href="../iron-collapse/iron-collapse.html">
  9 | <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 10 | <link rel="import" href="../polymer/polymer.html">
 11 | <link rel="import" href="animations/fade-in-slide-from-right-animation.html">
 12 | <link rel="import" href="animations/fade-out-slide-right-animation.html">
 13 | <link rel="import" href="animations/fade-in-slide-from-left-animation.html">
 14 | <link rel="import" href="animations/fade-out-slide-left-animation.html">
 15 | <link rel="import" href="paper-step.html">
 16 | 
 17 | <!--
 18 | Missing Doc
 19 | 
 20 | 
 21 | ## Styling
 22 | 
 23 | The default color values respect the material specifications. For basic configuration, just defines the `--primary-color` for your app.
 24 | 
 25 | The stepper has a complexe interface so many custom properties are available, use them this way :
 26 | 
 27 | ```html
 28 | <style is="custom-style">
 29 | 
 30 |   paper-stepper {
 31 |     --paper-stepper-custom-property: value;
 32 |   }
 33 | 
 34 |   paper-step {
 35 |     --paper-step-custom-property: value;
 36 |   }
 37 | 
 38 | </style>
 39 | 
 40 | <paper-stepper>
 41 |   <paper-step></paper-step>
 42 |   <paper-step></paper-step>
 43 | </paper-stepper>
 44 | ```
 45 | 
 46 | Note, for sizing the stepper and steps depending on the layout, use the following instead of setting 'height' and 'max-height' :
 47 | - `--paper-stepper-horizontal-opened-height`
 48 | - `--paper-stepper-vertical-max-height`
 49 | - `--paper-vertical-step-max-height`
 50 | 
 51 | ### Stepper
 52 | 
 53 | Custom property | Description | Default
 54 | ------|-------------|----------
 55 | `--paper-stepper-horizontal-opened-height` | The horizontal opened stepper height | 450px
 56 | `--paper-stepper-horizontal-opening-transition-duration`| The horizontal stepper opening transition duration (ms) | 500
 57 | `--paper-stepper-vertical-max-height`| The vertical stepper max height so it has a scrollable area | undefined
 58 | 
 59 | ### Step
 60 | 
 61 | Custom property | Description | Default
 62 | ------|-------------|----------
 63 | `--paper-step-connector-line-background` | The connector lines background color. | `--divider-color`
 64 | `--paper-step-label-hover-background` | The steps label background when hovered. | rgba(0,0,0,0.04)
 65 | `--paper-step-ink-color` | The steps ripple effect ink color. | `--divider-color`
 66 | 
 67 | ### Step text label
 68 | 
 69 | Custom property | Description | Default
 70 | ------|-------------|----------
 71 | `--paper-step-disabled-label-text-color` | The no-selectable steps label text color. | `--paper-grey-400`
 72 | `--paper-step-selectable-label-text-color` | The selectable steps label text color. | `--paper-grey-600`
 73 | `--paper-step-opened-label-text-color` | The opened steps label text color. | `--light-theme-text-color`
 74 | `--paper-step-label-text-font-size` | The steps label text font size. | 14px
 75 | `--paper-step-label-optional-text-font-size` | The steps label optional text font size. | 12px
 76 | 
 77 | ### Step badge
 78 | 
 79 | Custom property | Description | Default
 80 | ------|-------------|----------
 81 | `--paper-step-badge-background` | The badge background. | `--paper-grey-300`
 82 | `--paper-step-badge-color` | The badge color. | `--dark-theme-text-color`
 83 | `--paper-step-badge-icon-width` | The badge icon width. | 16px
 84 | `--paper-step-badge-icon-height` | The badge icon height. | 16px
 85 | `--paper-step-opened-badge-background` | The opened steps badge background. | `--primary-color`
 86 | `--paper-step-saved-badge-background` | The saved steps badge background. | `--primary-color`
 87 | `--paper-step-selectable-hovered-badge-background` | The no-opened no-saved selectable steps badge background. | `--paper-grey-500`
 88 | 
 89 | ### Vertical step
 90 | 
 91 | Custom property | Description | Default
 92 | ------|-------------|----------
 93 | `--paper-vertical-step-continue-button-background` | The continue button background. | `--primary-color`
 94 | `--paper-vertical-step-continue-button-color` | The continue button background. | `--dark-theme-text-color`
 95 | `--paper-vertical-step-max-height` | The unrolled step content max-height. | 400px
 96 | `--paper-vertical-step-transition-duration` | The step opening transition duration | 500ms
 97 | 
 98 | 
 99 | @element paper-stepper
100 | @demo demo/index.html
101 | @hero hero.svg
102 | -->
103 | <dom-module id="paper-stepper">
104 |   <template>
105 |     <style>
106 |       :host {
107 |         display: block;
108 |         box-sizing: border-box;
109 |         @apply(--layout-vertical);
110 |         @apply(--shadow-elevation-2dp);
111 |         background: white;
112 |         border-radius: 1px;
113 |       }
114 |       #verticalResponsiveWidth {
115 |         width: var(--paper-stepper-vertical-responsive-width, 0px);
116 |         visibility: hidden;
117 |       }
118 | 
119 |       /* Horizontal layout styles */
120 | 
121 |       :host([vertical]) {
122 |         padding: 4px 0;
123 |         @apply(--layout-scroll);
124 |         max-height: var(--paper-stepper-vertical-max-height);
125 |       }
126 |       :host(:not([vertical])) {
127 |         position: relative;
128 |         /* Note: this variable is updated by the stepper itself, don't use it on user side */
129 |         height: var(--label-wrapper-height);
130 |         max-height: var(--label-wrapper-height);
131 |         transition: max-height var(--paper-stepper-horizontal-opening-transition-duration, 300ms), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
132 |       }
133 |       :host(:not([vertical]):not([opened]):not(.collapsing)) {
134 |         @apply(--shadow-none);
135 |       }
136 |       :host(:not([vertical])[opened]) {
137 |         max-height: var(--paper-stepper-horizontal-opened-height, 450px);
138 |       }
139 |       :host(:not([vertical])[opened]), :host(:not([vertical]).collapsing) {
140 |         height: var(--paper-stepper-horizontal-opened-height, 450px);
141 |       }
142 |       :host(:not([vertical])) #content-wrapper {
143 |         @apply(--shadow-elevation-2dp);
144 |         @apply(--layout-horizontal);
145 |         @apply(--layout-flex-none);
146 |         @apply(--layout-justified);
147 |         background: var(--paper-stepper-horizontal-label-wrapper-background, --primary-background-color);
148 |         border-radius: 1px;
149 |         overflow: hidden;
150 |       }
151 |       .flex {
152 |         @apply(--layout-flex);
153 |       }
154 |       #buttonsWrapper {
155 |         @apply(--layout-horizontal);
156 |         margin: 0 24px 24px 24px;
157 |         overflow: hidden;
158 |       }
159 |       #continueButton:not([disabled]) {
160 |         color: var(--primary-color);
161 |       }
162 |       paper-button[disabled] {
163 |         background-color: transparent;
164 |       }
165 |       [hidden] {
166 |         display: none;
167 |       }
168 |       :host(:not[vertical]) #content-wrapper:not(:hover) ::content paper-step[opened] {
169 |         overflow: visible;
170 |       }
171 |     </style>
172 |     
173 |     <!-- Hidden block with width equals to the responsive threshold -->
174 |     <div id="verticalResponsiveWidth"></div>
175 |     
176 |     <!-- This wrapper contains the horizontal stepper header or the full vertical stepper -->
177 |     <div id="content-wrapper">
178 |       <content select="[[selectable]]"></content>
179 |     </div>
180 | 
181 |     <!-- Slideshow and buttons area for horizontal layout -->
182 |     <template is="dom-if" if="[[!vertical]]">
183 |       <div class="flex"></div>
184 |       <div id="buttonsWrapper">
185 |         <paper-button hidden$="[[!hasBackButton]]" disabled=[[!_hasBackStep]] on-tap="back">[[backText]]</paper-button>
186 |         <span class="flex"></span>
187 |         <paper-button hidden$="[[!hasSkipButton]]" disabled="[[!_canSkip]]" on-tap="progress">[[skipText]]</paper-button>
188 |         <paper-button id="continueButton" on-tap="continue">{{_choosePrimaryButtonText(_attrForSelectedStepPrimaryButtonText, finishText, continueText, updateText)}}</paper-button>
189 |       </div>
190 |     </template>
191 | 
192 |   </template>
193 | 
194 |   <script>
195 |     'use strict';
196 |     Polymer({
197 | 
198 |       is: 'paper-stepper',
199 | 
200 |       behaviors: [
201 |         Polymer.IronMenuBehavior,
202 |         Polymer.NeonAnimationRunnerBehavior,
203 |         Polymer.IronResizableBehavior
204 |       ],
205 | 
206 |       /**
207 |        * Fired when the stepper progress.
208 |        *
209 |        * @event paper-stepper-progressed
210 |        */
211 |       /**
212 |        * Fired when all the steps are saved.
213 |        *
214 |        * @event paper-stepper-completed
215 |        */
216 |       properties: {
217 |         opened: {
218 |           type: Boolean,
219 |           computed: '_computeOpened(_selectedIndex)',
220 |           observer: '_openedChanged',
221 |           notify: true,
222 |           reflectToAttribute: true
223 |         },
224 |         alternativeLabel: {
225 |           type: Boolean,
226 |           value: false
227 |         },
228 |         vertical: {
229 |           type: Boolean,
230 |           value: false,
231 |           notify: true,
232 |           reflectToAttribute: true
233 |         },
234 |         backText: {
235 |           type: String,
236 |           value: 'BACK'
237 |         },
238 |         finishText: {
239 |           type: String,
240 |           value: 'FINISH'
241 |         },
242 |         continueText: {
243 |           type: String,
244 |           value: 'CONTINUE'
245 |         },
246 |         skipText: {
247 |           type: String,
248 |           value: 'SKIP'
249 |         },
250 |         optionalText: {
251 |           type: String,
252 |           value: 'Optional'
253 |         },
254 |         updateText: {
255 |           type: String,
256 |           value: 'UPDATE'
257 |         },
258 |         linear: {
259 |           type: Boolean,
260 |           value: false
261 |         },
262 |         completed: {
263 |           type: Boolean,
264 |           value: false,
265 |           notify: true,
266 |           computed: '_computeCompleted(stepNumber, savedStepNumber)'
267 |         },
268 |         hasSkipButton: {
269 |           type: Boolean,
270 |           value: false
271 |         },
272 |         hasBackButton: {
273 |           type: Boolean,
274 |           value: false
275 |         },
276 |         stepNumber: {
277 |           type: Number,
278 |           notify: true,
279 |           computed: '_computeStepNumber(items.length)'
280 |         },
281 |         savedStepNumber: {
282 |           type: Number,
283 |           notify: true,
284 |           readOnly: true
285 |         },
286 |         selectedAttribute: {
287 |           value: 'opened',
288 |           readOnly: true
289 |         },
290 |         /**
291 |          * Note: if you decide to change this attribute, take care to only include `<paper-step>` elements in your `<paper-stepper>`
292 |          */
293 |         selectable: {
294 |           value: 'paper-step'
295 |         },
296 |         /**
297 |          * Multi mode is not allowed for now in paper-stepper.
298 |          */
299 |         mutli: {
300 |           value: false,
301 |           readOnly: true
302 |         },
303 |         responsiveCheckFrequence: {
304 |           type: Number,
305 |           value: 200
306 |         },
307 |         animateInitialSelection: {
308 |           type: Boolean,
309 |           value: false
310 |         },
311 |         horizontalHigherEntryAnimation: {
312 |           type: String,
313 |           value: 'fade-in-slide-from-right-animation'
314 |         },
315 |         horizontalHigherExitAnimation: {
316 |           type: String,
317 |           value: 'fade-out-slide-right-animation'
318 |         },
319 |         horizontalLowerEntryAnimation: {
320 |           type: String,
321 |           value: 'fade-in-slide-from-left-animation'
322 |         },
323 |         horizontalLowerExitAnimation: {
324 |           type: String,
325 |           value: 'fade-out-slide-left-animation'
326 |         },
327 |         _skipStepIndex: {
328 |           type: Number,
329 |           computed: '_compute_skipStepIndex(_selectedIndex)'
330 |         },
331 |         _canSkip: {
332 |           type: Boolean,
333 |           notify: true,
334 |           computed: '_isntNull(_skipStepIndex)'
335 |         },
336 |         _backStepIndex: {
337 |           type: Number,
338 |           computed: '_compute_backStepIndex(_selectedIndex)'
339 |         },
340 |         _hasBackStep: {
341 |           type: Boolean,
342 |           computed: '_isntNull(_backStepIndex)'
343 |         },
344 |         _selectedIndex: {
345 |           type: Number,
346 |           observer: '_selectedIndexChanged',
347 |           readOnly: true,
348 |           value: -1
349 |         },
350 |         _attrForSelectedStepPrimaryButtonText: {
351 |           type: String,
352 |           computed: '_compute__attrForSelectedStepPrimaryButtonText(_selectedIndex, stepNumber)'
353 |         }
354 |       },
355 | 
356 |       _previousAnimatedStep: null,
357 | 
358 |       _previousSelected: null,
359 | 
360 |       keyBindings: {
361 |         'left': '_onLeftKey',
362 |         'right': '_onRightKey'
363 |       },
364 | 
365 |       listeners: {
366 |         'iron-items-changed': '_initializeSteps',
367 |         'paper-step-saved': '_stepSaved',
368 |         'transitionend': '_transitionEnd',
369 |         'step-horizontal-label-resize': '_updateStepperClosedMaxHeight',
370 |         'iron-resize': '_resizeHandler',
371 |         'neon-animation-finish': '_onNeonAnimationFinish'
372 |       },
373 | 
374 |       observers: [
375 |         '_forwardCanSkip(_canSkip, selectedItem)',
376 |         '_forwardHasBackStep(_hasBackStep, selectedItem)',
377 |         '_forwardVertical(vertical)',
378 |         '_forwardAlternativeLabel(alternativeLabel)',
379 |         '_forwardStepperData(linear, backText, optionalText, finishText, continueText, skipText, updateText, hasSkipButton, hasBackButton)'
380 |       ],
381 | 
382 |       attached: function() {
383 |         this._responsiveCheck();
384 |       },
385 | 
386 |       /**
387 |        * Missing Doc
388 |        */
389 |       back: function() {
390 |         this.selectIndex(this._backStepIndex);
391 |       },
392 | 
393 |       /**
394 |        * @return {Boolean} Try to continue the current step (if no step opened, use the first one).
395 |        */
396 |       continue: function() {
397 |         if (this.selectedItem) {
398 |           if (this.selectedItem.save()) {
399 |             this.progress();
400 |           }
401 |         }
402 |       },
403 | 
404 |       /**
405 |        * Loops around the steps from the current (if no step opened, from the first one)
406 |        * in order to open the next selectable unsaved step. Returns true if a step has been opened.
407 |        */
408 |       progress: function() {
409 |         if (!this.stepNumber) {
410 |           return false;
411 |         }
412 |         if (this.completed) {
413 |           this.selected = null;
414 |           return true;
415 |         }
416 |         for (var i = (this._selectedIndex+1)%this.stepNumber; i != this._selectedIndex; i = (i+1)%this.stepNumber) {
417 |           if (this.items[i].selectable && !this.items[i].saved) {
418 |             this.selectIndex(i);
419 |             this.fire('paper-stepper-progressed');
420 |             return true;
421 |           }
422 |         }
423 |         return false;
424 |       },
425 | 
426 |       /* Deselect and set the steps as unsaved*/
427 |       reset: function() {
428 |         this._setSavedStepNumber(0);
429 |         this.selected = null;
430 |         if (!this.items.length) {
431 |           return;
432 |         }
433 |         this.items.map(function(step) {
434 |           step._setSaved(false);
435 |           step._set_previousSaved(false);
436 |         });
437 |         this.items[0]._set_previousSaved(true);
438 |       },
439 | 
440 |       get _isRTL() {
441 |         return window.getComputedStyle(this)['direction'] === 'rtl';
442 |       },
443 | 
444 |       _onLeftKey: function(event) {
445 |         if (this._isRTL) {
446 |           this._focusNext();
447 |         } else {
448 |           this._focusPrevious();
449 |         }
450 |         event.detail.keyboardEvent.preventDefault();
451 |       },
452 |       
453 |       _onRightKey: function(event) {
454 |         if (this._isRTL) {
455 |           this._focusPrevious();
456 |         } else {
457 |           this._focusNext();
458 |         }
459 |         event.detail.keyboardEvent.preventDefault();
460 |       },
461 | 
462 |       /**
463 |        * Work around: Override the method from IronSelectableBehavior to only allow the selection of selectable step. https://github.com/PolymerElements/iron-selector/issues/99
464 |        */
465 |       _selectSelected: function(selected) {
466 |         var item = this._valueToItem(this.selected);
467 |         if (item) {
468 |           var selectable = item.selectable;
469 |           if (selectable == undefined) {
470 |             // if selectable isn't define it means the step is not yet ready for selection
471 |             // and this method will be recalled by the initialization method.
472 |             return;
473 |           } else if (!selectable) {
474 |             //reset previous selected if non null and selectable or deselect
475 |             if (this._previousSelected && this._previousSelected.selectable) {
476 |               this.selected = this._valueForItem(this.previousSelected);
477 |             } else {
478 |               this.selected = null;
479 |             }
480 |             this._previousSelected = null;
481 |             return;
482 |           }
483 |         }
484 |         this._selection.select(item);
485 |         this._previousSelected = item;
486 |         this._set_selectedIndex(this.indexOf(item));
487 |         // Check for items, since this array is populated only when attached
488 |         // Since Number(0) is falsy, explicitly check for undefined
489 |         if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
490 |           this.selected = this.fallbackSelection;
491 |         }
492 |       },
493 | 
494 |       _updateStepperClosedMaxHeight: function() {
495 |         this.debounce('updateStepperClosedMaxHeight', function() {
496 |           this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px';
497 |           this.updateStyles('--label-wrapper-height');
498 |         });
499 |       },
500 | 
501 |       _openedChanged: function(newValue, oldValue) {
502 |         if (!this.vertical && oldValue != undefined) {
503 |           this.toggleClass('collapsing', true);
504 |         }
505 |       },
506 | 
507 |       _transitionEnd: function(e) {
508 |         // check to ignore event fired by paper-ripple
509 |         if (e.propertyName == 'max-height') {
510 |           this.toggleClass('collapsing', false);
511 |         }
512 |       },
513 | 
514 |       _computeOpened: function(_selectedIndex) {
515 |         return _selectedIndex >= 0;
516 |       },
517 | 
518 |       _stepSaved: function(e) {
519 |         var previousStep = this.items[this.indexOf(e.target)+1];
520 |         if (previousStep) {
521 |           previousStep._set_previousSaved(true);
522 |         }
523 |         this._setSavedStepNumber(this.savedStepNumber+1);
524 |       },
525 | 
526 |       _forwardVertical: function(vertical) {
527 |         if (this.stepNumber) {
528 |           this.items.map(function(step) {
529 |             step._setVertical(vertical);
530 |           });
531 |         }
532 |         this.setAttribute('role', vertical ? 'menu': 'menubar');
533 |       },
534 | 
535 |       _forwardStepperData: function(linear, backText, optionalText, finishText, continueText, skipText, updateText, hasSkipButton, hasBackButton) {
536 |         if (this.stepNumber) {
537 |           this.items.map(function(step) {
538 |             step._set_stepperData({
539 |               linear: linear,
540 |               backText: backText,
541 |               optionalText: optionalText,
542 |               finishText: finishText,
543 |               continueText: continueText,
544 |               skipText: skipText,
545 |               updateText: updateText,
546 |               hasSkipButton: hasSkipButton,
547 |               hasBackButton: hasBackButton,
548 |               stepNumber: this.stepNumber
549 |             });
550 |           }.bind(this));
551 |         }
552 |       },
553 | 
554 |       _forwardAlternativeLabel: function(alternativeLabel) {
555 |         if (this.stepNumber) {
556 |           this.items.map(function(step) {
557 |             step._set_alternativeLabel(alternativeLabel);
558 |           });
559 |         }
560 |       },
561 | 
562 |       _computeStepNumber: function(length) {
563 |         return length;
564 |       },
565 | 
566 |       _selectedIndexChanged: function(newValue, oldValue) {
567 |         if (!this.vertical && newValue >=0 && oldValue >= 0) {
568 |           var oldStep = this.items[oldValue], newStep = this.items[newValue];
569 |           if (newStep.classList.contains('neon-animating')) {
570 |             this.cancelAnimation();
571 |           }
572 |           if (this._previousAnimatedStep && this._previousAnimatedStep.classList.contains('neon-animating')) {
573 |             this.cancelAnimation();
574 |             this.toggleClass('neon-animating', false, this._previousAnimatedStep);
575 |           }
576 |           var forward = newValue - oldValue > 0;
577 | 
578 |           this.animationConfig = {
579 |             'new-step-entry': {
580 |               animatable: newStep,
581 |               type: forward ?
582 |                 newStep.horizontalHigherEntryAnimation && 'higher-step-entry' :
583 |                 newStep.horizontalLowerEntryAnimation && 'lower-step-entry'
584 |             },
585 |             'old-step-exit': {
586 |               animatable: oldStep,
587 |               type: forward ?
588 |                 oldStep.horizontalLowerExitAnimation && 'lower-step-exit' :
589 |                 oldStep.horizontalHigherExitAnimation && 'higher-step-exit'
590 |             }
591 |           };
592 |           if (this.animationConfig['new-step-entry'].type) {
593 |             this.playAnimation('new-step-entry', {step: newStep});
594 |             this.toggleClass('neon-animating', true, newStep);
595 |           }
596 |           if (this.animationConfig['old-step-exit'].type) {
597 |             this.playAnimation('old-step-exit', {step: oldStep});
598 |             this.toggleClass('neon-animating', true, oldStep);
599 |           }
600 | 
601 |           this._previousAnimatedStep = oldStep;
602 |         }
603 |       },
604 | 
605 |       _onNeonAnimationFinish: function(event) {
606 |         var step = event.detail.step;
607 |         if (step) {
608 |           this.toggleClass('neon-animating', false, step);
609 |         }
610 |       },
611 | 
612 |       _forwardCanSkip: function(_canSkip, selectedItem) {
613 |         selectedItem._set_canSkip(_canSkip);
614 |       },
615 | 
616 |       _forwardHasBackStep: function(_hasBackStep, selectedItem) {
617 |         selectedItem._set_hasBackStep(_hasBackStep);
618 |       },
619 | 
620 |       _compute__attrForSelectedStepPrimaryButtonText: function(selectedIndex) {
621 |         /* TODO: compute from selectedItem when https://github.com/PolymerElements/iron-selector/issues/118 is fixed*/
622 |         if (selectedIndex < 0) {
623 |           return null;
624 |         }
625 |         var _attrForPrimaryButtonText = this.selectedItem.saved ? 'updateText' :
626 |           ( (this.stepNumber - this.savedStepNumber) == 1 ? 'finishText' : 'continueText' );
627 |         this.selectedItem._set_attrForPrimaryButtonText(_attrForPrimaryButtonText);
628 |         return _attrForPrimaryButtonText;
629 |       },
630 | 
631 |       _initializeSteps: function() {
632 |         var savedStepNumber = 0;
633 |         var data = {
634 |           linear: this.linear,
635 |           backText: this.backText,
636 |           optionalText: this.optionalText,
637 |           finishText: this.finishText,
638 |           continueText: this.continueText,
639 |           skipText: this.skipText,
640 |           updateText: this.updateText,
641 |           hasSkipButton: this.hasSkipButton,
642 |           hasBackButton: this.hasBackButton,
643 |           stepNumber: this.stepNumber
644 |         };
645 |         this.items.map(function(step, i) {
646 |           if (this.horizontalHigherEntryAnimation && !step.horizontalHigherEntryAnimation) {
647 |             step.horizontalHigherEntryAnimation = this.horizontalHigherEntryAnimation;
648 |           }
649 |           if (this.horizontalHigherExitAnimation && !step.horizontalHigherExitAnimation) {
650 |             step.horizontalHigherExitAnimation = this.horizontalHigherExitAnimation;
651 |           }
652 |           if (this.horizontalLowerEntryAnimation && !step.horizontalLowerEntryAnimation) {
653 |             step.horizontalLowerEntryAnimation = this.horizontalLowerEntryAnimation;
654 |           }
655 |           if (this.horizontalLowerExitAnimation && !step.horizontalLowerExitAnimation) {
656 |             step.horizontalLowerExitAnimation = this.horizontalLowerExitAnimation;
657 |           }
658 |           step._setIndex(i + 1);
659 |           step._set_stepper(this);
660 |           step._setVertical(this.vertical);
661 |           step._set_alternativeLabel(this.alternativeLabel);
662 |           step._set_stepperData(data);
663 |           // true for index 0
664 |           step._set_previousSaved(!i);
665 |           if (step.saved) {
666 |             savedStepNumber++;
667 |           }
668 |         }.bind(this));
669 |          
670 |         this._setSavedStepNumber(savedStepNumber);
671 |         // method from IronSelectableBehavior
672 |         this._updateSelected();
673 |       },
674 | 
675 |       _compute_skipStepIndex: function(_selectedIndex) {
676 |         if (_selectedIndex >= 0 && !this.completed) {
677 |           for (var i=(_selectedIndex+1)%this.stepNumber; i!=_selectedIndex; i=(i+1)%this.stepNumber) {
678 |             if (this.items[i].selectable && !this.items[i].saved) {
679 |               return i;
680 |             }
681 |           }
682 |         }
683 |         return null;
684 |       },
685 | 
686 |       _compute_backStepIndex: function(_selectedIndex) {
687 |         if (_selectedIndex >= 0) {
688 |           for (var i=_selectedIndex - 1; i >= 0; i--) {
689 |             if (this.items[i].selectable) {
690 |               return i;
691 |             }
692 |           }
693 |         }
694 |         return null
695 |       },
696 | 
697 |       _isntNull: function(n) {
698 |         return n != null;
699 |       },
700 | 
701 |       _computeCompleted: function(savedStepNumber, stepNumber) {
702 |         var completed = stepNumber == savedStepNumber;
703 |         if (completed) {
704 |           this.fire('paper-stepper-completed');
705 |           return true;
706 |         }
707 |         return false;
708 |       },
709 | 
710 |       _choosePrimaryButtonText: function(_attrForSelectedStepPrimaryButtonText) {
711 |         return this[_attrForSelectedStepPrimaryButtonText];
712 |       },
713 | 
714 |       _resizeHandler: function() {
715 |         this.debounce('paper-stepper-responsive-check', function() {
716 |           this._responsiveCheck();
717 |         }, this.responsiveCheckFrequence);
718 |       },
719 | 
720 |       _responsiveCheck: function() {
721 |         var verticalResponsiveWidth = this.$.verticalResponsiveWidth.clientWidth;
722 |         if (verticalResponsiveWidth) {
723 |           this.vertical = !(this.clientWidth > verticalResponsiveWidth);
724 |         }
725 |       }
726 | 
727 |     });
728 | 
729 |   </script>
730 | </dom-module>
731 | 


--------------------------------------------------------------------------------
/step-horizontal-label.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  2 | <link rel="import" href="../iron-icons/iron-icons.html">
  3 | <link rel="import" href="../iron-icons/editor-icons.html">
  4 | <link rel="import" href="../paper-styles/default-theme.html">
  5 | <link rel="import" href="../polymer/polymer.html">
  6 | <link rel="import" href="step-label-behavior.html">
  7 | <link rel="import" href="step-label-shared-styles.html">
  8 | 
  9 | <dom-module id="step-horizontal-label">
 10 |   <template>
 11 |     <style include="step-label-shared-styles">
 12 |       :host {
 13 |         overflow: hidden;
 14 |       }
 15 |       :host([alternative-label]) {
 16 |         @apply(--layout);
 17 |       }
 18 |       #textWrapper {
 19 |         @apply(--layout-vertical);
 20 |         padding-right: 8px;
 21 |         overflow: hidden;
 22 |       }
 23 |       #textLabel, #optional {
 24 |         white-space: nowrap;
 25 |         text-overflow: ellipsis;
 26 |         overflow: hidden;
 27 |       }
 28 |       #badge {
 29 |         margin: 0 8px;
 30 |       }
 31 |       :host(:not([alternative-label])) {
 32 |         @apply(--layout-horizontal);
 33 |         @apply(--layout-center);
 34 |         height: 72px;
 35 |       }
 36 |       :host(.firstStep:not([alternative-label])) #badge {
 37 |         margin-left: 24px;
 38 |       }
 39 |       :host(.lastStep:not([alternative-label])) #textWrapper {
 40 |         padding-right: 24px;
 41 |       }
 42 |       :host(:not([alternative-label]):not(.first-step))::before, 
 43 |       :host(:not([alternative-label]):not(.last-step))::after,
 44 |       :host([alternative-label]) #badgeWrapper::before,
 45 |       :host([alternative-label]) #badgeWrapper::after  {
 46 |         height: 1px;
 47 |         min-width: 16px;
 48 |         background: var(--paper-step-connector-line-color, --divider-color);
 49 |         @apply(--layout-flex);
 50 |         content: '';
 51 |       }
 52 |       :host([alternative-label].first-step) #badgeWrapper::before,
 53 |       :host([alternative-label].last-step) #badgeWrapper::after {
 54 |         visibility: hidden;
 55 |       }
 56 |       :host([alternative-label]) #textWrapper{
 57 |         padding: 0 16px;
 58 |         @apply(--layout-vertical);
 59 |         @apply(--layout-center);
 60 |       }
 61 |       :host([alternative-label]) #textLabel,
 62 |       :host([alternative-label]) #optional{
 63 |         text-align: center;
 64 |         @apply(--layout-self-stretch);
 65 |       }
 66 |       :host([alternative-label]){
 67 |         @apply(--layout-vertical);
 68 |         @apply(--layout-self-stretch);
 69 |         padding: 24px 0;
 70 |         width: 100%;
 71 |       }
 72 |       :host([alternative-label]) #badgeWrapper {
 73 |         @apply(--layout-horizontal);
 74 |         @apply(--layout-center);
 75 |         padding-bottom: 16px;
 76 |       }
 77 |       :host(.first-step:not([alternative-label])) {
 78 |         padding-left: 16px;
 79 |       }
 80 |       :host(.last-step:not([alternative-label])) {
 81 |         padding-right: 16px;
 82 |       }
 83 |     </style>
 84 | 
 85 |     <div id="badgeWrapper">
 86 |       <div id="badge">
 87 |         <iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
 88 |         <span hidden$="{{_computeIsIconBadge(icon)}}">{{index}}</span>
 89 |       </div>
 90 |     </div>
 91 |     <div id="textWrapper">
 92 |       <span id="textLabel">[[label]]</span>
 93 |       <template is="dom-if" if="[[optional]]">
 94 |         <span id="optional">[[stepperData.optionalText]]</span>
 95 |       </template>
 96 |     </div>
 97 |   </template>
 98 |   <script>
 99 |     Polymer({
100 |       is: 'step-horizontal-label',
101 | 
102 |       behaviors: [
103 |         Stepper.StepLabelBehavior
104 |       ],
105 | 
106 |       properties: {
107 |         alternativeLabel: {
108 |           type: Boolean,
109 |           value: false,
110 |           reflectToAttribute: true
111 |         }
112 |       },
113 | 
114 |     });
115 |   </script>
116 | </dom-module>
117 | 


--------------------------------------------------------------------------------
/step-label-behavior.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../polymer/polymer.html">
 2 | 
 3 | <script>
 4 | 
 5 | window.Stepper = window.Stepper || {};
 6 |   
 7 |   /*
 8 |   * @polymerBehavior Stepper.StepLabelBehavior
 9 |   */
10 |   Stepper.StepLabelBehavior = {
11 | 
12 |     properties: {
13 |       icon: {
14 |         type: String,
15 |         computed: '_computeIcon(saved, editable)'
16 |       },
17 |       opened: {
18 |         type: Boolean,
19 |         reflectToAttribute: true
20 |       },
21 |       selectable: {
22 |         type: Boolean,
23 |         reflectToAttribute: true
24 |       },
25 |       editable: {
26 |         type: Boolean,
27 |         reflectToAttribute: true,
28 |       },
29 |       label: {
30 |         type: String,
31 |         notify: true
32 |       },
33 |       optional: {
34 |         type: Boolean,
35 |         notify: true
36 |       },
37 |       saved: {
38 |         type: Boolean,
39 |         reflectToAttribute: true
40 |       },
41 |       index: {
42 |         type: Number
43 |       },
44 |       stepperData: {
45 |        type: Object
46 |       }
47 |     },
48 | 
49 |     _computeIcon: function(saved, editable) {
50 |       return saved ? ( editable ? 'editor:mode-edit' : 'done' ) : '';
51 |     },
52 | 
53 |     _computeIsIconBadge: function(icon) {
54 |       return icon.length > 0;
55 |     }
56 | 
57 |   };
58 | </script>
59 | 


--------------------------------------------------------------------------------
/step-label-shared-styles.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 2 | <link rel="import" href="../paper-styles/default-theme.html">
 3 | <link rel="import" href="../paper-styles/color.html">
 4 | <link rel="import" href="../paper-styles/typography.html">
 5 | <link rel="import" href="../polymer/polymer.html">
 6 | 
 7 | <dom-module id="step-label-shared-styles">
 8 |   <template>
 9 |     <style>
10 |       :host {
11 |         display: block;
12 |         box-sizing: border-box;
13 |         @apply(--paper-font-common-base);
14 |         cursor: default;
15 |         pointer-events: none;
16 |         /* For paper-ripple */
17 |         position: relative;
18 |       }
19 |       #textWrapper {
20 |         color: var(--paper-step-disabled-label-text-color, --paper-grey-400);
21 |       }
22 |       #textLabel {
23 |         font-size: var(--paper-step-label-text-font-size, 14px);
24 |       }
25 |       #optional{
26 |         font-size: var(--paper-step-label-optional-text-font-size, 12px);
27 |       }
28 |       :host([selectable]) #textWrapper {
29 |         color: var(--paper-step-selectable-label-text-color, --paper-grey-600);
30 |       }
31 |       :host([opened]) #textLabel {
32 |         color: var(--paper-step-opened-label-text-color, --light-theme-text-color);
33 |         font-weight: 500;
34 |       }
35 |       :host([selectable]) {
36 |         cursor: pointer;
37 |         pointer-events: auto;
38 |       }
39 |       :host:hover {
40 |         /* using alpha chanel for .connectorLine to grow dark */
41 |         background: var(--paper-step-label-hover-background, rgba(0,0,0,0.04));
42 |       }
43 |       #badgeWrapper, #textWrapper {
44 |         pointer-events: none;
45 |         /* to be above paper-ripple*/
46 |         z-index: 1;
47 |       }
48 |       #badge {
49 |         width: 24px;
50 |         height: 24px;
51 |         background: var(--paper-step-badge-background, --paper-grey-300);
52 |         border-radius: 50%;
53 |         color: var(--paper-step-badge-color, --dark-theme-text-color);
54 |         font-size: 12px;
55 |         @apply(--layout);
56 |         @apply(--layout-center-center);
57 |       }
58 |       #badge iron-icon {
59 |         --iron-icon-height: var(--paper-step-badge-icon-width, 16px);
60 |         --iron-icon-width: var(--paper-step-badge-icon-height, 16px);  
61 |       }
62 |       :host([opened]) #badge {
63 |         background: var(--paper-step-opened-badge-background, --primary-color);
64 |       }
65 |       :host([saved]) #badge {
66 |         background: var(--paper-step-saved-badge-background, --primary-color);
67 |       }
68 |       :host([selectable]:not([opened]):not([saved])):hover #badge {
69 |         background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500);
70 |       }
71 |       paper-ripple {
72 |         color: var(--paper-step-ink-color, --paper-grey-400);
73 |       }
74 |     </style>
75 |   </template>
76 | </dom-module>
77 | 


--------------------------------------------------------------------------------
/step-vertical-label.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 2 | <link rel="import" href="../paper-styles/color.html">
 3 | <link rel="import" href="../paper-styles/default-theme.html">
 4 | <link rel="import" href="../polymer/polymer.html">
 5 | <link rel="import" href="../iron-icons/iron-icons.html">
 6 | <link rel="import" href="../iron-icon/iron-icon.html">
 7 | <link rel="import" href="../iron-icons/editor-icons.html">
 8 | <link rel="import" href="step-label-behavior.html">
 9 | <link rel="import" href="step-label-shared-styles.html">
10 | 
11 | <dom-module id="step-vertical-label">
12 |   <template>
13 |     <style include="step-label-shared-styles">
14 |       :host {
15 |         @apply(--layout-horizontal);
16 |       }
17 |       #textWrapper {
18 |         @apply(--layout-vertical);
19 |         padding: 20px 0 20px 12px;
20 |       }
21 |       #badgeWrapper {
22 |         @apply(--layout-vertical);
23 |         @apply(--layout-center);
24 |         margin-left: 24px;
25 |       }
26 |       :host #badgeWrapper::before,
27 |       :host #badgeWrapper::after {
28 |         display: block;
29 |         content: '';
30 |         background: var(--paper-step-connector-line-color, --divider-color);
31 |         width: 1px;
32 |       }
33 |       :host #badgeWrapper::before {
34 |         height: 10px;
35 |       }
36 |       :host #badgeWrapper::after {
37 |         @apply(--layout-flex);
38 |       }
39 |       #badge {
40 |         margin: 8px 0;
41 |       }
42 |       :host(.first-step) #badgeWrapper::before {
43 |         visibility: hidden;
44 |       }
45 |       :host(.last-step:not([opened])) #badgeWrapper::after {
46 |         display: none;
47 |       }
48 |     </style>
49 | 
50 |     <div id="badgeWrapper">
51 |       <div id="badge">
52 |         <iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
53 |         <span hidden$="{{_computeIsIconBadge(icon)}}">{{index}}</span>
54 |       </div>
55 |     </div>
56 |     <div id="textWrapper">
57 |       <span id="textLabel">[[label]]</span>
58 |       <template is="dom-if" if="[[optional]]">
59 |         <span id="optional">[[stepperData.optionalText]]</span>
60 |       </template>
61 |     </div>
62 | 
63 |   </template>
64 |   <script>
65 | 
66 |     Polymer({
67 |       is: 'step-vertical-label',
68 | 
69 |       properties: {
70 |         canSkip: {
71 |           type: Boolean
72 |         }
73 |       },
74 | 
75 |       behaviors: [
76 |         Stepper.StepLabelBehavior
77 |       ]
78 | 
79 |     });
80 |   </script>
81 | </dom-module>
82 | 


--------------------------------------------------------------------------------
/test/basic-test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 |   <head>
13 |     <meta charset="utf-8">
14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 | 
16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17 |     <script src="../../web-component-tester/browser.js"></script>
18 | 
19 |     <!-- Step 1: import the element to test -->
20 |     <link rel="import" href="../paper-stepper.html">
21 |   </head>
22 |   <body>
23 | 
24 |     <!-- You can use the document as a place to set up your fixtures. -->
25 |     <paper-stepper></paper-stepper>
26 | 
27 |     <script>
28 |       var myEl = document.querySelector('paper-stepper');
29 | 
30 |       suite('<paper-stepper>', function() {
31 | 
32 |         test('defines the "author" property', function() {
33 |           assert.equal(myEl.author.name, 'Dimitri Glazkov');
34 |           assert.equal(myEl.author.image, 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg');
35 |         });
36 | 
37 |         test('says hello', function() {
38 |           assert.equal(myEl.sayHello(), 'paper-stepper says, Hello World!');
39 | 
40 |           var greetings = myEl.sayHello('greetings Earthlings');
41 |           assert.equal(greetings, 'paper-stepper says, greetings Earthlings');
42 |         });
43 | 
44 |         test('fires lasers', function(done) {
45 |           myEl.addEventListener('paper-stepper-lasers', function(event) {
46 |             assert.equal(event.detail.sound, 'Pew pew!');
47 |             done();
48 |           });
49 |           myEl.fireLasers();
50 |         });
51 | 
52 |       });
53 |     </script>
54 | 
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 |   <head>
13 |     <meta charset="utf-8">
14 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 | 
16 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17 |     <script src="../../web-component-tester/browser.js"></script>
18 |   </head>
19 |   <body>
20 |     <script>
21 |       // Load and run all tests (.html, .js):
22 |       WCT.loadSuites([
23 |         'basic-test.html',
24 |       ]);
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------