input-duration 3.1.0 → 3.2.0

package/docs/InputDuration.html

@@ -19,40 +19,3314 @@
 
     <h1 class="page-title">Class: InputDuration</h1>
 
-    
+
 
 
 
 
 <section>
 
-<header>
-    
-        <h2><span class="attribs"><span class="type-signature"></span></span>InputDuration<span class="signature">()</span><span class="type-signature"></span></h2>
-        
-    
-</header>
+<header>
+
+        <h2><span class="attribs"><span class="type-signature"></span></span>InputDuration<span class="signature">()</span><span class="type-signature"></span></h2>
+
+
+</header>
+
+<article>
+    <div class="container-overview">
+
+
+
+
+
+
+    <h4 class="name" id="InputDuration"><span class="type-signature"></span>new InputDuration<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    Class for the Input-Duration webcomponent
+
+Boolean attributes `no-hours`, `no-minutes`, `no-seconds`, and
+`no-microseconds` hide their respective fields. String attributes
+`hours-divider`, `minutes-divider`, `seconds-divider`, and
+`microseconds-divider` customize the separators; the last adds a suffix
+after milliseconds. Divider values are rendered as text.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line18">line 18</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h5>Example</h5>
+
+    <pre class="prettyprint"><code>&lt;input-duration no-microseconds hours-divider="h " microseconds-divider="ms">&lt;/input-duration></code></pre>
+
+
+
+
+    </div>
+
+
+        <h3 class="subsection-title">Extends</h3>
+
+
+
+
+    <ul>
+        <li>HTMLElement</li>
+    </ul>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        <h3 class="subsection-title">Members</h3>
+
+
+
+<h4 class="name" id="myElement"><span class="type-signature"></span>myElement<span class="type-signature"> :ShadowRoot</span></h4>
+
+
+
+
+<div class="description">
+    Shadow root containing this component's controls.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+
+<span class="param-type">ShadowRoot</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line63">line 63</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+<h4 class="name" id="value"><span class="type-signature"></span>value<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    get the input-duration value, pulls values from each input
+so in js use var x = document.querySelector("#bobPrepop").value;
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line105">line 105</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+<h4 class="name" id="value"><span class="type-signature"></span>value<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Sets the duration using the fixed `HH:mm:ss.SSS` format.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line132">line 132</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+<h4 class="name" id=".observedAttributes"><span class="type-signature">(static) </span>observedAttributes<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    HTML attributes that update the component when changed.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line41">line 41</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+        <h3 class="subsection-title">Methods</h3>
+
+
+
+
+
+
+
+    <h4 class="name" id="add0s"><span class="type-signature"></span>add0s<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    eventlistener that adds 0s to preface numbers less than 10 triggered by
+the change event of the input
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line606">line 606</a>
+    </li></ul></dd>
+
+
+
+
+
+    <dt class="tag-see">See:</dt>
+    <dd class="tag-see">
+        <ul>
+            <li>boot()</li>
+        </ul>
+    </dd>
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="addArrowKeyInput"><span class="type-signature"></span>addArrowKeyInput<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    eventlistener that adds arrow key input of values (up/down) and place toggling (left/right) triggered by
+the change event of the input
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line235">line 235</a>
+    </li></ul></dd>
+
+
+
+
+
+    <dt class="tag-see">See:</dt>
+    <dd class="tag-see">
+        <ul>
+            <li>boot()</li>
+        </ul>
+    </dd>
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="addClicksToActivate"><span class="type-signature"></span>addClicksToActivate<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    eventlistener that adds click to activate input of values by the keyboard triggered by
+the click event of the input
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line634">line 634</a>
+    </li></ul></dd>
+
+
+
+
+
+    <dt class="tag-see">See:</dt>
+    <dd class="tag-see">
+        <ul>
+            <li>boot()</li>
+        </ul>
+    </dd>
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="addHTML"><span class="type-signature"></span>addHTML<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    updates inputs-duration marked with shadow html and css
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line302">line 302</a>
+    </li></ul></dd>
+
+
+
+
+
+    <dt class="tag-see">See:</dt>
+    <dd class="tag-see">
+        <ul>
+            <li>boot()</li>
+        </ul>
+    </dd>
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="addNumberLooping"><span class="type-signature"></span>addNumberLooping<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    eventlistener that adds number looping for up and down keys triggered by
+the change event of the input
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line442">line 442</a>
+    </li></ul></dd>
+
+
+
+
+
+    <dt class="tag-see">See:</dt>
+    <dd class="tag-see">
+        <ul>
+            <li>boot()</li>
+        </ul>
+    </dd>
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="addNumericInput"><span class="type-signature"></span>addNumericInput<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    eventlistener that filters number input and advances between fields
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line508">line 508</a>
+    </li></ul></dd>
+
+
+
+
+
+    <dt class="tag-see">See:</dt>
+    <dd class="tag-see">
+        <ul>
+            <li>boot()</li>
+        </ul>
+    </dd>
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="attributeChangedCallback"><span class="type-signature"></span>attributeChangedCallback<span class="signature">(name, oldValue<span class="signature-attributes">nullable</span>, newValue<span class="signature-attributes">nullable</span>)</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Updates the rendered control when an observed attribute changes.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+
+
+<table class="params">
+    <thead>
+    <tr>
+
+        <th>Name</th>
+
+
+        <th>Type</th>
+
+
+        <th>Attributes</th>
+
+
+
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+
+
+        <tr>
+
+                <td class="name"><code>name</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+                <td class="attributes">
+
+
+
+
+
+                </td>
+
+
+
+
+            <td class="description last">Changed attribute name.</td>
+        </tr>
+
+
+
+        <tr>
+
+                <td class="name"><code>oldValue</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+                <td class="attributes">
+
+
+
+                    &lt;nullable><br>
+
+
+
+                </td>
+
+
+
+
+            <td class="description last">Previous attribute value.</td>
+        </tr>
+
+
+
+        <tr>
+
+                <td class="name"><code>newValue</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+                <td class="attributes">
+
+
+
+                    &lt;nullable><br>
+
+
+
+                </td>
+
+
+
+
+            <td class="description last">New attribute value, or null when removed.</td>
+        </tr>
+
+
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line77">line 77</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="boot"><span class="type-signature"></span>boot<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    Called from constructor, sets up the html and event listeners
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line212">line 212</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="disable"><span class="type-signature"></span>disable<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    disables entire control => read-only
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line690">line 690</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="hideHours"><span class="type-signature"></span>hideHours<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Hides the hours field and its adjacent divider.
+Sets the `no-hours` attribute.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line707">line 707</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="hideMicroSeconds"><span class="type-signature"></span>hideMicroSeconds<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Hides the milliseconds field and its adjacent divider or suffix.
+Sets the `no-microseconds` attribute.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line794">line 794</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="hideMinutes"><span class="type-signature"></span>hideMinutes<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Hides the minutes field and its adjacent divider.
+Sets the `no-minutes` attribute.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line736">line 736</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="hideSeconds"><span class="type-signature"></span>hideSeconds<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Hides the seconds field and its adjacent divider.
+Sets the `no-seconds` attribute.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line765">line 765</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="isValidValue"><span class="type-signature"></span>isValidValue<span class="signature">(val)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Checks whether a value follows the supported duration format and ranges.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+
+
+<table class="params">
+    <thead>
+    <tr>
+
+        <th>Name</th>
+
+
+        <th>Type</th>
+
+
+
+
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+
+
+        <tr>
+
+                <td class="name"><code>val</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">*</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">Candidate value.</td>
+        </tr>
+
+
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line159">line 159</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+<div class="param-desc">
+    Whether the value is valid `HH:mm:ss.SSS`.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">boolean</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="noHours"><span class="type-signature"></span>noHours<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Backward-compatible alias for <a href="InputDuration.html#hideHours">InputDuration#hideHours</a>.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line726">line 726</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="noMicroSeconds"><span class="type-signature"></span>noMicroSeconds<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Backward-compatible alias for <a href="InputDuration.html#hideMicroSeconds">InputDuration#hideMicroSeconds</a>.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line813">line 813</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="noMinutes"><span class="type-signature"></span>noMinutes<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Backward-compatible alias for <a href="InputDuration.html#hideMinutes">InputDuration#hideMinutes</a>.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line755">line 755</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="noSeconds"><span class="type-signature"></span>noSeconds<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Backward-compatible alias for <a href="InputDuration.html#hideSeconds">InputDuration#hideSeconds</a>.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line784">line 784</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="nonNumericBugInHTML"><span class="type-signature"></span>nonNumericBugInHTML<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    eventlistener that adds key filtering to stop letters (or other non-numerics) from being input triggered by
+the keypress event of the input
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line647">line 647</a>
+    </li></ul></dd>
+
+
+
+
+
+    <dt class="tag-see">See:</dt>
+    <dd class="tag-see">
+        <ul>
+            <li>boot()</li>
+        </ul>
+    </dd>
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="removeEprop"><span class="type-signature"></span>removeEprop<span class="signature">()</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<div class="description">
+    Stop event propigation from the timeCase up through the DOM so when keys
+are being used they don't affect other controls (like volume on plyr)
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line669">line 669</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="resetInputs"><span class="type-signature"></span>resetInputs<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Resets all duration fields to zero.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line186">line 186</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="setHoursDivider"><span class="type-signature"></span>setHoursDivider<span class="signature">(text)</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Replaces the hours/minutes separator.
+Also available through the `hours-divider` attribute.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+
+
+<table class="params">
+    <thead>
+    <tr>
+
+        <th>Name</th>
+
+
+        <th>Type</th>
+
+
+
+
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+
+
+        <tr>
+
+                <td class="name"><code>text</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">Divider text to display.</td>
+        </tr>
+
+
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line824">line 824</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="setInputValues"><span class="type-signature"></span>setInputValues<span class="signature">(val)</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Copies a validated duration string into the four shadow inputs.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+
+
+<table class="params">
+    <thead>
+    <tr>
+
+        <th>Name</th>
+
+
+        <th>Type</th>
+
+
+
+
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+
+
+        <tr>
+
+                <td class="name"><code>val</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">Valid duration in `HH:mm:ss.SSS` format.</td>
+        </tr>
+
+
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line170">line 170</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="setMicroSecondsDivider"><span class="type-signature"></span>setMicroSecondsDivider<span class="signature">(text)</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Sets a suffix to display after milliseconds.
+Also available through the `microseconds-divider` attribute.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+
+
+<table class="params">
+    <thead>
+    <tr>
+
+        <th>Name</th>
+
+
+        <th>Type</th>
+
+
+
+
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+
+
+        <tr>
+
+                <td class="name"><code>text</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">Suffix text to display.</td>
+        </tr>
+
+
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line857">line 857</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+
+<span class="param-type">void</span>
+
+
+    </dd>
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <h4 class="name" id="setMinutesDivider"><span class="type-signature"></span>setMinutesDivider<span class="signature">(text)</span><span class="type-signature"> &rarr; {void}</span></h4>
+
+
+
+
+
+
+<div class="description">
+    Replaces the minutes/seconds separator.
+Also available through the `minutes-divider` attribute.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+
+
+<table class="params">
+    <thead>
+    <tr>
+
+        <th>Name</th>
+
+
+        <th>Type</th>
+
+
+
+
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+
+
+        <tr>
+
+                <td class="name"><code>text</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">Divider text to display.</td>
+        </tr>
+
+
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line835">line 835</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-<article>
-    <div class="container-overview">
-    
-        
 
