Upgrading to Hybrid mode

README.md

@@ -12,7 +12,7 @@ See [component page](http://zecat.github.io/paper-stepper)
 
 ## installation
 
-`bower install -S Zecat/paper-stepper`
+`bower install -S Zecat/paper-stepper#v2.0-beta.5`
 
 ## Basic use
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-stepper",
-  "version": "2.0-beta.4",
+  "version": "2.0-beta.5",
   "authors": [
     "Zecat <jullienfelix@gmail.com>"
   ],
@@ -18,31 +18,66 @@
     "/test/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0",
-    "paper-button": "PolymerElements/paper-button#^1.0.11",
-    "iron-icons": "PolymerElements/iron-icons#^1.1.3",
-    "paper-styles": "PolymerElements/paper-styles#^1.1.4",
-    "paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
-    "iron-selector": "PolymerElements/iron-selector#^1.3.0",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.8",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
-    "neon-animation": "PolymerElements/neon-animation#^1.1.1",
-    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5",
-    "iron-collapse": "PolymerElements/iron-collapse#^1.2.0"
+    "polymer": "Polymer/polymer#1.9 - 2",
+    "paper-button": "PolymerElements/paper-button#1 - 2",
+    "iron-icons": "PolymerElements/iron-icons#1 - 2",
+    "paper-styles": "PolymerElements/paper-styles#1 - 2",
+    "paper-ripple": "PolymerElements/paper-ripple#1 - 2",
+    "iron-selector": "PolymerElements/iron-selector#1 - 2",
+    "iron-icon": "PolymerElements/iron-icon#1 - 2",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
+    "neon-animation": "PolymerElements/neon-animation#1 - 2",
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#1 - 2",
+    "iron-collapse": "PolymerElements/iron-collapse#1 - 2",
+    "web-animations-js": "web-animations/web-animations-js",
+    "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^2.0.0"
   },
   "devDependencies": {
-    "paper-input": "PolymerElements/paper-input#^1.1.10",
-    "paper-material": "PolymerElements/paper-material#^1.0.6",
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "web-component-tester": "*",
-    "iron-form": "PolymerElements/iron-form#^1.0.16",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2",
-    "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0",
-    "app-layout": "PolymerElements/app-layout#^0.10.2",
-    "paper-menu": "PolymerElements/paper-menu#^1.2.2",
+    "paper-input": "PolymerElements/paper-input#1 - 2",
+    "paper-material": "PolymerElements/paper-material#1 - 2",
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "web-component-tester": "^6.0.0",
+    "iron-form": "PolymerElements/iron-form#1 - 2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#1 - 2",
+    "app-layout": "PolymerElements/app-layout#1 - 2",
+    "paper-menu": "PolymerElements/paper-menu#1 - 2",
     "iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0",
-    "paper-item": "PolymerElements/paper-item#^1.2.1",
-    "paper-toast": "PolymerElements/paper-toast#^1.3.0",
-    "paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0"
+    "paper-item": "PolymerElements/paper-item#1 - 2",
+    "paper-toast": "PolymerElements/paper-toast#1 - 2",
+    "paper-checkbox": "PolymerElements/paper-checkbox#1 - 2"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.9.0",
+        "paper-button": "PolymerElements/paper-button#^1.0.11",
+        "iron-icons": "PolymerElements/iron-icons#^1.1.3",
+        "paper-styles": "PolymerElements/paper-styles#^1.1.4",
+        "paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
+        "iron-selector": "PolymerElements/iron-selector#^1.3.0",
+        "iron-icon": "PolymerElements/iron-icon#^1.0.8",
+        "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
+        "neon-animation": "PolymerElements/neon-animation#^1.1.1",
+        "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5",
+        "iron-collapse": "PolymerElements/iron-collapse#^1.2.0",
+    "web-animations-js": "web-animations/web-animations-js"
+      },
+      "devDependencies": {
+        "paper-input": "PolymerElements/paper-input#^1.1.10",
+        "paper-material": "PolymerElements/paper-material#^1.0.6",
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "web-component-tester": "*",
+        "iron-form": "PolymerElements/iron-form#^1.0.16",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2",
+        "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0",
+        "app-layout": "PolymerElements/app-layout#^0.10.2",
+        "paper-menu": "PolymerElements/paper-menu#^1.2.2",
+        "iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0",
+        "paper-item": "PolymerElements/paper-item#^1.2.1",
+        "paper-toast": "PolymerElements/paper-toast#^1.3.0",
+        "paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0"
+      }
+    }
   }
 }

demo/index.html

