Merge branch '2.x'

.gitignore

@@ -1,3 +1,4 @@
 .git
 /bower_components*
-node_modules
+node_modules
+.vscode/*

README.md

@@ -1,4 +1,4 @@
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/caribou-timer)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/caribouflex/caribou-stepper)
 
 ## <caribou-stepper>
 
@@ -11,11 +11,13 @@ All the elements can be customized refer to the styling section.
 
 ### NEW
 
-- Horizontal stepper is coming 
+- Horizontal stepper
 - Step validation
 - IE11 support
+- Step native Required input validation.
 
 ### Incoming (TODO)
+- GITHUB demo pages.
 - Bug Fixes
 - Mobile stepper
 
@@ -77,8 +79,6 @@ For the styling check the `<caribou-stepper>`, `<caribou-step>` and `<caribou-st
 3. Commit your changes: `git commit -am 'Add some feature'`
 4. Push to the branch: `git push origin my-new-feature`
 5. Submit a pull request :D
-## Running tests from the command line
-When in the caribou-timer directory, run polymer test
 
 ## License
 Apache License 2.0

caribou-step.html

@@ -283,8 +283,10 @@
                 this._setStepperHorizontal(this.parentElement.horizontal);
 
                 //if there is no step behind, we clear the number of step context temp we used.
-                if (this.nextElementSibling === null)
+                if (this.nextElementSibling === null) {
+                    this.parentElement.numberOfStep = Caribouflex.Stepper.Context.numberOfStep;
                     Caribouflex.Stepper.Context.numberOfStep = undefined;
+                }
             }
 
             /**
@@ -314,32 +316,36 @@
              * @param {Boolean} active is the active step or not.
              * @private
              */
-            _setFloatForTransition(active) {
+            _setFloatForTransition() {
 
                 var toStep = this.parentElement.__toStep;
                 var fromStep = this.parentElement.__fromStep;
                 var activeStep = this.parentElement.activeStep;
 
                 if (toStep !== undefined && toStep !== null) {
 
-                    if (toStep._badgeNumber < this._badgeNumber)
+                    if (toStep._badgeNumber === this.parentElement.numberOfStep && !this.parentElement.horizontal)
+                        this.$.stepContent.style.float = "";
+                    else if (toStep._badgeNumber < this._badgeNumber)
                         this.$.stepContent.style.float = "right";
                     else if (toStep._badgeNumber > this._badgeNumber)
                         this.$.stepContent.style.float = "";
                     else if (activeStep === undefined)
                         this.$.stepContent.style.float = "";
-                    else if(toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber < fromStep._badgeNumber)
+                    else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber <
+                        fromStep._badgeNumber)
                         this.$.stepContent.style.float = "";
-                    else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber > fromStep._badgeNumber)
+                    else if (toStep._badgeNumber === this._badgeNumber && fromStep !== undefined && toStep._badgeNumber >
+                        fromStep._badgeNumber)
                         this.$.stepContent.style.float = "right";
                     else if (toStep._badgeNumber === this._badgeNumber && activeStep === null)
                         this.$.stepContent.style.float = "right";
                     else if (toStep._badgeNumber === this._badgeNumber && activeStep._badgeNumber < this._badgeNumber)
                         this.$.stepContent.style.float = "right";
                     else if (toStep._badgeNumber === this._badgeNumber && activeStep._badgeNumber > this._badgeNumber)
                         this.$.stepContent.style.float = "";
-                    else if (toStep._badgeNumber === this._badgeNumber && !active)
-                        this.$.stepContent.style.float = "";
+                    // else if (toStep._badgeNumber === this._badgeNumber && !active)
+                    //     this.$.stepContent.style.float = "";
                 }
             }
 
@@ -368,10 +374,11 @@
              */
             toggleStep(isLast) {
 
-                this._setFloatForTransition(!this.active);
+                this._setFloatForTransition();
 
-                if (isLast !== undefined && isLast)
+                if (isLast !== undefined && isLast) {
                     this.$.stepButtons.setFinish(true);
+                }
 
                 this.$.stepContent.toggle();
             }

caribou-stepper-step-property-mixin.html

@@ -111,6 +111,16 @@
                     backButton: {
                         type: Boolean,
                         value: false
+                    },
+
+                    /**
+                     * If true this will skip the validation of the input.
+                     * If false all the checkbox will have a native validation check on the input.
+                     * 
+                     */
+                    noInputNativeValidity: {
+                        type: Boolean,
+                        value: false
                     }
                 }
             }
@@ -138,7 +148,37 @@
                 this.parentElement._registerStep(this);
             }
 
-            validate(){
+            /**
+             * This function is used to check the validity of the required input.
+             * This will check the native validation for classic input and call the validate() function for the polymer element.
+             * @private
+             */
+            _nestedValidate() {
+                //We check if the validity is required.
+                if (this.noInputNativeValidity)
+                    return true;
+
+                var result = true;
+                this.querySelectorAll("[required]").forEach(function (el) {
+                    let r;
+                    try {
+                        //Use classic input validation
+                        r = el.checkValidity();
+                    } catch (err) {
+                        //used to try on input that may be polymer input with a validate() function.
+                        try {
+                            r = el.validate();
+                        } catch (err) {
+                            console.log("caribou-step", "Can't validate required input");
+                        }
+                    }
+                    if (!r)
+                        result = false;
+                });
+                return result;
+            }
+
+            validate() {
                 return true;
             }
 

caribou-stepper-stepper-property-mixin.html

@@ -79,6 +79,14 @@
                         readOnly: true
                     },
 
+                    /**
+                     * Quantity total of step inside the stepper.
+                     */
+                    numberOfStep: {
+                        type: Number,
+                        value: 0
+                    },
+
                     /**
                      * Used for the transition in horizontal mode.
                      * This is the step where we are going. (step targeting)

caribou-stepper.html

@@ -136,7 +136,7 @@
              * @private
              */
             __finishStep(e) {
-                if (this.activeStep.validate()) {
+                if (this.activeStep._nestedValidate() && this.activeStep.validate()) {
                     this.openNextStep();
                     this._setFinish(true);
                     this.dispatchEvent(new CustomEvent('stepper-finished', {
@@ -156,7 +156,7 @@
              * Then it will open the next step if there is one.
              */
             openNextStep() {
-                if (this.activeStep.validate()) {
+                if (this.activeStep._nestedValidate() && this.activeStep.validate()) {
                     this.activeStep.saveStep();
 
                     //set the value to and from the the transition effect.

demo/index.html

@@ -33,11 +33,12 @@ <h3>Horizontal stepper</h3>
           <caribou-step id="stepper1step1" label="Personal">
             <paper-input label="First Name"></paper-input>
             <paper-input label="Last Name"></paper-input>
+            <input type="checkbox" name="test" id="test" required>
           </caribou-step>
           <caribou-step id="stepper1step2" label="Hobbies" editable>
             <div style="padding:5px;">
-              <paper-checkbox>Soccer</paper-checkbox>
-              <paper-checkbox>Backetball</paper-checkbox>
+              <paper-checkbox required>Soccer</paper-checkbox>
+              <paper-checkbox required>Backetball</paper-checkbox>
               <paper-checkbox>Tennis</paper-checkbox>
               <paper-checkbox>Fishing</paper-checkbox>
             </div>