├── .gitignore
├── .vscode
    └── settings.json
├── LICENSE
├── README.md
├── analysis.json
├── bower.json
├── demo
    └── index.html
├── index.html
├── package.json
├── polymer.json
├── test
    ├── index.html
    └── ud-stepper_test.html
├── ud-iconset.html
├── ud-step.html
└── ud-stepper.html


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


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.tabSize": 2
3 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 urdeveloper
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # \<ud-stepper\>
 2 | 
 3 | Material Design:
 4 | [Steppers](https://material.io/guidelines/components/steppers.html)
 5 | 
 6 | <!---
 7 | ```
 8 | <custom-element-demo>
 9 |   <template>
10 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
11 |     <link rel="import" href="ud-stepper.html">
12 |     <style is="custom-style" include="demo-pages-shared-styles">
13 |       ud-step {
14 |         height: 250px;
15 |         --ud-step-content-style: {
16 |           background-color: rgba(0, 0, 0, .1);
17 |           padding: 5px;
18 |           color: rgba(0, 0, 0, 0.8);
19 |         }
20 |       }
21 |     </style>
22 |     <next-code-block></next-code-block>
23 |   </template>
24 | </custom-element-demo>
25 | ```
26 | -->
27 | 
28 | ```html
29 | <ud-stepper linear>
30 |     <ud-step title="Step 1">
31 |       <div slot="content">Step 1 Content</div>
32 |     </ud-step>
33 |     <ud-step title="Step 2 with long title">
34 |       <div slot="content">Step 2 Content</div>
35 |     </ud-step>
36 |     <ud-step title="Step 3">
37 |       <div slot="content">Step 3 Content</div>
38 |     </ud-step>
39 | </ud-stepper>
40 | ```
41 | 
42 | ## Install the Polymer-CLI
43 | 
44 | First, make sure you have the
45 | [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run
46 | `polymer serve` to serve your element locally.
47 | 
48 | ## Viewing Your Element
49 | 
50 | ```
51 | $ polymer serve
52 | ```
53 | 
54 | ## Running Tests
55 | 
56 | ```
57 | $ polymer test
58 | ```
59 | 
60 | Your application is already set up to be tested via
61 | [web-component-tester](https://github.com/Polymer/web-component-tester). Run
62 | `polymer test` to run your application's test suite locally.
63 | 
64 | ## Acknowledgment
65 | This project is inspired by [MDL-Stepper](https://ahlechandre.github.io/mdl-stepper/).
66 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ud-stepper",
 3 |   "version": "0.6.0",
 4 |   "description": "Material Design Stepper",
 5 |   "main": "ud-stepper.html",
 6 |   "dependencies": {
 7 |     "polymer": "Polymer/polymer#^2.0.0",
 8 |     "paper-styles": "^2.0.0",
 9 |     "neon-animation": "^2.2.0",
10 |     "iron-menu-behavior": "^2.0.1",
11 |     "paper-button": "^2.0.0",
12 |     "iron-iconset-svg": "^2.1.0",
13 |     "iron-icon": "^2.0.1"
14 |   },
15 |   "devDependencies": {
16 |     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
17 |     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
18 |     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
19 |     "iron-component-page": "^3.0.1"
20 |   },
21 |   "resolutions": {
22 |     "polymer": "^2.0.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  7 |   <title>ud-stepper demo</title>
  8 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  9 |   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 10 |   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
 11 |   <link rel="import" href="../../paper-button/paper-button.html">
 12 |   <link rel="import" href="../ud-stepper.html">
 13 |   <custom-style>
 14 |     <style is="custom-style" include="demo-pages-shared-styles">
 15 |     ud-step {
 16 |       height: 250px;
 17 | 
 18 |       --ud-step-content-style: {
 19 |         background-color: rgba(0, 0, 0, .1);
 20 |         padding: 5px;
 21 |         color: rgba(0, 0, 0, 0.8);
 22 |       }
 23 |     }
 24 | 
 25 |     ud-stepper {
 26 |       min-height: 350px;
 27 |     }
 28 | 
 29 |     .demo-actions {
 30 |       display: flex;
 31 |       flex-direction: row;
 32 |       padding: 10px 0px 10px 0px;
 33 |       align-items: center;
 34 |       justify-content: space-between;
 35 |     }
 36 | 
 37 |     .demo-actions .buttons {
 38 |       display: flex;
 39 |       flex-direction: row;
 40 |       justify-content: flex-end;
 41 |     }
 42 | 
 43 |     .demo-actions .buttons .toggle,
 44 |     .demo-actions .buttons .toggle-animation {
 45 |       background-color: var(--paper-indigo-400);
 46 |       color: white;
 47 |     }
 48 | 
 49 |     .demo-actions .buttons .reset {
 50 |       background-color: var(--paper-pink-400);
 51 |       color: white;
 52 |     }
 53 |     </style>
 54 |   </custom-style>
 55 | </head>
 56 | 
 57 | <body>
 58 |   <div class="vertical-section-container centered">
 59 |     <div class="demo-actions">
 60 |       <h3>Linear Stepper</h3>
 61 |       <div class="buttons">
 62 |         <paper-button class="reset">Reset Stepper</paper-button>
 63 |         <paper-button class="toggle">Toggle Orientation</paper-button>
 64 |         <paper-button class="toggle-animation">Toggle Animation</paper-button>
 65 |       </div>
 66 |     </div>
 67 |     <demo-snippet>
 68 |       <template>
 69 |         <ud-stepper id="steps" linear sizing="contain" animate>
 70 |           <ud-step title="Step 1">
 71 |             <div> Step 1 Content</div>
 72 |             <paper-button raised>Content button</paper-button>
 73 |           </ud-step>
 74 |           <ud-step title="Step 2 with veeeeeery long title">
 75 |             <div>Step 2 Content</div>
 76 |           </ud-step>
 77 |           <ud-step title="Step 3">
 78 |             <div>Step 3 Content</div>
 79 |           </ud-step>
 80 |         </ud-stepper>
 81 |       </template>
 82 |     </demo-snippet>
 83 |   </div>
 84 |   <div class="vertical-section-container centered">
 85 |     <div class="demo-actions">
 86 |       <h3>Non-Linear Stepper</h3>
 87 |       <div class="buttons">
 88 |         <paper-button class="reset">Reset Stepper</paper-button>
 89 |         <paper-button class="toggle">Toggle Orientation</paper-button>
 90 |         <paper-button class="toggle-animation">Toggle Animation</paper-button>
 91 |       </div>
 92 |     </div>
 93 |     <demo-snippet>
 94 |       <template>
 95 |         <ud-stepper vertical>
 96 |           <ud-step title="Step 1 animate">
 97 |             <div >Step 1 Content</div>
 98 |           </ud-step>
 99 |           <ud-step title="Step 2">
100 |             <div >Step 2 Content</div>
101 |           </ud-step>
102 |           <ud-step title="Step 3">
103 |             <div >Step 3 Content</div>
104 |           </ud-step>
105 |         </ud-stepper>
106 |       </template>
107 |     </demo-snippet>
108 |   </div>
109 |   <div class="vertical-section-container centered">
110 |     <div class="demo-actions">
111 |       <h3>Linear Stepper with an editable step</h3>
112 |       <div class="buttons">
113 |         <paper-button class="reset">Reset Stepper</paper-button>
114 |         <paper-button class="toggle">Toggle Orientation</paper-button>
115 |       </div>
116 |     </div>
117 |     <demo-snippet>
118 |       <template>
119 |         <ud-stepper linear sizing="contain">
120 |           <ud-step title="Step 1" editable>
121 |             <div >Step 1 Content</div>
122 |           </ud-step>
123 |           <ud-step title="Step 2">
124 |             <div >Step 2 Content</div>
125 |           </ud-step>
126 |           <ud-step title="Step 3">
127 |             <div >Step 3 Content</div>
128 |           </ud-step>
129 |         </ud-stepper>
130 |       </template>
131 |     </demo-snippet>
132 |   </div>
133 |   <div class="vertical-section-container centered">
134 |     <div class="demo-actions">
135 |       <h3>Linear Stepper with an optional step</h3>
136 |       <div class="buttons">
137 |         <paper-button class="reset">Reset Stepper</paper-button>
138 |         <paper-button class="toggle">Toggle Orientation</paper-button>
139 |       </div>
140 |     </div>
141 |     <demo-snippet>
142 |       <template>
143 |         <ud-stepper linear>
144 |           <ud-step title="Step 1">
145 |             <div >Step 1 Content</div>
146 |           </ud-step>
147 |           <ud-step title="Step 2" optional>
148 |             <div >Step 2 Content. You can skip me!</div>
149 |           </ud-step>
150 |           <ud-step title="Step 3">
151 |             <div >Step 3 Content</div>
152 |           </ud-step>
153 |         </ud-stepper>
154 |       </template>
155 |     </demo-snippet>
156 |   </div>
157 |   <div class="vertical-section-container centered">
158 |     <div class="demo-actions">
159 |       <h3>Linear Stepper with error state</h3>
160 |       <div class="buttons">
161 |         <paper-button class="reset">Reset Stepper</paper-button>
162 |         <paper-button class="toggle">Toggle Orientation</paper-button>
163 |       </div>
164 |     </div>
165 |     <demo-snippet>
166 |       <template>
167 |         <ud-stepper linear>
168 |           <ud-step title="Step 1" error>
169 |             <div >Step 1 Content</div>
170 |           </ud-step>
171 |           <ud-step title="Step 2">
172 |             <div >Step 2 Content. You can skip me!</div>
173 |           </ud-step>
174 |           <ud-step title="Step 3">
175 |             <div >Step 3 Content</div>
176 |           </ud-step>
177 |         </ud-stepper>
178 |       </template>
179 |     </demo-snippet>
180 |   </div>
181 |   <div class="vertical-section-container centered">
182 |     <div class="demo-actions">
183 |       <h3>Custom action implementation </h3>
184 |       <div class="buttons">
185 |         <paper-button class="reset">Reset Stepper</paper-button>
186 |         <paper-button class="toggle">Toggle Orientation</paper-button>
187 |       </div>
188 |     </div>
189 |     <demo-snippet>
190 |       <template>
191 |         <dom-bind id="app">
192 |           <template>
193 |             <style>
194 |             paper-button {
195 |               background: white;
196 |             }
197 |             </style>
198 |             <ud-stepper linear>
199 |               <ud-step title="Step 1" hide-actions editable>
200 |                 <div >
201 |                   <div>Step 1 Content, custom action</div>
202 |                   <paper-button raised on-tap="next">next</paper-button>
203 |                 </div>
204 |               </ud-step>
205 |               <ud-step title="Step 2">
206 |                 <div >
207 |                   <div>Step 2 Content, custom action</div>
208 |                   <div>
209 |                     <paper-button raised on-tap="back">back</paper-button>
210 |                     <paper-button raised on-tap="next">next</paper-button>
211 |                   </div>
212 |                 </div>
213 |               </ud-step>
214 |               <ud-step title="Step 3">
215 |                 <div >Step 3 Content</div>
216 |               </ud-step>
217 |             </ud-stepper>
218 |           </template>
219 | 
220 |         </dom-bind>
221 |       </template>
222 |     </demo-snippet>
223 |   </div>
224 |   <script>
225 |   window.addEventListener('WebComponentsReady', function() {
226 |     console.info('ready');
227 |     app = document.querySelector('#app');
228 |     steps = document.querySelector('#steps');
229 | 
230 |     app.next = e => {
231 |       e.target.dispatchEvent(new CustomEvent('step-action', { detail: 'next', bubbles: true, composed: true }));
232 |     };
233 |     app.back = e => {
234 |       e.target.dispatchEvent(new CustomEvent('step-action', { detail: 'back', bubbles: true, composed: true }));
235 |     };
236 | 
237 |     document.querySelectorAll('paper-button.reset').forEach(rs => {
238 |       rs.addEventListener('tap', (evt) => {
239 |         evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').reset();
240 |       });
241 |     });
242 | 
243 |     document.querySelectorAll('paper-button.toggle').forEach(rs => {
244 |       rs.addEventListener('tap', (evt) => {
245 |         evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').toggleOrientation();
246 |       });
247 |     });
248 | 
249 |     document.querySelectorAll('paper-button.toggle-animation').forEach(rs => {
250 |       rs.addEventListener('tap', (evt) => {
251 |         evt.target.parentElement.parentElement.parentElement.querySelector('ud-stepper').toggleAnimation();
252 |       });
253 |     });
254 |   });
255 |   </script>
256 | </body>
257 | 
258 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |   <head>
 5 |     <title>ud-stepper</title>
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
 9 |     <link rel="import" href="../iron-component-page/iron-component-page.html">
10 |   </head>
11 |   <body>
12 |     <iron-component-page></iron-component-page>
13 |   </body>
14 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ud-stepper",
 3 |   "version": "0.7.0",
 4 |   "description": "Polymer 2.x Material Design Stepper",
 5 |   "author": "urdeveloper",
 6 |   "license": "MIT",
 7 |   "repository": "urdeveloper/ud-stepper",
 8 |   "bugs": {
 9 |     "url": "https://github.com/urdeveloper/ud-stepper/issues"
10 |   },
11 |   "homepage": "https://github.com/urdeveloper/ud-stepper",
12 |   "keywords": [
13 |     "urdeveloper",
14 |     "ud-stepper",
15 |     "components",
16 |     "webcomponents",
17 |     "web-components"
18 |   ],
19 |   "dependencies": {}
20 | }
21 | 


--------------------------------------------------------------------------------
/polymer.json:
--------------------------------------------------------------------------------
1 | {
2 |   "lint": {
3 |     "rules": [
4 |       "polymer-2"
5 |     ]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 | 
 7 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 |     <script src="../../web-component-tester/browser.js"></script>
 9 |   </head>
10 |   <body>
11 |     <script>
12 |       // Load and run all tests (.html, .js):
13 |       WCT.loadSuites([
14 |         'ud-stepper_test.html'
15 |       ]);
16 |     </script>
17 | 
18 | </body></html>
19 | 


--------------------------------------------------------------------------------
/test/ud-stepper_test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>ud-stepper test</title>
 8 | 
 9 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |     <script src="../../web-component-tester/browser.js"></script>
11 | 
12 |     <link rel="import" href="../ud-stepper.html">
13 |   </head>
14 |   <body>
15 | 
16 |     <test-fixture id="BasicTestFixture">
17 |       <template>
18 |         <ud-stepper></ud-stepper>
19 |       </template>
20 |     </test-fixture>
21 | 
22 |     <test-fixture id="ChangedPropertyTestFixture">
23 |       <template>
24 |         <ud-stepper prop1="new-prop1"></ud-stepper>
25 |       </template>
26 |     </test-fixture>
27 | 
28 |     <script>
29 |       suite('ud-stepper', () => {
30 | 
31 |         test('instantiating the element with default properties works', () => {
32 |           const element = fixture('BasicTestFixture');
33 |           assert.equal(element.prop1, 'ud-stepper');
34 |           const elementShadowRoot = element.shadowRoot;
35 |           const elementHeader = elementShadowRoot.querySelector('h2');
36 |           assert.equal(elementHeader.innerHTML, 'Hello ud-stepper!');
37 |         });
38 | 
39 |         test('setting a property on the element works', () => {
40 |           // Create a test fixture
41 |           const element = fixture('ChangedPropertyTestFixture');
42 |           assert.equal(element.prop1, 'new-prop1');
43 |           const elementShadowRoot = element.shadowRoot;
44 |           const elementHeader = elementShadowRoot.querySelector('h2');
45 |           assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
46 |         });
47 | 
48 |       });
49 |     </script>
50 | 
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/ud-iconset.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <link rel="import" href="../iron-icon/iron-icon.html">
 3 | <link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
 4 | 
 5 | <iron-iconset-svg size="24" name="ud">
 6 | <svg><defs>
 7 | <g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></g>
 8 | <g id="edit">	<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></g>
 9 | <g id="warning"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></g>
10 | </defs></svg>
11 | </iron-iconset-svg>
12 | 


--------------------------------------------------------------------------------
/ud-step.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer-element.html">
  2 | <link rel="import" href="../paper-button/paper-button.html">
  3 | <link rel="import" href="../paper-styles/element-styles/paper-material-styles.html">
  4 | <link rel="import" href="../paper-styles/typography.html">
  5 | <dom-module id="ud-step">
  6 |   <template>
  7 |     <style include="paper-material-styles">
  8 |     :host {
  9 |       display: flex;
 10 |       flex-direction: column;
 11 |     }
 12 | 
 13 |     #content {
 14 |       flex: 1;
 15 |       @apply --ud-step-content-style;
 16 |       margin: 24px 24px 16px 24px;
 17 |     }
 18 |     
 19 |     #content:focus {
 20 |       outline: none;
 21 |     }
 22 | 
 23 |     #actions {
 24 |       padding: 0px 24px 8px 24px;
 25 |       display: flex;
 26 |       flex-direction: row;
 27 |       flex-wrap: nowrap;
 28 |       justify-content: space-between;
 29 |       align-items: center;
 30 |       height: 48px;
 31 |     }
 32 | 
 33 |     :host([hide-actions]) #actions {
 34 |       display: none;
 35 |     }
 36 | 
 37 |     #actions ::slotted(.linear-actions),
 38 |     .linear-actions {
 39 |       display: flex;
 40 |       flex-direction: row;
 41 |       justify-content: flex-end;
 42 |       align-items: center;
 43 |       flex: 1;
 44 |     }
 45 | 
 46 |     paper-button,
 47 |     #actions ::slotted(paper-button) {
 48 |       color: rgba(0, 0, 0, 0.83);
 49 |     }
 50 | 
 51 |     .continue-btn,
 52 |     #actions ::slotted(.continue-btn) {
 53 |       color: var(--ud-step-continue-btn-color, var(--google-blue-500));
 54 |     }
 55 | 
 56 |     paper-button[disabled],
 57 |     #actions ::slotted(paper-button[disabled]) {
 58 |       color: rgba(0, 0, 0, 0.50);
 59 |       background-color: transparent;
 60 |     }
 61 | 
 62 |     paper-button:focus, 
 63 |     #actions ::slotted(paper-button:focus) {
 64 |       background-color: var(--google-grey-300);
 65 | 
 66 |     }
 67 |     </style>
 68 |     <div id="content">
 69 |       <slot></slot>
 70 |     </div>
 71 |     <div id="actions">
 72 |       <slot name="actions" id="actionsSlot">
 73 |         <paper-button data-action="back" class="back-btn">Back</paper-button>
 74 |         <paper-button data-action="skip" class="back-btn">Skip</paper-button>
 75 |       </slot>
 76 |       <div class="linear-actions">
 77 |         <slot name="linear-actions" id="linearActionsSlot">
 78 |           <paper-button data-action="cancel">Cancel</paper-button>
 79 |           <paper-button data-action="continue" class="continue-btn">Continue</paper-button>
 80 |         </slot>
 81 |       </div>
 82 |     </div>
 83 |   </template>
 84 |   <script>
 85 |   {
 86 |     /**
 87 |      * `ud-step`
 88 |      * Material Design Step
 89 |      *
 90 |      * ### Styling
 91 |      *
 92 |      * The following custom properties and mixins are available for styling:
 93 |      *
 94 |      * Custom Property | Description | Default
 95 |      * ----------------------|-------------|--------
 96 |      * `--ud-step-content-style` | Style mixin of the step content | `{}`
 97 |      * `--ud-step-continue-btn-color` | Continue button color | `--google-blue-500`
 98 |      *
 99 |      * @customElement
100 |      * @polymer
101 |      * @memberof UrDeveloper
102 |      */
103 |     class UdStepElement extends(class extends Polymer.Element {}) {
104 |       static get is() {
105 |         return 'ud-step';
106 |       }
107 | 
108 |       static get properties() {
109 |         return {
110 |           /**
111 |            * Step title
112 |            */
113 |           title: {
114 |             type: String,
115 |             reflectToAttribute: true
116 |           },
117 |           /**
118 |            * Step summary that apears under the title
119 |            */
120 |           summary: {
121 |             type: String,
122 |             reflectToAttribute: true
123 |           },
124 |           /**
125 |            * Makes the step editable which in linear stepper user can go back to it.
126 |            */
127 |           editable: {
128 |             type: Boolean
129 |           },
130 |           /**
131 |            * Makes the step optional which allows user to skip it.
132 |            */
133 |           optional: {
134 |             type: Boolean
135 |           },
136 | 
137 |           /**
138 |            * Determines if this is the current step in stepper.
139 |            */
140 |           selected: {
141 |             type: Boolean,
142 |             reflectToAttribute: true,
143 |             notify: true
144 |           },
145 | 
146 |           /* 
147 |            * `alwaysSelectable` true to allow the step to always be selectable, even if linear and completed
148 |            */
149 |            alwaysSelectable: {
150 |              type:  Boolean,
151 |           },
152 | 
153 |           /**
154 |            * Determines if the step is completed.
155 |            */
156 |           completed: {
157 |             type: Boolean,
158 |             notify: true
159 |           },
160 | 
161 |           /**
162 |            * The `actions` property can be used to override the default behavior of the step's actions.
163 |            * You can define what actions are available, their texts and whether are enabled or disabled.
164 |            * for example: 
165 |            * ```json
166 |            *  {
167 |            *    {
168 |            *      name: 'continue', title: 'Next'
169 |            *    },
170 |            *    {
171 |            *      name: 'cancel', title: 'Reset', disabled: true
172 |            *    }
173 |            *  }
174 |            * ```
175 |            */
176 |           actions: {
177 |             type: Array
178 |           },
179 | 
180 |           /**
181 |            * Step icon when it's not completed yet. 
182 |            * If not specified, a step number will be shown instead.
183 |            */
184 |           icon: {
185 |             type: String
186 |           },
187 | 
188 |           /**
189 |            * Step icon when it's completed.
190 |            */
191 |           completedIcon: {
192 |             type: String,
193 |             value: 'ud:check'
194 |           },
195 | 
196 |           /**
197 |            * Step icon when it's editable.
198 |            */
199 |           editableIcon: {
200 |             type: String,
201 |             value: 'ud:edit'
202 |           },
203 | 
204 |           /**
205 |            * The icon that will be shown when the step is in invalid state.
206 |            */
207 |           errorIcon: {
208 |             type: String,
209 |             value: 'ud:warning'
210 |           },
211 | 
212 |           /**
213 |            * Text for an optional step.
214 |            */
215 |           optionalText: {
216 |             type: String,
217 |             value: 'Optional'
218 |           },
219 | 
220 |           /**
221 |            * Indicates if the step is in error state. 
222 |            * In a linear stepper, user cannot continue with an error state.
223 |            */
224 |           error: {
225 |             type: Boolean,
226 |             observer: '_errorChanged',
227 |             reflectToAttribute: true
228 |           },
229 | 
230 |           /**
231 |            * Hide the actions bar
232 |            */
233 |           hideActions: {
234 |             type: Boolean,
235 |             reflectToAttribute: true,
236 |             value: false
237 |           },
238 | 
239 |           _currentIcon: {
240 |             type: String,
241 |             computed: '_computeCurrentIcon(completed, editable, error)',
242 |             notify: true
243 |           },
244 | 
245 |           _actionButtons: {
246 |             type: Array
247 |           }
248 |         };
249 |       }
250 | 
251 |       static get observers() {
252 |         return ['_updateActionsButtons(_actionButtons.*,_linearActionButtons.*,actions.*)'];
253 |       }
254 | 
255 |       connectedCallback() {
256 |         super.connectedCallback();
257 |         if (this.hideActions) return;
258 |         if (this.$.actionsSlot) {
259 |           this._nodeObserver = new Polymer.FlattenedNodesObserver(this.$.actionsSlot, (info) => {
260 |             this._actionButtons = Array.from(info.addedNodes.filter(n => n.nodeType === Node.ELEMENT_NODE && n.hasAttribute('data-action')));
261 |             this._actionButtons.filter(ab => !ab._hooked).forEach(ab => {
262 |               ab.addEventListener('click', (evt) => this._handleAction(evt));
263 |             });
264 |           });
265 |         }
266 | 
267 |         if (this.$.linearActionsSlot) {
268 |           this._nodeObserver1 = new Polymer.FlattenedNodesObserver(this.$.linearActionsSlot, (info) => {
269 |             this._linearActionButtons = Array.from(info.addedNodes.filter(n => n.nodeType === Node.ELEMENT_NODE && n.hasAttribute('data-action')));
270 |             this._linearActionButtons.filter(ab => !ab._hooked).forEach(ab => {
271 |               ab.addEventListener('click', (evt) => this._handleAction(evt));
272 |             });
273 |           });
274 |         }
275 |       }
276 | 
277 |       _updateActionsButtons(actionButtons, linearActionButtons, allowedActions) {
278 |         if (!allowedActions.base) return;
279 |         let actionBtns = (actionButtons.base || []).concat(linearActionButtons.base || []);
280 |         actionBtns.forEach(ab => {
281 |           const actionName = ab.getAttribute('data-action');
282 |           const action = this.actions.find(a => a.name === actionName);
283 |           if (!action) {
284 |             ab.style.display = 'none';
285 |           } else {
286 |             ab.disabled = action.disabled;
287 |             if (action.title) {
288 |               ab.innerText = action.title;
289 |             }
290 |           }
291 |         });
292 |       }
293 | 
294 |       _handleAction(evt, action) {
295 |         this.dispatchEvent(new CustomEvent('step-action', {
296 |           detail: action || evt.target.getAttribute('data-action'),
297 |           bubbles: true
298 |         }));
299 |       }
300 | 
301 |       _computeCurrentIcon(completed, editable, error) {
302 |         if (error) return this.errorIcon;
303 | 
304 |         if (completed) {
305 |           return editable ? this.editableIcon : this.completedIcon;
306 |         }
307 |         return this.icon;
308 |       }
309 | 
310 |       _errorChanged(invalid) {
311 |         this.dispatchEvent(new CustomEvent('step-error', {
312 |           detail: {
313 |             step: this
314 |           },
315 |           bubbles: true
316 |         }));
317 |       }
318 | 
319 |       _reset() {
320 |         this.completed = false;
321 |       }
322 | 
323 |       setFocus() {
324 |         const content = this.$.content;
325 |         content.setAttribute('tabindex', '0');
326 |         content.focus();
327 |       }
328 |     }
329 | 
330 |     window.customElements.define(UdStepElement.is, UdStepElement);
331 | 
332 |     /**
333 |      * @namespace UrDeveloper
334 |      */
335 |     window.UrDeveloper = window.UrDeveloper || {};
336 |     UrDeveloper.UdStepElement = UdStepElement;
337 |   }
338 |   </script>
339 | </dom-module>