@@ -158,7 +158,7 @@ <h2>Description</h2>
         <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>
         <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>
         <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>
-        <p>Start using now <strong>bower install -S Zecat/paper-stepper</strong></p>
+        <p>Start using now <strong>bower install -S Zecat/paper-stepper#v2.0-beta.5</strong></p>
         <p>Note, it is still a beta release, attributes and methods might change suddenly.</p>  
       </div>
       <div>

paper-step.html

@@ -23,8 +23,8 @@
       }
       :host(:not([vertical])) {
         overflow: hidden;
-        @apply(--layout);
-        @apply(--layout-flex);
+        @apply --layout;
+        @apply --layout-flex;
       }
       :host(:not([vertical]):hover){
         overflow: visible;
@@ -41,12 +41,12 @@
       }
       #contentWrapper {
         padding: 24px 24px 0 24px;
-        @apply(--layout-scroll);
-        @apply(--layout-fit);
+        @apply --layout-scroll;
+        @apply --layout-fit;
         pointer-events: auto;
       }
       :host(:focus:not([opened]):not([saved])) step-horizontal-label ::content #badge {
-        background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500);
+        background: var(--paper-step-selectable-hovered-badge-background, var(--paper-grey-500));
       }
     </style>
 
@@ -87,7 +87,7 @@
         Polymer.PaperItemBehavior,
         Polymer.PaperRippleBehavior
       ],
