npm - bootstrap-input-spinner - Versions diffs - 4.0.4 → 4.1.0 - Mend

bootstrap-input-spinner 4.0.4 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/package.json +1 -1
package/es5-deprecated/index.html +0 -499
package/es5-deprecated/src/bootstrap-input-spinner.js +0 -375
package/es5-deprecated/src/custom-editors.js +0 -51
package/es5-deprecated/test/Test.js +0 -17
package/es5-deprecated/test/index.html +0 -19
package/es5-deprecated/test/test-pages/native-number-input.html +0 -55
package/es5-deprecated/test/test-pages/test-bug-98.html +0 -43
package/es5-deprecated/test/test-pages/test.css +0 -20

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-input-spinner",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "A Bootstrap 5 / jQuery plugin to create input spinner elements for number input.",
   "browser": "./src/bootstrap-input-spinner.js",
   "scripts": {

package/es5-deprecated/index.html DELETED Viewed

@@ -1,499 +0,0 @@
-<!DOCTYPE html>
-<!--suppress HtmlFormInputWithoutLabel -->
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>bootstrap-input-spinner</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
-    <link rel="stylesheet" href="../node_modules/prismjs/themes/prism-tomorrow.css"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <style type="text/css">
-        h2 {
-            margin-top: 3rem;
-            margin-bottom: 1rem;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.5);
-        }
-        h3, h4 {
-            margin-top: 2rem;
-        }
-        .input-group, input.test-value-input {
-            max-width: 250px;
-        }
-    </style>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
-    <script src="src/bootstrap-input-spinner.js"></script>
-    <script src="./src/custom-editors.js"></script>
-    <script src="../node_modules/prismjs/prism.js"></script>
-</head>
-<body>
-<section class="container py-5">
-    <h1>bootstrap-input-spinner</h1>
-    <p>
-        A Bootstrap / jQuery plugin to create input spinner elements for number input, by
-        <a href="https://shaack.com/en">shaack.com</a> engineering. For now it needs jQuery, but I am working on it.
-    </p>
-    <p>This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch
-        <a href="https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible">bootstrap4-compatible</a>. npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.</p>
-    <p>
-        License: <a href="https://github.com/shaack/bootstrap-input-spinner/blob/master/LICENSE">MIT</a>
-    </p>
-    <h2>Features</h2>
-    <p>The Bootstrap InputSpinner</p>
-    <ul>
-        <li>
-            is <b>mobile friendly</b> and <b>responsive</b>,
-        </li>
-        <li>
-            has <b>internationalized</b> number formatting,
-        </li>
-        <li>
-            automatically changes the value when <b>holding a button</b>,
-        </li>
-        <li>
-            allows setting a <b>prefix</b> or <b>suffix</b> text in the input,
-        </li>
-        <li>
-            handles <code>val()</code> like the native element,
-        </li>
-        <li>
-            <b>dynamically handles</b> changing <b>attribute values</b> like <code>disabled</code> oder
-            <code>class</code>,
-        </li>
-        <li>
-            dispatches <code>change</code> and <code>input</code> <b>events on value
-            change</b> like the native element,
-        </li>
-        <li>
-            <b>needs no extra css</b>, just Bootstrap 5.
-        </li>
-    </ul>
-    <h2>Usage</h2>
-    <p>
-        This script enables the InputSpinner for all inputs with <code>type='number'</code>.
-        <b>No extra css needed</b>, just Bootstrap 5.
-    </p>
-    <pre><code class="language-html">&lt;script src="./src/bootstrap-input-spinner.js">&lt;/script>
-&lt;script>
-    $("input[type='number']").inputSpinner()
-&lt;/script></code></pre>
-    <h2>Repository, documentation and npm package</h2>
-    <p>Find the source code, more documentation and the npm package at</p>
-    <ul>
-        <li><a href="https://github.com/shaack/bootstrap-input-spinner">GitHub repository and documentation</a></li>
-        <li><a href="https://www.npmjs.com/package/bootstrap-input-spinner">npm package</a></li>
-    </ul>
-    <h2>Examples</h2>
-    <p>The following contains examples of the InputSpinner's main features</p>
-    <h3>No attributes</h3>
-    <p>
-        <input type="number"/>
-    </p>
-    <pre><code class="language-html">&lt;input type="number"/></code></pre>
-    <h3>Simple Integer</h3>
-    <p>
-        <input type="number" value="500" min="0" max="1000" step="10"/>
-    </p>
-    <pre><code
-            class="language-html">&lt;input type="number" value="500" min="0" max="1000" step="10"/></code></pre>
-    <h3>Floating Point</h3>
-    <p>
-        <input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/>
-    </p>
-    <pre><code
-            class="language-html">&lt;input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/></code></pre>
-    <h3>Handle <code>change</code> and <code>input</code> events and
-        read the value from JavaScript
-        with <code>val()</code></h3>
-    <p>
-        Type in a number to see the difference between <code>change</code> and <code>input</code> events.
-    </p>
-    <p>
-        <input type="number" id="changedInput" value="2500" min="0" max="5000000" data-decimals="2"/>
-    </p>
-    <p>
-        Value on input: <span id="valueOnInput"></span><br/>
-        Value on change: <span id="valueOnChange"></span>
-    </p>
-    <script>
-        var $changedInput = $("#changedInput")
-        var $valueOnInput = $("#valueOnInput")
-        var $valueOnChange = $("#valueOnChange")
-        $changedInput.on("input", function (event) {
-            console.log("on input", event)
-            $valueOnInput.html($(event.target).val())
-            // or $valueOnInput.html(event.target.value) // in vanilla js
-            // or $valueOnInput.html($changedInput.val())
-        })
-        $changedInput.on("change", function (event) {
-            console.log("on change", event)
-            $valueOnChange.html($(event.target).val())
-        })
-    </script>
-    <pre><code class="language-javascript">var $changedInput = $("#changedInput")
-var $valueOnInput = $("#valueOnInput")
-var $valueOnChange = $("#valueOnChange")
-$changedInput.on("input", function (event) {
-    $valueOnInput.html($(event.target).val())
-    // or $valueOnInput.html(event.target.value) // in vanilla js
-    // or $valueOnInput.html($changedInput.val())
-})
-$changedInput.on("change", function (event) {
-    $valueOnChange.html($(event.target).val())
-})</code></pre>
-    <h3>Programmatic changing the value with <code>val()</code></h3>
-    <p>
-        <label for="inputNet">Net</label>
-        <input type="number" id="inputNet" value="100" min="0" max="10000" step="0.01" data-decimals="2"/>
-    </p>
-    <p>
-        <label for="inputGross">Gross (+19%)</label>
-        <input type="number" id="inputGross" value="100" min="0" max="11900" step="0.01" data-decimals="2"/>
-    </p>
-    <script>
-        var $inputNet = $("#inputNet")
-        var $inputGross = $("#inputGross")
-        $inputNet.on("input", function (event) {
-            $inputGross.val($(event.target).val() * 1.19)
-        })
-        $inputGross.on("input", function (event) {
-            $inputNet.val($(event.target).val() / 1.19)
-        })
-        $inputGross.val($inputNet.val() * 1.19)
-    </script>
-    <pre><code class="language-javascript">$inputNet.on("input", function (event) {
-    $inputGross.val($(event.target).val() * 1.19)
-    // or $inputGross[0].setValue(event.target.value * 1.19) // in vanilla js
-    // or $inputGross.val($inputNet.val() * 1.19)
-    // do all the same
-})
-$inputGross.on("input", function (event) {
-    $inputNet.val($(event.target).val() / 1.19)
-})</code></pre>
-    <h3>Attributes <code>placeholder</code> and <code>required</code></h3>
-    <form>
-        <p>
-            <input placeholder="Enter a number" required type="number" value="" min="-100" max="100"/>
-        </p>
-        <pre><code
-                class="language-html">&lt;input <strong>placeholder</strong>="Enter a number" <strong>required</strong> type="number" value="" min="-100" max="100"/></code></pre>
-        <input type="submit" id="submitButton" class="btn btn-primary mb-4" value="Submit to test empty input"/>
-    </form>
-    <h3>Attribute <code>disabled</code>, dynamically changing</h3>
-    <p>Attributes are handled dynamically.</p>
-    <form>
-        <p>
-            <input id="inputDisabled" disabled type="number" value="50"/>
-        </p>
-        <div class="form-check">
-            <input type="checkbox" checked class="form-check-input" id="disabledSwitch">
-            <label class="form-check-label" for="disabledSwitch">Disabled</label>
-        </div>
-        <script>
-            var $inputDisabled = $("#inputDisabled")
-            var $disabledSwitch = $("#disabledSwitch")
-            $disabledSwitch.on("change", function () {
-                $inputDisabled.prop("disabled", $(this).prop("checked"))
-            })
-        </script>
-        <pre><code class="language-html">&lt;input id="inputDisabled" disabled type="number" value="50"/>
-&lt;div class="form-check">
-    &lt;input type="checkbox" checked class="form-check-input" id="disabledSwitch"/>
-    &lt;label class="form-check-label" for="disabledSwitch">Disabled&lt;/label>
-&lt;/div>
-&lt;script>
-    var $inputDisabled = $("#inputDisabled")
-    var $disabledSwitch = $("#disabledSwitch")
-    $disabledSwitch.on("change", function () {
-        $inputDisabled.prop("disabled", $(this).prop("checked"))
-    })
-&lt;/script></code></pre>
-    </form>
-    <h3><code>buttonsOnly</code> mode and disabled <code>autoInterval</code></h3>
-    <p>
-        In <code>buttonsOnly</code> mode no direct text input is allowed, the text-input
-        gets the attribute <code>readonly</code>. But the plus and minus buttons still allow to change the value.
-        <br/><code>autoInterval: undefined</code> additionally disables the auto increase/decrease, when you hold the button.
-    </p>
-    <p>
-        <input class="buttons-only" value="5" min="1" max="10"/>
-    </p>
-    <pre><code class="language-js">$(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined})</code></pre>
-    <h3>Dynamically handling of the <code>class</code> attribute</h3>
-    <p>
-        <input id="inputChangeClass" class="is-valid" type="number" value="50"/>
-    </p>
-    <p>
-        <label for="classInput">CSS Class</label>
-        <input id="classInput" type="text" class="form-control test-value-input" value="is-valid"/>
-        Try to change the class to "is-invalid" or "text-info".
-    </p>
-    <script>
-        var $inputChangeClass = $("#inputChangeClass")
-        var $classInput = $("#classInput")
-        $classInput.on("input", function () {
-            $inputChangeClass.prop("class", this.value)
-        })
-    </script>
-    <pre><code class="language-html">&lt;input id="inputChangeClass" class="is-valid" type="number" value="50"/>
-&lt;label for="classInput">CSS Class&lt;/label>
-&lt;input id="classInput" type="text" class="form-control" value="is-valid"/>
-&lt;script>
-    var $inputChangeClass = $("#inputChangeClass")
-    var $classInput = $("#classInput")
-    $classInput.on("input", function() {
-        $inputChangeClass.prop("class", this.value);
-    })
-&lt;/script></code></pre>
-    <h3>Sizing</h3>
-    <p>Sizing works out of the box. Just set the original inputs class to <code>form-control-sm</code> or
-        <code>form-control-lg</code>, and
-        the resulting group gets the class <code>input-group-sm</code> or <code>input-group-lg</code>.</p>
-    <p>
-        <label for="inputSmall">Small</label>
-        <input id="inputSmall" class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>
-    </p>
-    <pre><code class="language-html">&lt;input class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/></code></pre>
-    <p>
-        <label for="inputLarge">Large</label>
-        <input id="inputLarge" class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>
-    </p>
-    <pre><code class="language-html">&lt;input class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/></code></pre>
-    <h3>Dynamically handling of <code>min</code>, <code>max</code>,
-        <code>step</code> and <code>data-decimals</code></h3>
-    <div class="row">
-        <div class="col-lg-3">
-            <p>
-                <label for="minInput">min</label>
-                <input id="minInput" type="text" class="form-control test-value-input" value="0"/>
-            </p>
-        </div>
-        <div class="col-lg-3">
-            <p>
-                <label for="maxInput">max</label>
-                <input id="maxInput" type="text" class="form-control test-value-input" value="100"/>
-            </p>
-        </div>
-        <div class="col-lg-3">
-            <p>
-                <label for="stepInput">step</label>
-                <input id="stepInput" type="text" class="form-control test-value-input" value="0.05"/>
-            </p>
-        </div>
-        <div class="col-lg-3">
-            <p>
-                <label for="dataDecimalsInput">data-decimals</label>
-                <input id="dataDecimalsInput" type="text" class="form-control test-value-input" value="2"/>
-            </p>
-        </div>
-    </div>
-    <p>
-        <label for="minMaxTester">Try here</label>
-        <input id="minMaxTester" type="number" value="50" min="0" max="100" step="0.05" data-decimals="2"/>
-    </p>
-    <script>
-        var $minInput = $("#minInput")
-        var $maxInput = $("#maxInput")
-        var $stepInput = $("#stepInput")
-        var $dataDecimalsInput = $("#dataDecimalsInput")
-        var $minMaxTester = $("#minMaxTester")
-        $minInput.on("change", function (event) {
-            console.log("on change", event)
-            $minMaxTester.attr("min", $minInput.val())
-        })
-        $maxInput.on("change", function (event) {
-            console.log("on change", event)
-            $minMaxTester.attr("max", $maxInput.val())
-        })
-        $stepInput.on("change", function (event) {
-            console.log("on change", event)
-            $minMaxTester.attr("step", $stepInput.val())
-        })
-        $dataDecimalsInput.on("change", function (event) {
-            console.log("on change", event)
-            $minMaxTester.attr("data-decimals", $dataDecimalsInput.val())
-        })
-    </script>
-    <pre><code class="language-javascript">var $minInput = $("#minInput")
-var $maxInput = $("#maxInput")
-var $stepInput = $("#stepInput")
-var $dataDecimalsInput = $("#dataDecimalsInput")
-var $minMaxTester = $("#minMaxTester")
-$minInput.on("change", function (event) {
-    $minMaxTester.attr("min", $minInput.val())
-})
-$maxInput.on("change", function (event) {
-    $minMaxTester.attr("max", $maxInput.val())
-})
-$stepInput.on("change", function (event) {
-    $minMaxTester.attr("step", $stepInput.val())
-})
-$dataDecimalsInput.on("change", function (event) {
-    $minMaxTester.attr("data-decimals", $dataDecimalsInput.val())
-})
-</code></pre>
-    <h3>Prefix and Suffix</h3>
-    <p>
-        <label for="inputPrefix">Prefix</label>
-        <input id="inputPrefix" data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number"/>
-    </p>
-    <pre><code class="language-html">&lt;input data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number" /></code></pre>
-    <p>
-        <label for="inputSuffix">Suffix</label>
-        <input id="inputSuffix" data-suffix="°C" value="50" min="0" max="100" type="number"/>
-    </p>
-    <pre><code
-            class="language-html">&lt;input data-suffix="°C" value="50" min="0" max="100" type="number" /></code></pre>
-    <h3>Looping the value</h3>
-    <p>This input starts from 0 when reaching 360.</p>
-    <p>
-        <input type="number" id="inputLoop" value="0" data-decimals="0" min="-10" max="360" step="10"/>
-    </p>
-    <script>
-        var $inputLoop = $("#inputLoop")
-        $inputLoop.on("input", function(ignored) {
-            var value = $inputLoop.val()
-            value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
-            $inputLoop.val(value)
-        })
-    </script>
-    <pre><code class="language-html">&lt;input step="10" type="number" id="inputLoop" value="0" data-decimals="0" min="-10" max="360"/&gt;</code></pre>
-    <p>"Loop" the value between 0 and 360 with the <code>change</code> event in JavaScript.</p>
-    <pre><code class="language-javascript">var $inputLoop = $("#inputLoop")
-$inputLoop.on("input", function(event) {
-    var value = $inputLoop.val()
-    value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
-    $inputLoop.val(value)
-})</code></pre>
-    <h3>Custom Editors</h3>
-    <p>An Editor defines, how the input is parsed and rendered. The inputSpinner is shipped with some custom Editors in
-        <code>/src/custom-editors.js</code>.</p>
-    <h4>RawEditor</h4>
-    <p>The simplest custom Editor is the <code>RawEditor</code>, it renders just the value und parses just the value,
-        without any
-        changes, like a native number input. No internationalization, no digit grouping.</p>
-    <p>
-        <input id="rawEditor" value="1000"/>
-    </p>
-    <script>
-        $("#rawEditor").inputSpinner({editor: customEditors.RawEditor})
-    </script>
-    <pre><code
-            class="language-js">$("#rawEditor").inputSpinner({editor: customEditors.RawEditor})</code></pre>
-    <h4>TimeEditor</h4>
-    <p>The <code>TimeEditor</code> renders the number as time in hours and minutes, separated by a colon.</p>
-    <input id="timeEditor" value="60" step="5"/>
-    <div class="mt-1">value: <span id="timeValue"></span></div>
-    <script>
-        var $timeEditorInput = $("#timeEditor")
-        $timeEditorInput.inputSpinner({editor: customEditors.TimeEditor})
-        $("#timeValue").text($timeEditorInput.val())
-        $timeEditorInput.on("input", function() {
-            $("#timeValue").text($timeEditorInput.val())
-        })
-    </script>
-    <pre><code
-            class="language-js">$("#rawEditor").inputSpinner({editor: customEditors.TimeEditor})</code></pre>
-    <h3>Styling with templates (<i>new!</i>)</h3>
-    <p>With the new templating feature, you can almost do <b>anything, when it comes to layout</b>.</p>
-    <h5>How about... buttons right</h5>
-    <p>
-        <input data-prefix="¥" id="templateButtonsRight" value="1000"/>
-    </p>
-    <p>
-        This is the template for "buttons right":
-    </p>
-    <script>
-        $("#templateButtonsRight").inputSpinner({
-            template:
-                '<div class="input-group ${groupClass}">' +
-                '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control"/>' +
-                '<button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass}" type="button">${decrementButton}</button>' +
-                '<button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass}" type="button">${incrementButton}</button>' +
-                '</div>'
-        })
-    </script>
-    <pre><code class="language-html">&lt;div class="input-group ${groupClass}">
-&lt;input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control"/>
-&lt;button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass}" type="button">${decrementButton}&lt;/button>
-&lt;button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass}" type="button">${incrementButton}&lt;/button>
-&lt;/div></code></pre>
-    <p>You can... or must use the following variables in your template:</p>
-    <ul>
-        <li>${groupClass}</li>
-        <li>${textAlign}</li>
-        <li>${buttonsWidth}</li>
-        <li>${buttonsClass}</li>
-        <li>${decrementButton}</li>
-        <li>${incrementButton}</li>
-    </ul>
-    <p>Provide the template as configuration parameter:</p>
-    <pre><code class="language-js">$(element).inputSpinner({template: '&lt;div class...'})</code></pre>
-    <h3>Destroying the spinner</h3>
-    <p>To Remove the InputSpinner and show the original input element, use</p>
-    <pre><code class="language-javascript">$(element).inputSpinner("destroy")</code></pre>
-    <div class="mb-3">
-        <label for="inputDestroyCreate">Label `for` switches dynamically:</label>
-        <input type="number" id="inputDestroyCreate" value="50"/>
-    </div>
-    <button id="buttonDestroy" class="btn btn-primary">destroy</button>
-    <button id="buttonCreate" disabled="disabled" class="btn btn-primary">re-create</button>
-    <script>
-        var $buttonDestroy = $("#buttonDestroy")
-        var $buttonCreate = $("#buttonCreate")
-        var $inputDestroyCreate = $("#inputDestroyCreate")
-        $buttonDestroy.click(function () {
-            $inputDestroyCreate.inputSpinner("destroy")
-            $buttonDestroy.attr("disabled", true)
-            $buttonCreate.attr("disabled", false)
-        })
-        $buttonCreate.click(function () {
-            $inputDestroyCreate.inputSpinner()
-            $buttonDestroy.attr("disabled", false)
-            $buttonCreate.attr("disabled", true)
-        })
-    </script>
-    <div class="card my-5 border-info">
-        <a href="https://shaack.com/works">
-            <div class="card-body">
-                <h4 class="mb-2 mt-0">More Bootstrap components (from shaack.com)</h4>
-                You may want to check out our further Bootstrap extensions,
-                <b>bootstrap-show-modal</b> and
-                <b>bootstrap-detect-breakpoint</b>.
-            </div>
-        </a>
-    </div>
-    <p>If you find bugs or have suggestions, you may write an
-        <a href="https://github.com/shaack/bootstrap-input-spinner/issues">issue</a>.</p>
-    <br/><br/>
-</section>
-<!-- bootstrap needs jQuery -->
-<script>
-    $("input[type='number']").inputSpinner()
-    $(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined })
-</script>
-</body>
-</html>