-    
+<h5>Returns:</h5>
 
-    
-    <h4 class="name" id="InputDuration"><span class="type-signature"></span>new InputDuration<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
 
 
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
-<div class="description">
-    Class for the Input-Duration webcomponent
-</div>
+<span class="param-type">void</span>
 
 
+    </dd>
+</dl>
 
 
 
@@ -64,105 +3338,88 @@
 
 
 
-<dl class="details">
 
-    
 
-    
+    <h4 class="name" id="setSecondsDivider"><span class="type-signature"></span>setSecondsDivider<span class="signature">(text)</span><span class="type-signature"> &rarr; {void}</span></h4>
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
+<div class="description">
+    Replaces the seconds/milliseconds separator.
+Also available through the `seconds-divider` attribute.
+</div>
 
-    
 
-    
 
-    
 
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line14">line 14</a>
-    </li></ul></dd>
-    
 
-    
 
-    
 
-    
-</dl>
 
+    <h5>Parameters:</h5>
 
 
+<table class="params">
+    <thead>
+    <tr>
 
+        <th>Name</th>
 
 
+        <th>Type</th>
 
 
 
 
 
+        <th class="last">Description</th>
+    </tr>
+    </thead>
 
+    <tbody>
 
 
+        <tr>
 
+                <td class="name"><code>text</code></td>
 
 
+            <td class="type">
 
 
+<span class="param-type">string</span>
 