-      
+
       /**
        * Fired when the step has been saved.
        *
@@ -357,7 +357,9 @@
       _updateSlideshowViewportTop: function(optional, _alternativeLabel, vertical) {
         if (!vertical) {
           this.async(function() {
-            this.$$('#slideshowViewport').style.top = this.clientHeight+'px';
+            var el = this.$$('#slideshowViewport');
+            if (!el) return;
+            el.style.top = this.clientHeight+'px';
             this.fire('step-horizontal-label-resize');
           })
         }
@@ -396,8 +398,8 @@
 
       _verticalChange: function(vertical) {
         this.async(function() {
-          // move or create the content tag
-          Polymer.dom(this.$$(vertical ? '#verticalStepLabel' : '#contentWrapper')).appendChild(this.$$('content') || this.create('content'));
+          // move or create the slot tag
+          Polymer.dom(this.$$(vertical ? '#verticalStepLabel' : '#contentWrapper')).appendChild(this.$$('slot') || this.create('slot'));
           // reset the ripple
           this._ripple = false;
           this._rippleContainer = vertical ? this.$$('#verticalStepLabel').$.label : this.$$('#horizontalStepLabel').$.label;

paper-stepper.html

@@ -13,6 +13,7 @@
 <link rel="import" href="animations/fade-in-slide-from-left-animation.html">
 <link rel="import" href="animations/fade-out-slide-left-animation.html">
 <link rel="import" href="paper-step.html">
+<link rel="import" href="../neon-animation/web-animations.html">
 
 <!--
 Missing Doc
@@ -106,8 +107,8 @@
       :host {
         display: block;
         box-sizing: border-box;
-        @apply(--layout-vertical);
-        @apply(--shadow-elevation-2dp);
+        @apply --layout-vertical;
+        @apply --shadow-elevation-2dp;
         background: white;
         border-radius: 1px;
       }
@@ -120,7 +121,7 @@
 
       :host([vertical]) {
         padding: 4px 0;
-        @apply(--layout-scroll);
+        @apply --layout-scroll;
         max-height: var(--paper-stepper-vertical-max-height);
       }
       :host(:not([vertical])) {
@@ -131,7 +132,7 @@
         transition: max-height var(--paper-stepper-horizontal-opening-transition-duration, 300ms), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
       }
       :host(:not([vertical]):not([opened]):not(.collapsing)) {
-        @apply(--shadow-none);
+        @apply --shadow-none;
       }
       :host(:not([vertical])[opened]) {
         max-height: var(--paper-stepper-horizontal-opened-height, 450px);
@@ -140,19 +141,19 @@
         height: var(--paper-stepper-horizontal-opened-height, 450px);
       }
       :host(:not([vertical])) #content-wrapper {
-        @apply(--shadow-elevation-2dp);
-        @apply(--layout-horizontal);
-        @apply(--layout-flex-none);
-        @apply(--layout-justified);
-        background: var(--paper-stepper-horizontal-label-wrapper-background, --primary-background-color);
+        @apply --shadow-elevation-2dp;
+        @apply --layout-horizontal;
+        @apply --layout-flex-none;
+        @apply --layout-justified;
+        background: var(--paper-stepper-horizontal-label-wrapper-background, var(--primary-background-color));
         border-radius: 1px;
         overflow: hidden;
       }
       .flex {
-        @apply(--layout-flex);
+        @apply --layout-flex;
       }
       #buttonsWrapper {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
         margin: 0 24px 24px 24px;
         overflow: hidden;
       }
@@ -169,13 +170,13 @@
         overflow: visible;
       }
     </style>
-    
+
     <!-- Hidden block with width equals to the responsive threshold -->
     <div id="verticalResponsiveWidth"></div>
-    
+
     <!-- This wrapper contains the horizontal stepper header or the full vertical stepper -->
     <div id="content-wrapper">
-      <content select="[[selectable]]"></content>
+      <slot></slot>
     </div>
 
     <!-- Slideshow and buttons area for horizontal layout -->
@@ -453,7 +454,7 @@
         }
         event.detail.keyboardEvent.preventDefault();
       },
-      
+
       _onRightKey: function(event) {
         if (this._isRTL) {
           this._focusPrevious();
@@ -497,8 +498,12 @@
 
       _updateStepperClosedMaxHeight: function() {
         this.debounce('updateStepperClosedMaxHeight', function() {
-          this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px';
-          this.updateStyles('--label-wrapper-height');
+          if (Polymer.Element) {
+            this.updateStyles({ '--label-wrapper-height': this.$$('#content-wrapper').clientHeight + 'px' });
+          } else {
+            this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px';
+            this.updateStyles('--label-wrapper-height');
+          }
         });
       },
 
@@ -614,10 +619,12 @@
       },
 
       _forwardCanSkip: function(_canSkip, selectedItem) {
+        if (!selectedItem) return;
         selectedItem._set_canSkip(_canSkip);
       },
 
       _forwardHasBackStep: function(_hasBackStep, selectedItem) {
+        if (!selectedItem) return;
         selectedItem._set_hasBackStep(_hasBackStep);
       },
 
@@ -670,7 +677,7 @@
             savedStepNumber++;
           }
         }.bind(this));
-         
+
         this._setSavedStepNumber(savedStepNumber);
         // method from IronSelectableBehavior
         this._updateSelected();

step-horizontal-label.html

@@ -15,10 +15,10 @@
         overflow: hidden;
       }
       :host([alternative-label]) {
-        @apply(--layout);
+        @apply --layout;
       }
       #textWrapper {
-        @apply(--layout-vertical);
+        @apply --layout-vertical;
         padding-right: 8px;
         overflow: hidden;
       }
@@ -36,8 +36,8 @@
         z-index: 1;
       }
       :host(:not([alternative-label])) #label {
-        @apply(--layout-horizontal);
-        @apply(--layout-center);
+        @apply --layout-horizontal;
+        @apply --layout-center;
         height: 72px;
       }
       :host(.firstStep:not([alternative-label])) #badge {
@@ -46,14 +46,14 @@
       :host(.lastStep:not([alternative-label])) #textWrapper {
         padding-right: 24px;
       }
-      :host(:not([alternative-label]):not(.first-step)) #label::before, 
+      :host(:not([alternative-label]):not(.first-step)) #label::before,
       :host(:not([alternative-label]):not(.last-step)) #label::after,
       :host([alternative-label]) #badgeWrapper::before,
       :host([alternative-label]) #badgeWrapper::after  {
         height: 1px;
         min-width: 16px;
-        background: var(--paper-step-connector-line-color, --divider-color);
-        @apply(--layout-flex);
+        background: var(--paper-step-connector-line-color, var(--divider-color));
+        @apply --layout-flex;
         content: '';
       }
       :host([alternative-label].first-step) #badgeWrapper::before,
@@ -62,22 +62,22 @@
       }
       :host([alternative-label]) #textWrapper{
         padding: 0 16px;
-        @apply(--layout-vertical);
-        @apply(--layout-center);
+        @apply --layout-vertical;
+        @apply --layout-center;
       }
       :host([alternative-label]) #textLabel, :host([alternative-label]) #optional{
         text-align: center;
-        @apply(--layout-self-stretch);
+        @apply --layout-self-stretch;
       }
       :host([alternative-label]) #label{
-        @apply(--layout-vertical);
-        @apply(--layout-self-stretch);
+        @apply --layout-vertical;
+        @apply --layout-self-stretch;
         padding: 24px 0;
         width: 100%;
       }
       :host([alternative-label]) #badgeWrapper {
-        @apply(--layout-horizontal);
-        @apply(--layout-center);
+        @apply --layout-horizontal;
+        @apply --layout-center;
         padding-bottom: 16px;
       }
       :host(.first-step:not([alternative-label])) #label {