package/es5-deprecated/src/bootstrap-input-spinner.js DELETED Viewed

@@ -1,375 +0,0 @@
-/**
- * Author and copyright: Stefan Haack (https://shaack.com)
- * Repository: https://github.com/shaack/bootstrap-input-spinner
- * License: MIT, see file 'LICENSE'
- */
-;(function ($) {
-    "use strict"
-    // the default editor for parsing and rendering
-    const I18nEditor = function (props, element) {
-        const locale = props.locale || "en-US"
-        this.parse = function (customFormat) {
-            const numberFormat = new Intl.NumberFormat(locale)
-            const thousandSeparator = numberFormat.format(11111).replace(/1/g, '') || '.'
-            const decimalSeparator = numberFormat.format(1.1).replace(/1/g, '')
-            return parseFloat(customFormat
-                .replace(new RegExp(' ', 'g'), '')
-                .replace(new RegExp('\\' + thousandSeparator, 'g'), '')
-                .replace(new RegExp('\\' + decimalSeparator), '.')
-            )
-        }
-        this.render = function (number) {
-            const decimals = parseInt(element.getAttribute("data-decimals")) || 0
-            const digitGrouping = !(element.getAttribute("data-digit-grouping") === "false")
-            const numberFormat = new Intl.NumberFormat(locale, {
-                minimumFractionDigits: decimals,
-                maximumFractionDigits: decimals,
-                useGrouping: digitGrouping
-            })
-            return numberFormat.format(number)
-        }
-    }
-    let triggerKeyPressed = false
-    const originalVal = $.fn.val
-    $.fn.val = function (value) {
-        if (arguments.length >= 1) {
-            for (let i = 0; i < this.length; i++) {
-                if (this[i]["bootstrap-input-spinner"] && this[i].setValue) {
-                    const element = this[i]
-                    setTimeout(function () {
-                        element.setValue(value)
-                    })
-                }
-            }
-        }
-        return originalVal.apply(this, arguments)
-    }
-    $.fn.inputSpinner = function (methodOrProps) {
-        if (methodOrProps === "destroy") {
-            this.each(function () {
-                if (this["bootstrap-input-spinner"]) {
-                    this.destroyInputSpinner()
-                } else {
-                    console.warn("element", this, "is no bootstrap-input-spinner")
-                }
-            })
-            return this
-        }
-        const props = {
-            decrementButton: "<strong>&minus;</strong>", // button text
-            incrementButton: "<strong>&plus;</strong>", // ..
-            groupClass: "", // css class of the resulting input-group
-            buttonsClass: "btn-outline-secondary",
-            buttonsWidth: "2.5rem",
-            textAlign: "center", // alignment of the entered number
-            autoDelay: 500, // ms threshold before auto value change
-            autoInterval: 50, // speed of auto value change, set to `undefined` to disable auto-change
-            buttonsOnly: false, // set this `true` to disable the possibility to enter or paste the number via keyboard
-            keyboardStepping: true, // set this to `false` to disallow the use of the up and down arrow keys to step
-            locale: navigator.language, // the locale, per default detected automatically from the browser
-            editor: I18nEditor, // the editor (parsing and rendering of the input)
-            template: // the template of the input
-                '<div class="input-group ${groupClass}">' +
-                '<button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass} btn-minus" type="button">${decrementButton}</button>' +
-                '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control form-control-text-input"/>' +
-                '<button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass} btn-plus" type="button">${incrementButton}</button>' +
-                '</div>'
-        }
-        for (let option in methodOrProps) {
-            // noinspection JSUnfilteredForInLoop
-            props[option] = methodOrProps[option]
-        }
-        const html = props.template
-            .replace(/\${groupClass}/g, props.groupClass)
-            .replace(/\${buttonsWidth}/g, props.buttonsWidth)
-            .replace(/\${buttonsClass}/g, props.buttonsClass)
-            .replace(/\${decrementButton}/g, props.decrementButton)
-            .replace(/\${incrementButton}/g, props.incrementButton)
-            .replace(/\${textAlign}/g, props.textAlign)
-        this.each(function () {
-            if (this["bootstrap-input-spinner"]) {
-                console.warn("element", this, "is already a bootstrap-input-spinner")
-            } else {
-                var $original = $(this)
-                $original[0]["bootstrap-input-spinner"] = true
-                $original.hide()
-                $original[0].inputSpinnerEditor = new props.editor(props, this)
-                var autoDelayHandler = null
-                var autoIntervalHandler = null
-                var $inputGroup = $(html)
-                var $buttonDecrement = $inputGroup.find(".btn-decrement")
-                var $buttonIncrement = $inputGroup.find(".btn-increment")
-                var $input = $inputGroup.find("input")
-                var $label = $("label[for='" + $original.attr("id") + "']")
-                if (!$label[0]) {
-                    $label = $original.closest("label")
-                }
-                var min = null
-                var max = null
-                var step = null
-                updateAttributes()
-                var value = parseFloat($original[0].value)
-                let pointerState = false
-                const prefix = $original.attr("data-prefix") || ""
-                const suffix = $original.attr("data-suffix") || ""
-                if (prefix) {
-                    const prefixElement = $('<span class="input-group-text">' + prefix + '</span>')
-                    $inputGroup.find("input").before(prefixElement)
-                }
-                if (suffix) {
-                    const suffixElement = $('<span class="input-group-text">' + suffix + '</span>')
-                    $inputGroup.find("input").after(suffixElement)
-                }
-                $original[0].setValue = function (newValue) {
-                    setValue(newValue)
-                }
-                $original[0].destroyInputSpinner = function () {
-                    destroy()
-                }
-                var observer = new MutationObserver(function () {
-                    updateAttributes()
-                    setValue(value, true)
-                })
-                observer.observe($original[0], {attributes: true})
-                $original.after($inputGroup)
-                setValue(value)
-                $input.on("paste input change focusout", function (event) {
-                    let newValue = $input[0].value
-                    const focusOut = event.type === "focusout"
-                    newValue = $original[0].inputSpinnerEditor.parse(newValue)
-                    setValue(newValue, focusOut)
-                    dispatchEvent($original, event.type)
-                    if (props.keyboardStepping && focusOut) { // stop stepping
-                        resetTimer()
-                    }
-                }).on("keydown", function (event) {
-                    if (props.keyboardStepping) {
-                        if (event.which === 38) { // up arrow pressed
-                            event.preventDefault()
-                            if (!$buttonDecrement.prop("disabled")) {
-                                stepHandling(step)
-                            }
-                        } else if (event.which === 40) { // down arrow pressed
-                            event.preventDefault()
-                            if (!$buttonIncrement.prop("disabled")) {
-                                stepHandling(-step)
-                            }
-                        }
-                    }
-                }).on("keyup", function (event) {
-                    // up/down arrow released
-                    if (props.keyboardStepping && (event.which === 38 || event.which === 40)) {
-                        event.preventDefault()
-                        resetTimer()
-                    }
-                })
-                // decrement button
-                onPointerDown($buttonDecrement[0], function () {
-                    if (!$buttonDecrement.prop("disabled")) {
-                        pointerState = true
-                        stepHandling(-step)
-                    }
-                })
-                // increment button
-                onPointerDown($buttonIncrement[0], function () {
-                    if (!$buttonIncrement.prop("disabled")) {
-                        pointerState = true
-                        stepHandling(step)
-                    }
-                })
-                onPointerUp(document.body, function () {
-                    if(pointerState === true) {
-                        resetTimer()
-                        dispatchEvent($original, "change")
-                        pointerState = false
-                    }
-                })
-            }
-            function setValue(newValue, updateInput) {
-                if (updateInput === undefined) {
-                    updateInput = true
-                }
-                if (isNaN(newValue) || newValue === "") {
-                    $original[0].value = ""
-                    if (updateInput) {
-                        $input[0].value = ""
-                    }
-                    value = NaN
-                } else {
-                    newValue = parseFloat(newValue)
-                    newValue = Math.min(Math.max(newValue, min), max)
-                    $original[0].value = newValue
-                    if (updateInput) {
-                        $input[0].value = $original[0].inputSpinnerEditor.render(newValue)
-                    }
-                    value = newValue
-                }
-            }
-            function destroy() {
-                $original.prop("required", $input.prop("required"))
-                observer.disconnect()
-                resetTimer()
-                $input.off("paste input change focusout")
-                $inputGroup.remove()
-                $original.show()
-                $original[0]["bootstrap-input-spinner"] = undefined
-                if ($label[0]) {
-                    $label.attr("for", $original.attr("id"))
-                }
-            }
-            function dispatchEvent($element, type) {
-                if (type) {
-                    setTimeout(function () {
-                        let event
-                        if (typeof (Event) === 'function') {
-                            event = new Event(type, {bubbles: true})
-                        } else { // IE
-                            event = document.createEvent('Event')
-                            event.initEvent(type, true, true)
-                        }
-                        $element[0].dispatchEvent(event)
-                    })
-                }
-            }
-            function stepHandling(step) {
-                calcStep(step)
-                resetTimer()
-                if(props.autoInterval !== undefined) {
-                    autoDelayHandler = setTimeout(function () {
-                        autoIntervalHandler = setInterval(function () {
-                            calcStep(step)
-                        }, props.autoInterval)
-                    }, props.autoDelay)
-                }
-            }
-            function calcStep(step) {
-                if (isNaN(value)) {
-                    value = 0
-                }
-                setValue(Math.round(value / step) * step + step)
-                dispatchEvent($original, "input")
-            }
-            function resetTimer() {
-                clearTimeout(autoDelayHandler)
-                clearTimeout(autoIntervalHandler)
-            }
-            function updateAttributes() {
-                // copy properties from original to the new input
-                if ($original.prop("required")) {
-                    $input.prop("required", $original.prop("required"))
-                    $original.removeAttr('required')
-                }
-                $input.prop("placeholder", $original.prop("placeholder"))
-                $input.attr("inputmode", $original.attr("inputmode") || "decimal")
-                const disabled = $original.prop("disabled")
-                const readonly = $original.prop("readonly")
-                $input.prop("disabled", disabled)
-                $input.prop("readonly", readonly || props.buttonsOnly)
-                $buttonIncrement.prop("disabled", disabled || readonly)
-                $buttonDecrement.prop("disabled", disabled || readonly)
-                if (disabled || readonly) {
-                    resetTimer()
-                }
-                const originalClass = $original.prop("class")
-                let groupClass = ""
-                // sizing
-                if (/form-control-sm/g.test(originalClass)) {
-                    groupClass = "input-group-sm"
-                } else if (/form-control-lg/g.test(originalClass)) {
-                    groupClass = "input-group-lg"
-                }
-                const inputClass = originalClass.replace(/form-control(-(sm|lg))?/g, "")
-                $inputGroup.prop("class", "input-group " + groupClass + " " + props.groupClass)
-                $input.prop("class", "form-control " + inputClass)
-                // update the main attributes
-                min = isNaN($original.prop("min")) || $original.prop("min") === "" ? -Infinity : parseFloat($original.prop("min"))
-                max = isNaN($original.prop("max")) || $original.prop("max") === "" ? Infinity : parseFloat($original.prop("max"))
-                step = parseFloat($original.prop("step")) || 1
-                if ($original.attr("hidden")) {
-                    $inputGroup.attr("hidden", $original.attr("hidden"))
-                } else {
-                    $inputGroup.removeAttr("hidden")
-                }
-                if ($original.attr("id")) {
-                    $input.attr("id", $original.attr("id") + ":input_spinner") // give the spinner a unique id...
-                    if ($label[0]) {
-                        $label.attr("for", $input.attr("id")) // ...to rewire the label
-                    }
-                }
-            }
-        })
-        return this
-    }
-    function onPointerUp(element, callback) {
-        element.addEventListener("mouseup", function (e) {
-            callback(e)
-        })
-        element.addEventListener("touchend", function (e) {
-            callback(e)
-        })
-        element.addEventListener("keyup", function (e) {
-            if ((e.keyCode === 32 || e.keyCode === 13)) {
-                triggerKeyPressed = false
-                callback(e)
-            }
-        })
-    }
-    function onPointerDown(element, callback) {
-        element.addEventListener("mousedown", function (e) {
-            if (e.button === 0) {
-                e.preventDefault()
-                callback(e)
-            }
-        })
-        element.addEventListener("touchstart", function (e) {
-            if (e.cancelable) {
-                e.preventDefault()
-            }
-            callback(e)
-        }, {passive: false})
-        element.addEventListener("keydown", function (e) {
-            if ((e.keyCode === 32 || e.keyCode === 13) && !triggerKeyPressed) {
-                triggerKeyPressed = true
-                callback(e)
-            }
-        })
-    }
-}(jQuery))