-    
-    </div>
 
-    
-        <h3 class="subsection-title">Extends</h3>
 
-        
+            </td>
 
 
-    <ul>
-        <li>HTMLElement</li>
-    </ul>
 
 
-    
 
-    
+            <td class="description last">Divider text to display.</td>
+        </tr>
 
-    
 
-    
+    </tbody>
+</table>
 
-    
 
-    
 
-    
-        <h3 class="subsection-title">Members</h3>
 
-        
-            
-<h4 class="name" id="value"><span class="type-signature"></span>value<span class="type-signature"></span></h4>
+
+
+<dl class="details">
+
+
 
 
 
 
-<div class="description">
-    get the input-duration value, pulls values from each input
-so in js use var x = document.querySelector("#bobPrepop").value;
-</div>
 
 
 
@@ -170,62 +3427,35 @@ so in js use var x = document.querySelector("#bobPrepop").value;
 
 
 
-<dl class="details">
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line43">line 43</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line846">line 846</a>
     </li></ul></dd>
-    
-
-    
 
-    
-
-    
-</dl>
 
 
 
 
 
 
-        
-            
-<h4 class="name" id="value"><span class="type-signature"></span>value<span class="type-signature"></span></h4>
+</dl>
 
 
 
 
-<div class="description">
-    set the input-duration value
-so in js use document.querySelector("#bobPrepop").value = "05:05:05.005"
-</div>
 
 
 