--------------------------------------------------------------------------------
/ud-stepper.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer-element.html">
  2 | <link rel="import" href="../polymer/lib/elements/dom-repeat.html">
  3 | <link rel="import" href="../neon-animation/web-animations.html">
  4 | <link rel="import" href="../neon-animation/neon-animated-pages.html">
  5 | <link rel="import" href="../neon-animation/neon-animations.html">
  6 | <link rel="import" href="../paper-styles/element-styles/paper-material-styles.html">
  7 | <link rel="import" href="../paper-styles/color.html">
  8 | <link rel="import" href="../paper-styles/typography.html">
  9 | <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
 10 | <link rel="import" href="../iron-icon/iron-icon.html">
 11 | <link rel="import" href="../polymer/lib/mixins/mutable-data.html">
 12 | <link rel="import" href="ud-step.html">
 13 | <link rel="import" href="ud-iconset.html">
 14 | <dom-module id="ud-stepper-button">
 15 |   <!--  <template>
 16 |     <style>
 17 |       host: {
 18 |         display: block
 19 |       }
 20 |     </style>
 21 |     <slot></slot>
 22 |   </template> -->
 23 |   <script>
 24 |   (function() {
 25 |     /**
 26 |      * `ud-stepper-button`
 27 |      *  private element to make sure we capture 'spacebar' downkey event when the 
 28 |      *  element has focus. This is similar to how paper-tab work. 
 29 |      */
 30 |     class UdStepperButton extends
 31 |     Polymer.mixinBehaviors(Polymer.IronButtonState, Polymer.Element) {
 32 |       static get is() {
 33 |         return 'ud-stepper-button';
 34 |       }
 35 |     }
 36 |     customElements.define(UdStepperButton.is, UdStepperButton);
 37 |   })();
 38 | 
 39 |   </script>
 40 | </dom-module>
 41 | <dom-module id="ud-stepper">
 42 |   <template>
 43 |     <style include="paper-material-styles">
 44 |     :host {
 45 |       display: flex;
 46 |       flex-direction: column;
 47 |       overflow-x: hidden;
 48 |       --ud-stepper-circle-size: 30px;
 49 |       --ud-stepper-icon-size: 18px;
 50 |     }
 51 | 
 52 |     #pageContainer {
 53 |       min-height: var(--ud-stepper-container-min-height);
 54 |     }
 55 | 
 56 |     .header-container {
 57 |       display: flex;
 58 |       flex-direction: row;
 59 | 
 60 |       flex-wrap: nowrap;
 61 |       align-items: center;
 62 |       @apply --ud-stepper-header-container-style;
 63 |     }
 64 | 
 65 |     /* Horizontal Styles */
 66 | 
 67 |     .header {
 68 |       display: flex;
 69 |       flex-direction: row;
 70 |       justify-content: center;
 71 |       overflow: hidden;
 72 |       flex: 1;
 73 |     }
 74 | 
 75 |     :host(:not([vertical])) .header[aria-selected] {
 76 |       background: var(--ud-stepper-selected-header-background, var(--google-grey-300));
 77 |       @apply --ud-stepper-selected-header;
 78 |     }
 79 | 
 80 | 
 81 |     :host(:not([vertical])) .header:not(:last-of-type)::after {
 82 |       content: '';
 83 |       display: inline-block;
 84 |       position: relative;
 85 |       flex: 1;
 86 |       top: 36px;
 87 |       height: 1px;
 88 |       background-color: rgba(0, 0, 0, 0.3);
 89 |     }
 90 | 
 91 |     :host(:not([vertical])) .header:not(:first-of-type)::before {
 92 |       content: '';
 93 |       display: inline-block;
 94 |       position: relative;
 95 |       flex: 1;
 96 |       top: 36px;
 97 |       height: 1px;
 98 |       background-color: rgba(0, 0, 0, 0.3);
 99 |     }