package/es5-deprecated/src/custom-editors.js DELETED Viewed

@@ -1,51 +0,0 @@
-/**
- * Author and copyright: Stefan Haack (https://shaack.com)
- * Repository: https://github.com/shaack/bootstrap-input-spinner
- * License: MIT, see file 'LICENSE'
- */
-const customEditors = {
-    RawEditor: function (props, element) {
-        this.parse = function (customFormat) {
-            // parse nothing
-            return customFormat
-        }
-        this.render = function (number) {
-            // render raw
-            return number
-        }
-    },
-    TimeEditor: function (props, element) {
-        // could be implemented more elegant maybe, but works
-        this.parse = function (customFormat) {
-            let trimmed = customFormat.trim()
-            let sign = 1
-            if (trimmed.charAt(0) === "-") {
-                sign = -1
-                trimmed = trimmed.replace("-", "")
-            }
-            const parts = trimmed.split(":")
-            let hours = 0, minutes
-            if (parts[1]) {
-                hours = parseInt(parts[0], 10)
-                minutes = parseInt(parts[1], 10)
-            } else {
-                minutes = parseInt(parts[0], 10)
-            }
-            return (hours * 60 + minutes) * sign
-        }
-        this.render = function (number) {
-            let minutes = Math.abs(number % 60)
-            if (minutes < 10) {
-                minutes = "0" + minutes
-            }
-            let hours
-            if (number >= 0) {
-                hours = Math.floor(number / 60)
-                return hours + ":" + minutes
-            } else {
-                hours = Math.ceil(number / 60)
-                return "-" + Math.abs(hours) + ":" + minutes
-            }
-        }
-    }
-}