@@ -233,73 +3463,49 @@ so in js use document.querySelector("#bobPrepop").value = "05:05:05.005"
 
 
 
-<dl class="details">
 
-    
 
-    
 
-    
 
-    
+<h5>Returns:</h5>
 
-    
 
-    
 
-    
 
-    
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
-    
+<span class="param-type">void</span>
 
-    
 
-    
+    </dd>
+</dl>
 
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line70">line 70</a>
-    </li></ul></dd>
-    
 
-    
 
-    
 
-    
-</dl>
 
 
 
 
 
 
-        
-    
 
-    
-        <h3 class="subsection-title">Methods</h3>
 
-        
-            
+    <h4 class="name" id="showHours"><span class="type-signature"></span>showHours<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
 
-    
 
-    
-    <h4 class="name" id="add0s"><span class="type-signature"></span>add0s<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
 
 
 
 <div class="description">
-    eventlistener that adds 0s to preface numbers less than 10 triggered by
-the change event of the input
+    Shows the hours field and its adjacent divider.
+Removes the `no-hours` attribute.
 </div>
 
 
@@ -316,49 +3522,42 @@ the change event of the input
 
 <dl class="details">
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
+
+
+
+
+
+
+
+
+
+
+
+
+
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line523">line 523</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line717">line 717</a>
     </li></ul></dd>
-    
 
-    
 
-    
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li>boot()</li>
-        </ul>
-    </dd>
-    
 
-    
+
+
+
+
 </dl>
 
 
@@ -375,28 +3574,26 @@ the change event of the input
 
 
 
+<h5>Returns:</h5>
 
 
 
 
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
-        
-            
+<span class="param-type">void</span>
 
-    
 
-    
-    <h4 class="name" id="addArrowKeyInput"><span class="type-signature"></span>addArrowKeyInput<span class="signature">()</span><span class="type-signature"></span></h4>
-    
+    </dd>
+</dl>
 
-    
 
 
 
-<div class="description">
-    eventlistener that adds arrow key input of values (up/down) and place toggling (left/right) triggered by
-the change event of the input
-</div>
 
 
 
@@ -406,56 +3603,32 @@ the change event of the input
 
 
 
+    <h4 class="name" id="showMicroSeconds"><span class="type-signature"></span>showMicroSeconds<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
 
 
 
 
-<dl class="details">
 
-    
 
-    
+<div class="description">
+    Shows the milliseconds field and its adjacent divider or suffix.
+Removes the `no-microseconds` attribute.
+</div>
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line158">line 158</a>
-    </li></ul></dd>
-    
 
-    
 
-    
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li>boot()</li>
-        </ul>
-    </dd>
-    
+<dl class="details">
 
-    
-</dl>
 
 
 
@@ -476,29 +3649,23 @@ the change event of the input
 
 
 
-        
-            
 
-    
 
-    
-    <h4 class="name" id="addClicksToActivate"><span class="type-signature"></span>addClicksToActivate<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
 
 
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line804">line 804</a>
+    </li></ul></dd>
 
-<div class="description">
-    eventlistener that adds click to activate input of values by the keyboard triggered by
-the click event of the input
-</div>
 
 
 
 
 
 
+</dl>
 
 
 
@@ -506,51 +3673,29 @@ the click event of the input
 
 
 
-<dl class="details">
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
+<h5>Returns:</h5>
 
-    
 
-    
 
-    
 
