input-duration 2.2.1 → 2.2.3

package/README.md

@@ -208,7 +208,7 @@ Without packaging:
 
 <script type="module">
 
-import chronlyhms from 'https://cdn.jsdelivr.net/npm/input-duration/+esm'
+import id from 'https://cdn.jsdelivr.net/npm/input-duration/+esm'
         
  </script>
   
@@ -266,7 +266,7 @@ _For more documentation, please refer to the jscocs on  [input-duration Docs](ht
     - [ ] Spanish
 - [ ] min and max values (sorry for the moment you'll have to do those yourself in js)
 
-See the [open issues](https://github.com/StephanLuis/chronlyhms/issues) for a full list of proposed features (and known issues).
+See the [open issues](https://github.com/StephanLuis/input-duration/issues) for a full list of proposed features (and known issues).
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -280,7 +280,7 @@ See the [open issues](https://github.com/StephanLuis/chronlyhms/issues) for a fu
 ![TestStatusDIY](https://img.shields.io/static/v1?label=osX:Safari&message=Pass&color=<COLOR>&style=for-the-badge)
 ![TestStatusDIY](https://img.shields.io/static/v1?label=osX:Chrome&message=Pass&color=<COLOR>&style=for-the-badge)
 
-[Tests & Live Status](https://github.com/StephanLuis/BrowserStackSelenium/blob/main/chronlyHMStests/README.md)
+[Tests & Live Status](https://github.com/StephanLuis/BrowserStackSelenium/blob/main/input-duration/README.md)
 
 
 <!-- CONTRIBUTING -->
@@ -304,7 +304,7 @@ Don't forget to give the project a star! Thanks again!
 <!-- LICENSE -->
 ## License
 
-Distributed under the MIT License. See [`LICENSE.txt`](https://github.com/StephanLuis/chronlyhms/blob/main/LICENSE)  for more information.
+Distributed under the MIT License. See [`LICENSE.txt`](https://github.com/StephanLuis/input-duration/blob/main/LICENSE)  for more information.
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -315,7 +315,7 @@ Distributed under the MIT License. See [`LICENSE.txt`](https://github.com/Stepha
 
 Stephan Luis - stephan@learnsense.org
 
-Project Link: [https://github.com/StephanLuis/chronlyhms](https://github.com/StephanLuis/chronlyhms)
+Project Link: [https://github.com/StephanLuis/input-duration](https://github.com/StephanLuis/input-duration)
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -342,20 +342,20 @@ Resources I've found helpful and would like to give credit to:
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 
 
-[contributors-shield]: https://img.shields.io/github/contributors/StephanLuis/chronlyhms?style=for-the-badge
-[contributors-url]: https://github.com/StephanLuis/chronlyhms/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/StephanLuis/chronlyhms?style=for-the-badge
-[forks-url]: https://github.com/StephanLuis/chronlyhms/network/members
-[stars-shield]: https://img.shields.io/github/stars/StephanLuis/chronlyhms?style=for-the-badge
-[stars-url]: https://github.com/StephanLuis/chronlyhms/stargazers
-[issues-shield]: https://img.shields.io/github/issues/StephanLuis/chronlyhms?style=for-the-badge
-[issues-url]: https://github.com/StephanLuis/chronlyhms/issues
-[license-shield]: https://img.shields.io/github/license/StephanLuis/chronlyhms?style=for-the-badge
-[license-url]: https://github.com/StephanLuis/chronlyhms/blob/main/LICENSE
-[reposize-shield]: https://img.shields.io/github/repo-size/stephanluis/chronlyhms?style=for-the-badge
-[reposize-url]: https://github.com/StephanLuis/chronlyhms
+[contributors-shield]: https://img.shields.io/github/contributors/StephanLuis/input-duration?style=for-the-badge
+[contributors-url]: https://github.com/StephanLuis/input-duration/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/StephanLuis/input-duration?style=for-the-badge
+[forks-url]: https://github.com/StephanLuis/input-duration/network/members
+[stars-shield]: https://img.shields.io/github/stars/StephanLuis/input-duration?style=for-the-badge
+[stars-url]: https://github.com/StephanLuis/input-duration/stargazers
+[issues-shield]: https://img.shields.io/github/issues/StephanLuis/input-duration?style=for-the-badge
+[issues-url]: https://github.com/StephanLuis/input-duration/issues
+[license-shield]: https://img.shields.io/github/license/StephanLuis/input-duration?style=for-the-badge
+[license-url]: https://github.com/StephanLuis/input-duration/blob/main/LICENSE
+[reposize-shield]: https://img.shields.io/github/repo-size/stephanluis/input-duration?style=for-the-badge
+[reposize-url]: https://github.com/StephanLuis/input-duration
 [product-screenshot]: images/screenshot.png
-[npm-bundle-size]: https://img.shields.io/bundlephobia/minzip/chronlyhms?style=for-the-badge
+[npm-bundle-size]: https://img.shields.io/bundlephobia/minzip/input-duration?style=for-the-badge
 [teststatus-shield]: https://img.shields.io/badge/dynamic/json?url=https://app.saucelabs.com/u/stephanluis&label=Sauce%20Labs%20Status&color=brightgreen&style=for-the-badge&query=passing
 
 

package/docs/InputDuration.html

@@ -93,7 +93,7 @@
     
     <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#line12">line 12</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line14">line 14</a>
     </li></ul></dd>
     
 
@@ -199,7 +199,7 @@ so in js use var x = document.querySelector("#bobPrepop").value;
     
     <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>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line43">line 43</a>
     </li></ul></dd>
     
 
@@ -262,7 +262,7 @@ so in js use document.querySelector("#bobPrepop").value = "05:05:05.005"
     
     <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#line68">line 68</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line70">line 70</a>
     </li></ul></dd>
     
 
@@ -343,7 +343,7 @@ the change event of the input
     
     <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#line520">line 520</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line523">line 523</a>
     </li></ul></dd>
     
 
@@ -439,7 +439,7 @@ the change event of the input
     
     <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#line155">line 155</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line158">line 158</a>
     </li></ul></dd>
     
 
@@ -535,7 +535,7 @@ the click event of the input
     
     <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#line548">line 548</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line551">line 551</a>
     </li></ul></dd>
     
 
@@ -630,7 +630,7 @@ the click event of the input
     
     <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#line226">line 226</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line229">line 229</a>
     </li></ul></dd>
     
 
@@ -726,7 +726,7 @@ the change event of the input
     
     <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#line343">line 343</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line346">line 346</a>
     </li></ul></dd>
     
 
@@ -821,7 +821,7 @@ the change event of the input
     
     <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#line409">line 409</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line412">line 412</a>
     </li></ul></dd>
     
 
@@ -916,7 +916,7 @@ the change event of the input
     
     <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#line133">line 133</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line135">line 135</a>
     </li></ul></dd>
     
 
@@ -1004,7 +1004,7 @@ the change event of the input
     
     <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#line585">line 585</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line602">line 602</a>
     </li></ul></dd>
     
 
@@ -1092,7 +1092,7 @@ the change event of the input
     
     <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#line601">line 601</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line618">line 618</a>
     </li></ul></dd>
     
 
@@ -1181,7 +1181,7 @@ the keypress event of the input
     
     <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#line561">line 561</a>
+        <a href="index.js.html">index.js</a>, <a href="index.js.html#line564">line 564</a>
     </li></ul></dd>
     
 
@@ -1218,6 +1218,95 @@ 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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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#line586">line 586</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         
     
 
@@ -1240,7 +1329,7 @@ the keypress event of the input
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 16:38:37 GMT+0000 (GMT)
+    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)
 </footer>
 
 <script> prettyPrint(); </script>

package/docs/index.html

@@ -168,7 +168,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 16:38:37 GMT+0000 (GMT)
+    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)
 </footer>
 
 <script> prettyPrint(); </script>

package/docs/index.js.html

@@ -27,6 +27,8 @@
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>/**
+ * This is jsdoc 'auto' documentation see https://jsdoc.app/
+ * 
  * @fileoverview INPUT-DURATION
  * @file INPUT-DURATION 
  * @author Stephan Luis
@@ -169,6 +171,7 @@ class InputDuration extends HTMLElement {
         this.addNumericInput();
         this.addClicksToActivate();
         this.nonNumericBugInHTML();
+        this.removeEprop();
 
     }
 
@@ -260,7 +263,7 @@ class InputDuration extends HTMLElement {
         var template = document.createElement('template');
 
         template.innerHTML = `
-          &lt;input id="inShadow" type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
+          &lt;input type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
           &lt;span class="bds-h">:&lt;/span>
           &lt;input type="number" class="sM D2 ts_digit" name="startMinutes" data-tp="2" min="-1" max="60" value="00">
           &lt;span class="bds-m">:&lt;/span>
@@ -602,7 +605,21 @@ class InputDuration extends HTMLElement {
             }));
     }
 
+    /**
+     * 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)
+     * @method
+     */
+
+    removeEprop()   {
+        
+        document.querySelector('input-duration').shadowRoot.querySelector('.timeCase')
+        .addEventListener('keydown', function (event) { event.stopPropagation();}); 
 
+    }
+
+
+    
     // formatting and behaviour options
 
     /**
@@ -662,7 +679,7 @@ export default customElements.define('input-duration', InputDuration);
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 16:38:37 GMT+0000 (GMT)
+    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)
 </footer>
 
 <script> prettyPrint(); </script>

package/index.js

@@ -1,4 +1,9 @@
 /**
+ * This is jsdoc 'auto' documentation see https://jsdoc.app/
+ * npm install -g jsdoc
+ * jsdoc index.js -d ./docs/
+ * 
+ * 
  * @fileoverview INPUT-DURATION
  * @file INPUT-DURATION 
  * @author Stephan Luis
@@ -233,7 +238,7 @@ class InputDuration extends HTMLElement {
         var template = document.createElement('template');
 
         template.innerHTML = `
-          <input id="inShadow" type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
+          <input type="number" class="sH D2 ts_digit" name="startHours" data-tp="1" min="-1" max="100" value="00" >
           <span class="bds-h">:</span>
           <input type="number" class="sM D2 ts_digit" name="startMinutes" data-tp="2" min="-1" max="60" value="00">
           <span class="bds-m">:</span>
@@ -583,8 +588,8 @@ class InputDuration extends HTMLElement {
 
     removeEprop()   {
         
-        document.querySelector('input-duration').shadowRoot.querySelector('.timeCase')
-        .addEventListener('keydown', function (event) { event.stopPropagation();}); 
+        document.querySelectorAll('input-duration').forEach(x => x.shadowRoot.querySelector('.timeCase')
+        .addEventListener('keydown', function (event) { event.stopPropagation();})); 
 
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "input-duration",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "author": "Stephan Luis <stephan@learnsense.org>",
   "description": "This is the 'Input-Duration'! It is a webcomponent that provides an hour, minute, second, and millisecond control for HTML5.",
   "browser": "indexjs",