package/es5-deprecated/test/Test.js DELETED Viewed

@@ -1,17 +0,0 @@
-import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
-describe('bootstrap-input-spinner', function () {
-    it('Should display and destroy the spinner', function () {
-        addInput()
-        const $input = $("input[type='number']")
-        $input.inputSpinner()
-        $input.inputSpinner("destroy")
-    })
-})
-function addInput() {
-    var testContainer = document.getElementById("testContainer")
-    var input = document.createElement("input")
-    input.type = "number"
-    testContainer.append(input)
-}

package/es5-deprecated/test/index.html DELETED Viewed

@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>bootstrap-input-spinner test</title>
-</head>
-<body>
-<div id="testContainer"></div>
-<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
-<script src="../src/bootstrap-input-spinner.js"></script>
-<script type="module">
-    import {teevi} from "../../node_modules/teevi/src/teevi.js"
-    import "./Test.js"
-    teevi.run()
-</script>
-</body>
-</html>

package/es5-deprecated/test/test-pages/native-number-input.html DELETED Viewed

@@ -1,55 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>input type="number"</title>
-    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="test.css"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<body>
-<h1>This is for testing the behaviour of the native number input, compared to the bootstrap-input-spinner.</h1>
-First: Native Element, second: bootstrap-input-spinner.
-<h3>No attributes</h3>
-<p>
-    <input type="number"/>
-    <input type="number" class="bootstrap-input-spinner"/>
-</p>
-<h3>step 1, value 1.01</h3>
-<p>
-    <input type="number" step="1" value="1.01"/>
-    <input type="number" class="bootstrap-input-spinner" step="1" value="1.01"/>
-</p>
-<h3>step 2, value 6, min 5.01</h3>
-<p>
-    <input type="number" step="2" min="5.01" value="6"/>
-    <input type="number" class="bootstrap-input-spinner" step="2" min="5.01" value="6"/>
-</p>
-<h3>step 2, min 0, max 9.5</h3>
-<p>
-    <input type="number" step="2" min="0" max="9.5"/>
-    <input type="number" class="bootstrap-input-spinner" step="2" min="0" max="9.5"/>
-</p>
-<h3>step 10, min 1, max 49</h3>
-<p>
-    <input type="number" step="10" min="1" max="49"/>
-    <input type="number" class="bootstrap-input-spinner" step="10" min="1" max="49"/>
-</p>
-<h3>step 20, min -99, max 100</h3>
-<p>
-    <input type="number" step="20" min="-99" max="100"/>
-    <input type="number" class="bootstrap-input-spinner" step="20" min="-99" max="100"/>
-</p>
-<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
-<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-<script src="../../src/bootstrap-input-spinner.js"></script>
-<script>
-    $(".bootstrap-input-spinner").inputSpinner()
-</script>
-</body>
-</html>