-    
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line551">line 551</a>
-    </li></ul></dd>
-    
+<span class="param-type">void</span>
 
-    
 
-    
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li>boot()</li>
-        </ul>
     </dd>
-    
-
-    
 </dl>
 
 
@@ -565,29 +3710,31 @@ the click event of the input
 
 
 
+    <h4 class="name" id="showMinutes"><span class="type-signature"></span>showMinutes<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
 
 
 
 
 
 
+<div class="description">
+    Shows the minutes field and its adjacent divider.
+Removes the `no-minutes` attribute.
+</div>
 
-        
-            
 
-    
 
-    
-    <h4 class="name" id="addHTML"><span class="type-signature"></span>addHTML<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
 
 
 
-<div class="description">
-    updates inputs-duration marked with shadow html and css
-</div>
+
+
+
+
+
+
+<dl class="details">
 
 
 
@@ -601,51 +3748,30 @@ the click event of the input
 
 
 
-<dl class="details">
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line229">line 229</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line746">line 746</a>
     </li></ul></dd>
-    
 
-    
 
-    
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li>boot()</li>
-        </ul>
-    </dd>
-    
 
-    
+
+
+
+
 </dl>
 
 
@@ -662,28 +3788,26 @@ the click event of the input
 
 
 
+<h5>Returns:</h5>
 
 
 
 
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
-        
-            
+<span class="param-type">void</span>
 
-    
 
-    
-    <h4 class="name" id="addNumberLooping"><span class="type-signature"></span>addNumberLooping<span class="signature">()</span><span class="type-signature"></span></h4>
-    
+    </dd>
+</dl>
 
-    
 
 
 
-<div class="description">
-    eventlistener that adds number looping for up and down keys triggered by
-the change event of the input
-</div>
 
 
 
@@ -693,56 +3817,32 @@ the change event of the input
 
 
 
+    <h4 class="name" id="showSeconds"><span class="type-signature"></span>showSeconds<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
 
 
 
 
-<dl class="details">
 
-    
 
-    
+<div class="description">
+    Shows the seconds field and its adjacent divider.
+Removes the `no-seconds` attribute.
+</div>
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line346">line 346</a>
-    </li></ul></dd>
-    
 
-    
 
-    
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li>boot()</li>
-        </ul>
-    </dd>
-    
+<dl class="details">
 
-    
-</dl>
 
 
 
@@ -763,28 +3863,23 @@ the change event of the input
 
 
 
-        
-            
 
-    
 
-    
-    <h4 class="name" id="addNumericInput"><span class="type-signature"></span>addNumericInput<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
 
 
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line775">line 775</a>
+    </li></ul></dd>
 
-<div class="description">
-    eventlistener that adds number input for keyed values triggered by the keyup event
-</div>
 
 
 
 
 
 
+</dl>
 
 
 
@@ -792,51 +3887,29 @@ the change event of the input
 
 
 
-<dl class="details">
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
+<h5>Returns:</h5>
 
-    
 
-    
 
-    
 
-    
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line412">line 412</a>
-    </li></ul></dd>
-    
+<span class="param-type">void</span>
 
-    
 
-    
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li>boot()</li>
-        </ul>
     </dd>
-    
-
-    
 </dl>
 
 
@@ -851,29 +3924,30 @@ the change event of the input
 
 
 
+    <h4 class="name" id="updateDividers"><span class="type-signature"></span>updateDividers<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
 
 
 
 
 
 
+<div class="description">
+    Synchronizes divider text with the corresponding divider attributes.
+</div>
 
-        
-            
 
-    
 
-    
-    <h4 class="name" id="boot"><span class="type-signature"></span>boot<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
 
 
 
-<div class="description">
-    Called from constructor, sets up the html and event listeners
-</div>
+
+
+
+
+
+
+<dl class="details">
 
 
 
@@ -887,49 +3961,31 @@ the change event of the input
 
 
 
-<dl class="details">
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line135">line 135</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line897">line 897</a>
     </li></ul></dd>
-    
 
-    
 
-    
 
-    
-</dl>
 
 
 
 
+</dl>
 
 
 
@@ -945,23 +4001,22 @@ the change event of the input
 
 
 
+<h5>Returns:</h5>
 
-        
-            
 
-    
 
-    
-    <h4 class="name" id="disable"><span class="type-signature"></span>disable<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
+<span class="param-type">void</span>
 
 
-<div class="description">
-    disables entire control => read-only
-</div>
+    </dd>
+</dl>
 
 
 
