
<rhythmroll>

    <div class="row mt-3">
            <div class="col-md-3">
                <input type="text" class="form form-control mt-1" id="pattern-{props.ti}" onkeyup={updateCall} value={props.v} style="width:250px"/>
            </div>
            <div class="col-md-5 mt-2">
                <div style="display:inline; border: 1px dotted black;font-size: 16px; padding: 2px"
                    each={ key, index in pattern_clean($("#pattern-" + props.ti).val()).split('')}
                    class="roll-{index + 1} roll">
                    {key}
                </div>
            </div>
    </div>

    <script>
        this.props = opts;

            updateCall() {
                this.update();
            }
   </script>

</rhythmroll>
