render() {
        this.stepper.innerHTML = ''
        if (this.orientation === "vertical") { // Vertical Stepper
            for (var i = 0; i < this.nb_step; i++) {
                let step = document.createElement("div");
                step.innerHTML = `
                <div class="gus_step_vertical">
                    <div class="gus_step_vertical_left">
                        <div class="gus_step_vertical_icon">
                            <div class="gus_step_icon_display" part="step">
                                ${this.content[i].content ?? i + 1}
                            </div>
                        </div>
                        ${
                            // Link step for every step except last one
                            (i !== this.nb_step - 1) ?
                            `
                            <div class="gus_step_vertical_link">
                                <div class="
                                gus_step_vertical_link_display
                                ${
                                    // StepLink: none
                                    (this.step_link === "none") ? "gus_step_vertical_link_display_none" : ""}
                                ${
                                    // StepLink: full
                                    (this.step_link === "full") ? "gus_step_vertical_link_display_attach" : ""}
                                " part="step-link"></div>
                            </div>
                            `
                            : ""
                        }
                    </div>
                    <div class="gus_step_vertical_right">
                        <div class="gus_step_vertical_title" part="step-title">
                            <p part="step-title-text">${this.content[i].title}</p>
                        </div>
                    </div>
                </div>
                `
                this.stepper.appendChild(step);
            }
        }
        else { // Horizontal Stepper
            this.stepper.classList.add("gus_stepper_horizontal")
            for (var i = 0; i < this.nb_step; i++) {
                let step = document.createElement("div")
                step.innerHTML = `
                <div class="gus_step_horizontal">
                    <div class="gus_step_horizontal_top">
                        <div class="gus_step_horizontal_title" part="step-title">
                            <p part="step-title-text">${this.content[i].title}</p>
                        </div>
                    </div>
                    <div class="gus_step_horizontal_bottom">
                        <div class="gus_step_horizontal_icon">
                            <div class="gus_step_icon_display" part="step">
                                ${this.content[i].content ?? i + 1}
                            </div>
                        </div>
                        ${
                            // Link step for every step except last one
                            (i !== this.nb_step - 1) ?
                            `
                            <div class="gus_step_horizontal_link">
                                <div class="
                                gus_step_horizontal_link_display
                                ${
                                    // StepLink: none
                                    (this.step_link === "none") ? "gus_step_horizontal_link_display_none" : ""}
                                ${
                                    // StepLink: full
                                    (this.step_link === "full") ? "gus_step_horizontal_link_display_attach" : ""}
                                " part="step-link"></div>
                            </div>
                            `
                            : ""
                        }
                    </div>
                </div>
                `
                this.stepper.appendChild(step);
            }
        }
    }
// Re-render the whole stepper
Re-render the whole stepper
Re - render the whole stepper
render() {
        this.stepper.innerHTML = ''
        if (this.orientation === "vertical") { 
            for (var i = 0; i < this.nb_step; i++) {
                let step = document.createElement("div");
                step.innerHTML = `
                <div class="gus_step_vertical">
                    <div class="gus_step_vertical_left">
                        <div class="gus_step_vertical_icon">
                            <div class="gus_step_icon_display" part="step">
                                ${this.content[i].content ?? i + 1}
                            </div>
                        </div>
                        ${
                            (i !== this.nb_step - 1) ?
                            `
                            <div class="gus_step_vertical_link">
                                <div class="
                                gus_step_vertical_link_display
                                ${
                                    (this.step_link === "none") ? "gus_step_vertical_link_display_none" : ""}
                                ${
                                    (this.step_link === "full") ? "gus_step_vertical_link_display_attach" : ""}
                                " part="step-link"></div>
                            </div>
                            `
                            : ""
                        }
                    </div>
                    <div class="gus_step_vertical_right">
                        <div class="gus_step_vertical_title" part="step-title">
                            <p part="step-title-text">${this.content[i].title}</p>
                        </div>
                    </div>
                </div>
                `
                this.stepper.appendChild(step);
            }
        }
        else { 
            this.stepper.classList.add("gus_stepper_horizontal")
            for (var i = 0; i < this.nb_step; i++) {
                let step = document.createElement("div")
                step.innerHTML = `
                <div class="gus_step_horizontal">
                    <div class="gus_step_horizontal_top">
                        <div class="gus_step_horizontal_title" part="step-title">
                            <p part="step-title-text">${this.content[i].title}</p>
                        </div>
                    </div>
                    <div class="gus_step_horizontal_bottom">
                        <div class="gus_step_horizontal_icon">
                            <div class="gus_step_icon_display" part="step">
                                ${this.content[i].content ?? i + 1}
                            </div>
                        </div>
                        ${
                            (i !== this.nb_step - 1) ?
                            `
                            <div class="gus_step_horizontal_link">
                                <div class="
                                gus_step_horizontal_link_display
                                ${
                                    (this.step_link === "none") ? "gus_step_horizontal_link_display_none" : ""}
                                ${
                                    (this.step_link === "full") ? "gus_step_horizontal_link_display_attach" : ""}
                                " part="step-link"></div>
                            </div>
                            `
                            : ""
                        }
                    </div>
                </div>
                `
                this.stepper.appendChild(step);
            }
        }
    }
render ( ) { this . stepper . innerHTML = '' if ( this . orientation === "vertical" ) { for ( var i = 0 ; i < this . nb_step ; i ++ ) { let step = document . createElement ( "div" ) ; step . innerHTML = ` ${ this . content [ i ] . content ?? i + 1 } ${ ( i !== this . nb_step - 1 ) ? ` ${ ( this . step_link === "none" ) ? "gus_step_vertical_link_display_none" : "" } ${ ( this . step_link === "full" ) ? "gus_step_vertical_link_display_attach" : "" } ` : "" } ${ this . content [ i ] . title } ` this . stepper . appendChild ( step ) ; } } else { this . stepper . classList . add ( "gus_stepper_horizontal" ) for ( var i = 0 ; i < this . nb_step ; i ++ ) { let step = document . createElement ( "div" ) step . innerHTML = ` ${ this . content [ i ] . title } ${ this . content [ i ] . content ?? i + 1 } ${ ( i !== this . nb_step - 1 ) ? ` ${ ( this . step_link === "none" ) ? "gus_step_horizontal_link_display_none" : "" } ${ ( this . step_link === "full" ) ? "gus_step_horizontal_link_display_attach" : "" } ` : "" } ` this . stepper . appendChild ( step ) ; } } }
Re-render the whole stepper
Re - render the whole stepper
// Vertical Stepper // Link step for every step except last one // StepLink: none // StepLink: full // Horizontal Stepper // Link step for every step except last one // StepLink: none // StepLink: full