@@ -975,48 +4030,30 @@ the change event of the input
 
 
 
-<dl class="details">
+    <h4 class="name" id="updateVisibleFields"><span class="type-signature"></span>updateVisibleFields<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></h4>
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
+<div class="description">
+    Synchronizes field and divider visibility with the `no-*` attributes.
+</div>
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line602">line 602</a>
-    </li></ul></dd>
-    
 
-    
 
-    
 
-    
-</dl>
 
 
 
+<dl class="details">
 
 
 
@@ -1034,25 +4071,19 @@ the change event of the input
 
 
 
-        
-            
 
-    
 
-    
-    <h4 class="name" id="noHours"><span class="type-signature"></span>noHours<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
 
 
 
-<div class="description">
-    removes the hours, so the display is mm:ss.uuu
-</div>
 
 
 
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line866">line 866</a>
+    </li></ul></dd>
 
 
 
@@ -1060,51 +4091,38 @@ the change event of the input
 
 
 
+</dl>
 
 
 
-<dl class="details">
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
+<h5>Returns:</h5>
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line618">line 618</a>
-    </li></ul></dd>
-    
 
-    
 
-    
 
-    
-</dl>
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
+<span class="param-type">void</span>
 
 
+    </dd>
+</dl>
 
 
 
@@ -1118,95 +4136,79 @@ the change event of the input
 
 
 
+    <h4 class="name" id="warnInvalidValue"><span class="type-signature"></span>warnInvalidValue<span class="signature">(val)</span><span class="type-signature"> &rarr; {void}</span></h4>
 
 
 
 
-        
-            
 
-    
 
-    
-    <h4 class="name" id="nonNumericBugInHTML"><span class="type-signature"></span>nonNumericBugInHTML<span class="signature">()</span><span class="type-signature"></span></h4>
-    
+<div class="description">
+    Reports a value that does not match the supported duration format.
+</div>
 
-    
 
 
 
-<div class="description">
-    eventlistener that adds key filtering to stop letters (or other non-numerics) from being input triggered by
-the keypress event of the input
-</div>
 
 
 
 
 
+    <h5>Parameters:</h5>
 
 
+<table class="params">
+    <thead>
+    <tr>
 
+        <th>Name</th>
 
 
+        <th>Type</th>
 
 
 
-<dl class="details">
 
-    
 
-    
+        <th class="last">Description</th>
+    </tr>
+    </thead>
 
-    
+    <tbody>
 
-    
 
-    
+        <tr>
 
-    
+                <td class="name"><code>val</code></td>
 
-    
 
-    
+            <td class="type">
 
-    
 
-    
+<span class="param-type">*</span>
 
-    
 
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line564">line 564</a>
-    </li></ul></dd>
-    
+            </td>
+
 
-    
 
-    
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li>boot()</li>
-        </ul>
-    </dd>
-    
 
-    
-</dl>
 
+            <td class="description last">Rejected value.</td>
+        </tr>
 
 
+    </tbody>
+</table>
 
 
 
 
 
 
+<dl class="details">
 
 
 
@@ -1218,23 +4220,12 @@ the keypress event of the input
 
 
 
-        
-            
 
-    
 
-    
-    <h4 class="name" id="removeEprop"><span class="type-signature"></span>removeEprop<span class="signature">()</span><span class="type-signature"></span></h4>
-    
 
-    
 
 
 
-<div class="description">
-    Stop event propigation from the timeCase up through the DOM so when keys 
-are being used they don't affect other controls (like volume on plyr)
-</div>
 
 
 
@@ -1244,58 +4235,49 @@ are being used they don't affect other controls (like volume on plyr)
 
 
 
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line202">line 202</a>
+    </li></ul></dd>
 
 
 
 
-<dl class="details">
 
-    
 
-    
 
-    
+</dl>
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
 
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line586">line 586</a>
-    </li></ul></dd>
-    
 
-    
 
-    
 
-    
-</dl>
 
 
+<h5>Returns:</h5>
 
 
 
 
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
 
+<span class="param-type">void</span>
 
 
+    </dd>
+</dl>
 
 
 
@@ -1307,12 +4289,8 @@ are being used they don't affect other controls (like volume on plyr)
 
 
 
-        
-    
 
-    
 
-    
 </article>
 
 </section>
@@ -1329,7 +4307,7 @@ are being used they don't affect other controls (like volume on plyr)
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Fri Sep 29 2023 11:02:59 GMT+0000 (GMT)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.5</a> on Thu Nov 05 2026 14:15:36 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>