package/es5-deprecated/test/test-pages/test-bug-98.html DELETED Viewed

@@ -1,43 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Test bug #98</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
-    <link rel="stylesheet" href="test.css"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-</head>
-<body>
-<h1>Test page for fixing <a href="https://github.com/shaack/bootstrap-input-spinner/issues/98">issue #98</a></h1>
-<div style="max-width: 520px">
-    <div class="form-row">
-        <label class="col-4"><b>Change this:</b></label>
-        <div class="col-8 mb-1">
-            <input type="number" value="0" id="source_b" class="form-control"/>
-        </div>
-    </div>
-    <div class="box_b">
-        <div class="form-row">
-            <label class="col-4">Mirror 1:</label>
-            <div class="col-8 mb-1">
-                <input type="number" value="0" id="mirror_1b" class="form-control"/>
-            </div>
-        </div>
-        <div class="form-row">
-            <label class="col-4">Mirror 2:</label>
-            <div class="col-8">
-                <input type="number" value="0" id="mirror_2b" class="form-control"/>
-            </div>
-        </div>
-    </div>
-</div>
-<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
-<script src="../../src/bootstrap-input-spinner.js"></script>
-<script>
-    $('input').inputSpinner()
-    $(document).on('change', 'input#source_b', function (e) {
-        $('.box_b input').val($(e.target).val())
-    })
-</script>
-</body>
-</html>

package/es5-deprecated/test/test-pages/test.css DELETED Viewed

@@ -1,20 +0,0 @@
-body {
-    padding: 2rem;
-}
-h1 {
-margin-bottom: 2rem;
-}
-h3 {
-    margin-top: 2rem;
-}
-.input-group, input.test-value-input {
-    max-width: 250px;
-}
-p input:first-child {
-    margin-bottom: 0.5rem;
-    width: 250px;
-}