100 | 
101 |     .header .label {
102 |       display: flex;
103 |       flex-direction: row;
104 |       cursor: pointer;
105 |       align-items: center;
106 |       max-height: var(--ud-stepper-icon-size);
107 |       padding: 24px 24px 24px 24px;
108 |     }
109 | 
110 |     .header:hover,
111 |     .header:focus {
112 |       background-color: var(--google-grey-100);
113 |       font-weight: 500;
114 |       outline: none;
115 |     }
116 |     .header:focus {
117 |       box-shadow: 0 1px 0 var(--ud-stepper-icon-selected-color, var(--google-blue-500));
118 |     }
119 | 
120 |     .header:focus-visible {
121 |       box-shadow: 0 2px 0 var(--ud-stepper-icon-selected-color, var(--google-blue-500));
122 |     }
123 | 
124 |     .label-circle {
125 |       @apply --paper-font-caption;
126 |       text-align: center;
127 |       line-height: 24px;
128 |       color: white;
129 |       background-color: rgba(0, 0, 0, 0.38);
130 |       border-radius: 50%;
131 |       line-height: var(--ud-stepper-circle-size);
132 |       width: var(--ud-stepper-circle-size);
133 |       height: var(--ud-stepper-circle-size);
134 |     }
135 | 
136 |     iron-icon {
137 |       --iron-icon-width: var(--ud-stepper-icon-size);
138 |       --iron-icon-height: var(--ud-stepper-icon-size);
139 |       margin-bottom: 4px;
140 |     }
141 | 
142 |     .label-text {
143 |       /*@apply --paper-font-body1;*/
144 |       padding-left: 8px;
145 |       color: rgba(0, 0, 0, 0.54);
146 |     }
147 | 
148 |     .label-text .optional,
149 |     .label-text .summary {
150 |       @apply --paper-font-caption;
151 |     }
152 | 
153 |     :host(:not([vertical])) .label-text .main {
154 |       @apply --paper-font-common-nowrap;
155 |       max-width: 120px;
156 |     }
157 | 
158 | 
159 |     :host(:not([vertical])) .header:hover,
160 |     :host(:not([vertical])) .header[aria-selected] {
161 |       overflow: visible;
162 |     }
163 | 
164 |     :host(:not([vertical])) .header:hover .label-text .main,
165 |     :host(:not([vertical])) .header[aria-selected] .label-text .main {
166 |       max-width: fit-content;
167 |     }
168 | 
169 |     .header[aria-checked] .label-circle {
170 |       background-color: var(--ud-stepper-icon-completed-color, var(--google-blue-500));
171 |     }
172 | 
173 |     .header[aria-selected] .label-circle {
174 |       background-color: var(--ud-stepper-icon-selected-color, var(--google-blue-500));
175 |     }
176 | 
177 |     .header[aria-selected] .label-text,
178 |     .header[aria-checked] .label-text {
179 |       color: rgba(0, 0, 0, 0.87);
180 |     }
181 | 
182 |     .header[aria-selected] .label-text {
183 |       @apply --paper-font-body2;
184 |     }
185 | 
186 |     .header[aria-invalid] .label-circle {
187 |       background-color: var(--ud-stepper-icon-error-color, var(--paper-deep-orange-a700));
188 |     }
189 | 
190 |     .header[aria-invalid] .label-text {
191 |       color: var(--ud-stepper-icon-error-color, var(--paper-deep-orange-a700));
192 |     }
193 | 
194 |     .step-number {}
195 | 
196 |     .header.selected .step-number {
197 |       background-color: var(--ud-stepper-icon-selected-color, var(--google-blue-500));
198 |     }
199 | 
200 |     :host(:not([animate])) ::slotted(ud-step:not([selected])) {
201 |       display: none;
202 |     }
203 | 
204 |     /* Vertical Styles */
205 |     :host([vertical]) .header-container {
206 |       flex-direction: column;
207 |       flex-wrap: nowrap;
208 |       align-items: stretch;
209 |     }
210 | 
211 |     :host([vertical]) [selected] .label {
212 |       background: var(--ud-stepper-header-background, #dedede);
213 |       @apply --paper-font-body2;
214 |       @apply --ud-stepper-header-selected;
215 |     }
216 | 
217 |     :host([vertical]) .header {
218 |       flex-direction: column;
219 |       justify-content: flex-start;
220 |       overflow: visible;
221 |     }
222 | 
223 |     :host([vertical]) .header {
224 |       flex-direction: column;
225 |       justify-content: flex-start;
226 |       overflow: visible;
227 |     }
228 | 
229 |     :host([vertical]) .vertical-step ::slotted(ud-step) {
230 |       flex: 1;
231 |     }
232 | 
233 |     .vertical-step {
234 |       padding-left: 32px;
235 |       display: flex;
236 |       flex-flow: row;
237 |       align-items: stretch;
238 |     }
239 | 
240 |     .header:not(:last-of-type) .vertical-step::before {
241 |       content: '';
242 |       display: inline-block;
243 |       position: relative;
244 |       width: 1px;
245 |       left: 6px;
246 |       margin-top: -10px;
247 |       margin-bottom: -16px;
248 |       background-color: rgba(0, 0, 0, 0.3);
249 |     }
250 | 
251 |     :host([vertical]) .header .label {
252 |       padding: 24px 24px 16px 24px;
253 |     }
254 | 
255 |     :host([animate]) .vertical-step ::slotted(ud-step) {
256 |       transform: scaleY(0);
257 |       transition: transform 0.26s ease;
258 |     }
259 | 
260 |     :host([animate]) .vertical-step ::slotted(ud-step[selected]) {
261 |       transform: scaleY(1);
262 |     }
263 | 
264 |     :host([vertical][animate]) .step-container {
265 |       height: 0px;
266 |     }
267 | 
268 |     :host([vertical][animate]) [selected] .step-container {
269 |       display: flex;
270 |       height: fit-content;
271 |     }
272 | 
273 |     :host(:not([animate])) .vertical-step ::slotted(ud-step:not([selected])) {
274 |       display: none;
275 |     }
276 | 
277 |     :host(:not([animate])) .vertical-step ::slotted(ud-step:not([selected])) {
278 |       display: none;
279 |     }
280 | 
281 | 
282 | 
283 |     vertical-step ::slotted(ud-step:not([selected])) {
284 |       display: none;
285 |     }
286 | 
287 |     </style>
288 |     <div class="header-container" role="tablist">
289 |       <template is="dom-repeat" items="[[_steps]]" mutable-data>
290 |         <ud-stepper-button class="header selectable" role="tab" aria-checked$="[[item.completed]]" aria-disabled$="[[item.disabled]]" aria-invalid$="[[item.error]]">
291 |           <div class="label">
292 |             <div class="label-circle">
293 |               <template is="dom-if" if="[[item._currentIcon]]">
294 |                 <iron-icon icon="[[item._currentIcon]]"></iron-icon>
295 |               </template>
296 |               <template is="dom-if" if="[[!item._currentIcon]]">
297 |                 <div class="step-number">[[_getStepNumber(index)]]</div>
298 |               </template>
299 |             </div>
300 |             <div class="label-text">
301 |               <div class="main">[[item.title]]</div>
302 |               <div class="summary">[[item.summary]]</div>
303 |               <template is="dom-if" if="[[item.optional]]">
304 |                 <div class="optional">[[item.optionalText]]</div>
305 |               </template>
306 |             </div>
307 |           </div>
308 |           <template is="dom-if" if="[[vertical]]" restamp>
309 |             <div class="vertical-step step-container" visible$="[[item.selected]]">
310 |               <slot name$="slot[[index]]"></slot>
311 |             </div>
312 |           </template>
313 |         </ud-stepper-button>
314 |       </template>
315 |     </div>
316 |     <template is="dom-if" if="[[!vertical]]" restamp>
317 |       <template is="dom-if" if="[[animate]]" restamp>
318 |         <neon-animated-pages id="pageContainer" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
319 |           <slot name="horizontal"></slot>
320 |         </neon-animated-pages>
321 |       </template>
322 |       <template is="dom-if" if="[[!animate]]" restamp>
323 |         <slot name="horizontal"></slot>
324 |       </template>
325 |     </template>
326 |   </template>
327 |   <script>
328 |   {
329 |     /**
330 |      * `ud-stepper`
331 |      * Material Design Stepper
332 |      *
333 |      * ### Styling
334 |      *
335 |      * The following custom properties and mixins are available for styling:
336 |      *
337 |      * Custom Property | Description | Default
338 |      * ----------------------|-------------|--------
339 |      * `--ud-stepper-header-container-style` | Style mixin for the header container | `{}`
340 |      * `--ud-stepper-icon-completed-color` | The icon color of a completed step | `--google-blue-500`
341 |      * `--ud-stepper-icon-error-color` | The icon color of a step with error | `--paper-deep-orange-a700`
342 |      * `--ud-stepper-icon-selected-color` | The icon color of a selected step | `--google-blue-500`
343 |      * `--ud-stepper-icon-circle-size` | size of circle | `30px`
344 |      * `--ud-stepper-icon-icon-size` | size of icon within circle | `18px`
345 |      * `--ud-stepper-container-min-height` | Height applied to #pageContainer | 
346 |      * `--ud-stepper-selected-header-background` | The color of a selected header label  | `--google-grey-300`
347 |      * `--ud-stepper-selected-header` | Style mixin for selected header | `{}`
348 |      *
349 |      * ### Accesibility
350 |      *
351 |      * As the stepper inherits from IronMenubarBehavior, it can be navigated through keyboard. 
352 |      * Role of header is `tablist`, each stepper button has a `tab` role.
353 |      * When a step is completed, `aria-checked` of its corresponding button is set to true. 
354 |      * Steps not accesible have `aria-disabled` set to true. 
355 |      * `aria-invalid` is set to true when a step has an error.
356 |      *
357 |      * @customElement
358 |      * @polymer
359 |      * @memberof UrDeveloper
360 |      * @demo demo/index.html
361 |      */
362 |     class UdStepperElement extends
363 |     Polymer.mixinBehaviors(Polymer.IronMenubarBehavior,
364 |       Polymer.MutableData(
365 |         Polymer.Element)) {
366 | 
367 |       static get is() {
368 |         return 'ud-stepper';
369 |       }
370 | 
371 |       static get properties() {
372 |         return {
373 | 
374 |           /**
375 |            * If true, the stepper becomes vertical.
376 |            */
377 |           vertical: {
378 |             type: Boolean,
379 |             value: false,
380 |             reflectToAttribute: Boolean
381 |           },
382 | 
383 |           /**
384 |            * If true, the stepper performs animations.
385 |            */
386 |           animate: {
387 |             type: Boolean,
388 |             value: false,
389 |             reflectToAttribute: Boolean
390 |           },
391 | 
392 |           /**
393 |            * If true, the stepper becomes linear.
394 |            */
395 |           linear: {
396 |             type: Boolean,
397 |             reflectToAttribute: Boolean
398 |           },
399 | 
400 |           _steps: {
401 |             type: Array
402 |           },
403 | 
404 |           /**
405 |            * Gets or sets the currently selected step index (zero based).
406 |            **/
407 |           selected: {
408 |             type: String,
409 |             notify: true,
410 |             observer: '_selectionChanged'
411 |           },
412 | 
413 |           /**
414 |            * Determines if the stepper is compeleted. The stepper is completed when all its non-optional steps are completed.
415 |            **/
416 |           completed: {
417 |             type: Boolean,
418 |             notify: true,
419 |             reflectToAttribute: true,
420 |             computed: '_isCompleted(_steps)'
421 |           },
422 | 
423 |           /* 
424 |            * `sizing` 
425 |            * Sets a sizing option for the stepper. 
426 |            * Valid values is `contain` (will set the height of the stepper so as to contain the larger ud-step).
427 |            * or ``
428 |            */
429 |           sizing: {
430 |             type: String
431 |           },
432 | 
433 |           /* 
434 |            * `containerHeight` the height of the container. with anilated steps, should be set or sizing should be 'contain'
435 |            */
436 |           containerHeight: {
437 |             type: Number
438 |           },
439 | 
440 |           selectable: {
441 |             type: String,
442 |             value: '.header.selectable'
443 |           },
444 | 
445 |           selectedAttribute: {
446 |             type: String,
447 |             value: 'active'
448 |           },
449 | 
450 |           // @override prevent listen to arrow binding
451 |           // keyEventTarget: {
452 |           //   type: Object,
453 |           //   value: null
454 |           // }
455 | 
456 |         };
457 |       }
458 | 
459 |       static get observers() {
460 |         return [
461 |           '_setSlotNames(_steps, vertical)',
462 |           '_setHeight(sizing, containerHeight, vertical, animate)'
463 |         ];
464 |       }
465 | 
466 |       connectedCallback() {
467 |         super.connectedCallback();
468 |         this.addEventListener('step-action', evt => this._handleStepAction(evt));
469 |         this.addEventListener('step-error', evt => this.notifyPath('_steps'));
470 |         // this.addEventListener('iron-activate', evt => this._handleStepActivate(evt));
471 | 
472 |         this._templateObserver = new Polymer.FlattenedNodesObserver(this, info => {
473 |           if (info.addedNodes.filter(this._isStep).length > 0 ||
474 |             info.removedNodes.filter(this._isStep).length > 0) {
475 |             this._steps = this._findSteps();
476 |             this._prepareSteps(this._steps);
477 |             Polymer.RenderStatus.afterNextRender(this, () => {
478 |               this._setHeight(this.sizing, this._maxHeight, this.vertical, this.animate);
479 |               const items = this.shadowRoot.querySelectorAll(this.selectable)
480 |               this._setItems([...items]);
481 |               if (!this.selected) {
482 |                 this.selected = 0;
483 |               }
484 |               // Note(cg): without call to _selectionChanges,  selected step is not marked as selected.
485 |               this._selectionChanged(this.selected);
486 |             });
487 | 
488 |           }
489 |         });
490 |       }
491 | 
492 |       disconnectedCallback() {
493 |         super.disconnectedCallback();
494 |         this._templateObserver.disconnect();
495 |       }
496 | 
497 |       // @override menubarbehavior. we do not want to activate menu search 
498 |       _focusWithKeyboardEvent() {
499 |       }
500 | 
501 |       _findSteps() {
502 |         return Array.from(this.querySelectorAll('ud-step'));
503 |       }
504 | 
505 |       _prepareSteps(steps) {
506 |         let maxHeight = 0;
507 |         steps.forEach((step, i) => {
508 |           //don't overwrite the step's actions, if they're already set
509 |           if (step.actions) return;
510 |           step.disabled = i !== 0;
511 | 
512 |           //By default all steps have continue and cancel action
513 |           const actions = [{
514 |             name: 'continue'
515 |           }, {
516 |             name: 'cancel'
517 |           }];
518 |           if (!this.linear) {
519 |             //Disable the back for the first step
520 |             actions.push({
521 |               name: 'back',
522 |               disabled: i === 0
523 |             });
524 | 
525 |           } else if (step.optional) {
526 |             //In linear stepper, optional step has a skip action
527 |             actions.push({
528 |               name: 'skip'
529 |             });
530 |           }
531 |           step.actions = actions;
532 | 
533 | 
534 |           const stepHeight = parseInt(getComputedStyle(step).height);
535 |           if (stepHeight > maxHeight) {
536 |             maxHeight = stepHeight;
537 |           }
538 |         });
539 |         if (this.sizing === 'contain') {
540 |           this.containerHeight = maxHeight;
541 |         }
542 |       }
543 | 
544 |       /* 
545 |        * `_setHeight` set height of stepper if sizing === 'contain'. 
546 |        * This is now necessary as `ud-steps` are absoluted positionned within neon-animated-page. Hence, stepper cannot be aware of its own size.
547 |        */
548 |       _setHeight(sizing, containerHeight, vertical, animate) {
549 |         // Note(cg): this is only useful for horizontal and animated layout (relying on neon-animated-page).
550 |         const pageContainer = this.shadowRoot.querySelector('#pageContainer');
551 |         if (!pageContainer) { return; }
552 |         if (vertical === true || animate !== true) {
553 |           pageContainer.style.height = null;
554 |           return;
555 |         }
556 | 
557 |         if (sizing === 'contain' && containerHeight) {
558 |           pageContainer.style.height = containerHeight + 3 + 'px';
559 |         }
560 |       }
561 | 
562 |       _isStep(node) {
563 |         return node.nodeType === Node.ELEMENT_NODE && /ud-step/i.test(node.localName);
564 |       }
565 | 
566 |       _getStepNumber(index) {
567 |         return index + 1;
568 |       }
569 | 
570 |       _handleStepAction(evt) {
571 |         const actionHandler = this[evt.detail.toLowerCase()];
572 |         const path = evt.path || evt.composedPath();
573 |         const step = path.find(node => this._isStep(node));
574 |         if (actionHandler && step) actionHandler.apply(this, [step]);
575 |       }
576 | 
577 |       _findNextStep(currentStep) {
578 |         if (currentStep == this._steps.length - 1) return currentStep;
579 |         //if it's a linear stepper, find the next not completed or editable step
580 |         if (this.linear) {
581 |           let index = currentStep + 1;
582 |           while (index < this._steps.length - 1) {
583 |             let step = this._steps[index];
584 |             if (step.editable || !step.completed) {
585 |               return index;
586 |             }
587 |             index++;
588 |           }
589 |           return index;
590 |         } else {
591 |           return currentStep + 1;
592 |         }
593 |       }
594 | 
595 |       /**
596 |        * Go to the next available step
597 |        */
598 |       next() {
599 |         if (!this._steps) return;
600 |         this.continue(this._steps[this.selected]);
601 |       }
602 | 
603 |       /** @protected */
604 |       continue (step) {
605 |         if (this.linear && step.error) return;
606 |         step.completed = true;
607 |         // Note(cg): reset disabled to true if not editable or alwaysSelectable
608 |         // step was marked as displabled = false on _selectionChanged.
609 |         if (!(step.alwaysSelectable || step.editable)) {
610 |           step.disabled = true;
611 |         }
612 |         this.notifyPath('_steps');
613 |         this.selected = this._findNextStep(this.selected);
614 |       }
615 | 
616 |       /** @protected */
617 |       back(step) {
618 |         if (this.selected > 0) {
619 |           this.selected = this.selected - 1;
620 |         }
621 |       }
622 | 
623 |       /** @protected */
624 |       skip(step) {
625 |         this.selected = this._findNextStep(this.selected);
626 |       }
627 | 
628 |       /** @protected */
629 |       cancel(step) {
630 | 
631 |       }
632 | 
633 |       /**
634 |        * Reset the stepper and all its steps to the initial state.
635 |        */
636 |       reset() {
637 |         this.selected = 0;
638 |         this._steps.forEach(s => s._reset());
639 |         this.notifyPath('_steps');
640 |       }
641 | 
642 |       /**
643 |        * Toggle the orientation between horizontal and vertical
644 |        */
645 |       toggleOrientation() {
646 |         this.vertical = !this.vertical;
647 |       }
648 | 
649 |       /**
650 |        * Toggle the animation 
651 |        */
652 |       toggleAnimation() {
653 |         this.animate = !this.animate;
654 |       }
655 | 
656 |       // @overide iron-menutab-behavior
657 |       _activateHandler(e) {
658 |         /*
659 |          * the logic here:
660 |          * User is allowed to select any step if stepper is not linear
661 |          * If stepper is linear: 
662 |          *  - allow user to revisit a completed editable step
663 |          *  - allow user to revist an optional step as long as is not completed
664 |          *  - bypass this logic for `always-selectable`
665 |          */
666 |         const tap = e.composedPath().find(el => el.role === 'tab');
667 |         const index = this.items.indexOf(tap);
668 |         const step = this._steps[index];
669 |         if (step && index > -1) {
670 |           e.stopPropagation();
671 |           // e.preventDefault();
672 |           // console.info('handle', step, step.disabled);
673 |           if (this.linear) {
674 |             // if ((step.completed && step.editable) || (!step.completed && step.optional) || step.alwaysSelectable) {
675 |             if (!step.disabled) {
676 |               this._itemActivate(index, step);
677 |             }
678 |             return;
679 |           }
680 |           this._itemActivate(index, step);
681 |         }
682 |       }
683 | 
684 |       _setSlotNames(steps, vertical) {
685 |         if (!this._steps) return;
686 |         steps.forEach((step, i) => {
687 |           step.setAttribute('slot', this.vertical ? 'slot' + i : 'horizontal');
688 |         });
689 |       }
690 | 
691 |       _selectionChanged(selected) {
692 |         if (!this._steps) return;
693 |         this._steps.forEach((step, i) => {
694 |           step.selected = i == selected;
695 |           if (i === selected) {
696 |             step.disabled = false;
697 |             setTimeout(() => {step.setFocus()}, this.animate ? 500 : 0);
698 |           }
699 |         });
700 |       }
701 | 
702 |       _isCompleted(steps) {
703 |         if (!steps || steps.length === 0) return false;
704 |         //stepper is completed when all non-optional steps are completed.
705 |         return steps.filter(s => s.completed || s.optional).length == steps.length;
706 |       }
707 |     }
708 | 
709 |     window.customElements.define(UdStepperElement.is, UdStepperElement);
710 | 
711 |     /**
712 |      * @namespace UrDeveloper
713 |      */
714 |     window.UrDeveloper = window.UrDeveloper || {};
715 |     UrDeveloper.UdStepperElement = UdStepperElement;
716 |   }
717 | 
718 |   </script>
719 | </dom-module>
720 | 


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