npm - input-duration - Versions diffs - 2.2.27 → 3.0.1 - Mend

input-duration 2.2.27 → 3.0.1

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/.github/workflows/manualTriggersEcho0.yml +1 -1
package/README.md +41 -68
package/docs/index.html +260 -171
package/docs/index.js.html +1 -1
package/index.js +142 -139
package/package.json +16 -6
package/.github/workflows/commitToBSEndToEnd.yml +0 -51
package/.github/workflows/devVersionAndRelease.yml +0 -66
package/.github/workflows/npm-bump.yml +0 -47

package/.github/workflows/manualTriggersEcho0.yml CHANGED Viewed

@@ -1,7 +1,7 @@
 # manually triggered
 # triggers specific workflow in curl enpoint (that workflow needs workflow_disptach)
-name: ManualTrigger Echo0
+name: ManualTrigger0
 # Controls when the action will run. Workflow runs when manually triggered using the UI
 # or API.

package/README.md CHANGED Viewed

@@ -4,6 +4,8 @@
 *** Thanks for checking out the Best-README-Template. If you have a suggestion
 *** that would make this better, please fork the repo and create a pull request
 *** or simply open an issue with the tag "enhancement".
+*** Don't forget to give the project a star!
+*** Thanks again! Now go create something AMAZING! :D
 -->
@@ -17,16 +19,6 @@
 *** https://www.markdownguide.org/basic-syntax/#reference-style-links
 -->
-Live BrowserStack Test Results:
-![example workflow](https://github.com/StephanLuis/BrowserStackSelenium/workflows/curlEcho1/badge.svg)
-![ContinuousIntegration](https://github.com/StephanLuis/BrowserStackSelenium/workflows/InputDurationTests/badge.svg)
-- this can be updated with https://shields.io/
-Remove these:
 [![npm bundle size][npm-bundle-size]][npm-bundle-size]
 [![Contributors][contributors-shield]][contributors-url]
 [![Forks][forks-shield]][forks-url]
@@ -47,15 +39,22 @@ Remove these:
   <a href="https://github.com/StephanLuis/input-duration">
-   <h3 align="center">Input-Duration -- The best 'Time Only' Input (Vanilla JS)</h3> <img src="readme/logo.svg" alt="Logo" width="90" height="90">
+   <h3 align="center">Input-Duration -- JavaScript duration input</h3> <img src="readme/logo.svg" alt="Logo" width="90" height="90">
   </a>
-  <p align="center">A vanilla JS boosted input that works on Safari in very close imitation of a time input on Chrome <br>... only better. </p>
+  <p align="center">A compact duration input with a fixed, locale-independent display for hours, minutes, seconds, and milliseconds.</p>
 </div>
-'Time Only' means that this control is for time as a unit, or a duration, like for count down timers.  Not for time of day nor date on a calendar, so no unwanted AM/PM conversions on Safari, no unwanted date-time selectors.  Just time up to 999 hrs and down to 1 millisecond.<br>
+Use `input-duration` when users need to enter a duration rather than a time of day: for example, a countdown, elapsed-time limit, or media offset. Its displayed value uses `HH:mm:ss.SSS` on every locale, without a locale-specific AM/PM presentation, and supports durations greater than 24 hours (currently up to 99 hours) with millisecond values, such as `30:00:00.125`.
+HTML's built-in `<input type="time">` is for choosing a time of day, not entering elapsed time. HTML does not provide a native duration input with a fixed `HH:mm:ss.SSS` format or support for values over 24 hours; this web component fills that gap.
+The component supplies its own segmented layout instead of the browser's native time-picker UI, so the displayed format does not change with browser or locale. It is built from native number inputs, however, so details such as the on-screen keyboard and interaction can still vary by device and browser; this is consistency of the value's presentation, not a guarantee of pixel-identical rendering. Milliseconds can be entered as three digits; the input's step controls increment in 10 ms intervals.
+The control's styles are scoped inside its Shadow DOM, so global styles and resets from Tailwind or other CSS libraries do not leak into its internal layout. The control inherits its font and text color from its surrounding page.
+<br>
 <p>
 <div>
   </div>
@@ -65,6 +64,8 @@ Remove these:
 </a> ·
       <a href="https://6mxpg2.csb.app/" target="_blank">Demo</a>
     ·
+  <a href="https://stephanluis.github.io/input-duration/" target="_blank">Live demo</a>
+    ·
   <a href="https://stephanluis.github.io/input-duration/" target="_blank">Docs</a>
   ·
     <a href="https://github.com/StephanLuis/input-duration/issues">Bugs</a>
@@ -72,17 +73,28 @@ Remove these:
     <a href="https://github.com/StephanLuis/input-duration/issues">Request Feature</a>
   </p>
   </div>
-  Ok, what about mobile??  Yep, input-duration works on all popular operating system / browser combinations.
-<br/>
 </div>
 <br/>
-<h2>Touch and Keyboard Timepicker</h2>
+<h2>Fixed-format duration input</h2>
+`input-duration` is intended for touch and keyboard use. The HTML structure and displayed field order are controlled by the component; device-specific input and keyboard behavior remains native to the browser.
-|OS(mobile)       | Browser       | | OS(laptop)  | Browser   |
-|-----------------|----------------|--|-------------|-----------|
-| Android  | Chrome   | |Windows  10, 11   |  Chrome, Edge  |
-| iOS      | Safari, Chrome | |OsX             | Safari, Chrome |
+<h2>Bob is rescued by INPUT-DURATION!</h2>
+The goal is a small JavaScript duration input that gives countdowns and elapsed-time entry a predictable displayed format across browser and locale settings, while retaining native numeric inputs for editing.
+<i>Does this lose any functionality?</i> No! `document.querySelector('#bob').value` has a getter and setter, so values can be set and retrieved from JavaScript or the HTML attribute.
+<img src="readme/safariBad.png" alt="Example comparing a native time input with input-duration" width="80%"/>
+Native time inputs are useful when the user is choosing a time on a clock. A duration is different: `30:00:00.125` means thirty hours, not 6 AM the next day. Keeping those concepts separate avoids date, timezone, and 12/24-hour display concerns when collecting a duration.
+Here's why:
+* Enter durations independently of a calendar date or time of day.
+* Keep a fixed `HH:mm:ss.SSS` display regardless of locale-specific clock conventions.
+* Represent durations beyond 24 hours (up to 99 hours in the current implementation).
+* Read and set the value from JavaScript using the component's `.value` property.
 <!-- TABLE OF CONTENTS -->
 <details>
@@ -103,7 +115,7 @@ Remove these:
     </li>
     <li><a href="#usage">Usage</a></li>
     <li><a href="#roadmap">Roadmap</a></li>
-     <li><a href="#teststatus">Test Status</a></li>
+     <li><a href="#cross-browser-testing">Cross-browser testing</a></li>
     <li><a href="#contributing">Contributing</a></li>
     <li><a href="#license">License</a></li>
     <li><a href="#contact">Contact</a></li>
@@ -115,50 +127,16 @@ Remove these:
 <!-- ABOUT THE PROJECT -->
 ## About The Project
-Time inputs <input type='time'> are updated by browsers in unwanted ways!   Safari on desktop adds AM/PM if the user is in the USA and on mobile the cool scroll time selector does not allow fractions of a second.  The best html5 option doesn't cut it, sadly, so input-duration was designed and buit for a consistant UX no matter the browser, OS, or location settings.
+HTML's `<input type="time">` represents a time of day. Browsers may localize its visible control (for example, showing a 12-hour clock with AM/PM), even though its value is standardized. It also cannot represent a duration longer than a day.
+`input-duration` is for duration values, not appointments or clock times. Its separate numeric fields present hours, minutes, seconds, and milliseconds in a fixed `HH:mm:ss.SSS` format. This avoids locale-dependent time-of-day presentation while allowing durations beyond 24 hours and millisecond values in a compact control.
 <!-- [![Product Name Screen Shot][product-screenshot]](https://example.com) -->
 <img src="readme/codeDrawing.png" alt="drawing" width="60%"/>
 <!-- [![HTML Screen Shot][html-screenshot]](https://example.com) -->
-*note input-duration needs closing tag!
-<h3> Bob is rescued by INPUT-DURATION! </h3>
-The objective is a minimised javascript plugin that reproduces the behaviour of the input type=time on Chrome.  This way at least two of the major browsers are supported, Safari and Chrome, on desktop and mobile operating systems.
-<i>Does this loose any functionality?</i>  No!  document.querySelector('#bob').value  has a getter and setter!  So values can be set and retrieved by ID or attribute in HTML.
-<img src="readme/safariBad.png" alt="drawing" width="80%"/>
-<!-- [![Safari Screen Shot][safari-screenshot]](https://example.com) -->
-Yes! It seems CRAZY in 2022 that there is not a native 'time only' input for HTML.  What I mean is there is no user input control for time rendered independantly of date or time of day.  Yea, crazy, but now input-duration is a javascript plugin that creates a UX input control for a value of time simply as hours, minutes, seconds --<b>only</b>! <br> Ever thought, why is it difficult to 'code' a countdown timer? Why can't it be done with one control? Just look at google's timer and other coundown timers! All use multiple inputs, usually designed for integers.
-The very worst is Safari on desktop and mobile, which undermine any input type=time coding efforts and update the input based on OS settings!  Shouldn't a user be able to 'scientifically' specify a period of time with one control?  <br>  Maybe it's just me, but the chrome / google timer is 14 separate elements ... those guys must be paid by the hour.   The closest HTML5 input type- time when configured with UX for hours to millisecs is very finicky and is rendered differently on Chrome than Safari. <b>Mobile</b> is different from laptop<br> ... so I've simplified that!
-There were a few plugins that remediated the lack of continuity, but even those controls treated time as a date (ex 24hr max).  So it seems the current state is the most relable UX is multi input type number.  The worst example is the Google countdown timer.  That way is wrong because time is a basic unit that should be separate from calendar complexities.  That got me thinking, why isn't there an input control for it implemented across browsers??  I needed one, so coded input-duration.
-Here's why:
-* Time is hours minutes and seconds (and millisecs) and needn't be associated with part of a day or a date
-* The date association breaks UX and is varied with browser implementation
-* I found no other crossbrowser solution
-* I thought this would be a great open source project
-* End use of number inputs (standard hack) for use with time
-Of course, this is functional but in it's infancy.  Maybe, with some contribution this is a project that can inspire change to the HTML spec.
-Feel free to vote for WhatWG inclusion of a into the HTML spec! (link comming soon)
 <p align="right">(<a href="#top">back to top</a>)</p>
@@ -279,14 +257,9 @@ See the [open issues](https://github.com/StephanLuis/input-duration/issues) for
 <p align="right">(<a href="#top">back to top</a>)</p>
 <!-- TESTSTATUS -->
-## Teststatus
+## Cross-browser testing
-![TestStatusDIY](https://img.shields.io/static/v1?label=Android:Chrome&message=Pass&color=<COLOR>&style=for-the-badge)
-![TestStatusDIY](https://img.shields.io/static/v1?label=iOS:Safari&message=Pass&color=<COLOR>&style=for-the-badge)
-![TestStatusDIY](https://img.shields.io/static/v1?label=iOS:Chrome&message=Pass&color=<COLOR>&style=for-the-badge)
-![TestStatusDIY](https://img.shields.io/static/v1?label=Windows:Chrome&message=Pass&color=<COLOR>&style=for-the-badge)
-![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)
+The browser and device results linked below are historical and should not be treated as verification against current browser versions. The local regression suite checks component behavior, but current cross-browser rendering and interaction still need to be tested.
 [Tests & Live Status](https://github.com/StephanLuis/BrowserStackSelenium/blob/main/input-duration/README.md)
@@ -296,6 +269,8 @@ See the [open issues](https://github.com/StephanLuis/input-duration/issues) for
 Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Run the local regression tests with `npm test`.
 If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
 Don't forget to give the project a star! Thanks again!
@@ -350,8 +325,6 @@ 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/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

package/docs/index.html CHANGED Viewed

@@ -1,177 +1,266 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>JSDoc: Home</title>
-    <script src="scripts/prettify/prettify.js"> </script>
-    <script src="scripts/prettify/lang-css.js"> </script>
-    <!--[if lt IE 9]>
-      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
-    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="A tiny demo of why a time-of-day input is not the same thing as a duration input.">
+    <title>Time is not a duration — input-duration</title>
+    <style>
+        :root {
+            color-scheme: light;
+            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+            color: #17201c;
+            background: #f5f7f3;
+            font-synthesis: none;
+            text-rendering: optimizeLegibility;
+            --green: #176b4a;
+            --muted: #64716a;
+            --line: #dce4dd;
+        }
+        * {
+            box-sizing: border-box;
+        }
+        body {
+            min-width: 320px;
+            margin: 0;
+        }
+        main {
+            width: min(100% - 40px, 960px);
+            margin: 0 auto;
+            padding: 48px 0 32px;
+        }
+        header {
+            max-width: 720px;
+            margin: 0 auto 34px;
+            text-align: center;
+        }
+        .eyebrow {
+            margin: 0 0 14px;
+            color: var(--green);
+            font-size: .78rem;
+            font-weight: 750;
+            letter-spacing: .12em;
+            text-transform: uppercase;
+        }
+        h1 {
+            margin: 0;
+            font-size: clamp(2.35rem, 7vw, 4.5rem);
+            letter-spacing: -.065em;
+            line-height: 1.02;
+        }
+        .intro {
+            max-width: 610px;
+            margin: 20px auto 0;
+            color: var(--muted);
+            font-size: 1.08rem;
+            line-height: 1.6;
+        }
+        .scenario {
+            display: inline-block;
+            margin-top: 20px;
+            padding: 10px 15px;
+            border: 1px solid #d6e8dc;
+            border-radius: 999px;
+            background: #eaf4ed;
+            color: #25513b;
+            font-size: .95rem;
+            font-weight: 650;
+        }
+        .comparison {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 18px;
+        }
+        article {
+            display: flex;
+            min-height: 300px;
+            flex-direction: column;
+            align-items: flex-start;
+            padding: 26px;
+            border: 1px solid var(--line);
+            border-radius: 18px;
+            background: #fff;
+            box-shadow: 0 12px 32px rgb(23 32 28 / 5%);
+        }
+        article.duration {
+            border-color: #b7d9c4;
+            box-shadow: 0 12px 32px rgb(23 107 74 / 9%);
+        }
+        .card-label {
+            margin: 0 0 8px;
+            color: var(--muted);
+            font-size: .76rem;
+            font-weight: 750;
+            letter-spacing: .1em;
+            text-transform: uppercase;
+        }
+        h2 {
+            margin: 0;
+            font-size: 1.45rem;
+            letter-spacing: -.03em;
+        }
+        .card-copy {
+            min-height: 52px;
+            margin: 10px 0 20px;
+            color: var(--muted);
+            line-height: 1.5;
+        }
+        .field {
+            display: flex;
+            min-height: 54px;
+            align-items: center;
+            margin: 0 0 18px;
+            padding: 8px 12px;
+            border: 1px solid #bdc9c0;
+            border-radius: 10px;
+            background: #fff;
+        }
+        input[type="time"] {
+            width: 100%;
+            border: 0;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            font-size: 1.2rem;
+        }
+        input[type="time"]:focus-visible {
+            outline: 2px solid var(--green);
+            outline-offset: 3px;
+        }
+        input-duration {
+            display: block;
+            max-width: 100%;
+            font-size: 1.2rem;
+        }
+        .result {
+            margin: auto 0 0;
+            color: #33463a;
+            font-size: .94rem;
+            line-height: 1.5;
+        }
+        .result strong {
+            color: #a23e2c;
+        }
+        .duration .result strong {
+            color: var(--green);
+        }
+        footer {
+            margin-top: 28px;
+            color: var(--muted);
+            font-size: .92rem;
+            line-height: 1.6;
+            text-align: center;
+        }
+        a {
+            color: var(--green);
+            font-weight: 650;
+        }
+        @media (max-width: 650px) {
+            main {
+                width: min(100% - 28px, 480px);
+                padding-top: 34px;
+            }
+            .comparison {
+                grid-template-columns: 1fr;
+            }
+            article {
+                min-height: 270px;
+                padding: 22px;
+            }
+        }
+    </style>
 </head>
 <body>
-<div id="main">
-    <h1 class="page-title">Home</h1>
-    <h3> </h3>
-<section>
-<header>
-        <h2>index.js</h2>
-</header>
-<article>
-    <div class="container-overview">
-            <div class="description">INPUT-DURATION</div>
-<dl class="details">
-    <dt class="tag-author">Author:</dt>
-    <dd class="tag-author">
-        <ul>
-            <li>Stephan Luis</li>
-        </ul>
-    </dd>
-    <dt class="tag-copyright">Copyright:</dt>
-    <dd class="tag-copyright"><ul class="dummy"><li>MIT License, Copyright (c) 2022</li></ul></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#line1">line 1</a>
-    </li></ul></dd>
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li><a href="https://www.npmjs.com/package/input-duration">NPM input-duration</a></li>
-            <li><a href="https://github.com/StephanLuis/input-duration">GitHub input-duration</a></li>
-        </ul>
-    </dd>
-</dl>
-    </div>
-</article>
-</section>
-</div>
-<nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="InputDuration.html">InputDuration</a></li></ul>
-</nav>
-<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)
-</footer>
-<script> prettyPrint(); </script>
-<script src="scripts/linenumber.js"> </script>
+    <main>
+        <header>
+            <p class="eyebrow">A small input, a very different question</p>
+            <h1>Time is not a duration.</h1>
+            <p class="intro">You need to set a maintenance window. It’ll take 30 hours. Surely a time picker can handle that?</p>
+            <p class="scenario">The task: run for 30 hours</p>
+        </header>
+        <section class="comparison" aria-label="Compare a time-of-day input with a duration input">
+            <article>
+                <p class="card-label">The time picker</p>
+                <h2>“What time is it?”</h2>
+                <p class="card-copy">HTML's built-in time input asks for a time of day—not an elapsed duration. The clock has other plans.</p>
+                <label class="field" for="clock-time">
+                    <input id="clock-time" type="time" value="06:00" step="60">
+                </label>
+                <p class="result" id="clock-result" aria-live="polite">06:00 is a time of day—not how long the task takes.</p>
+            </article>
+            <article class="duration">
+                <p class="card-label">The duration input</p>
+                <h2>“How long does it take?”</h2>
+                <p class="card-copy">HTML has no built-in duration input. This one handles 30 hours, with a fixed HH:mm:ss.SSS display.</p>
+                <input-duration id="duration" role="group" aria-label="Duration in hours, minutes, seconds, and milliseconds" value="30:00:00.000"></input-duration>
+                <p class="result" id="duration-result" aria-live="polite"><strong>30:00:00.000</strong> — a 30-hour duration, exactly as requested.</p>
+            </article>
+        </section>
+        <footer>
+            Native HTML time inputs are for times of day; HTML has no built-in control for entering a duration like 30:00:00.000.
+            That's the gap <a href="InputDuration.html">input-duration</a> fills. Read the
+            <a href="https://github.com/StephanLuis/input-duration">source on GitHub</a>.
+        </footer>
+    </main>
+    <script type="module">
+        import '../index.js';
+        const clockInput = document.querySelector('#clock-time');
+        const clockResult = document.querySelector('#clock-result');
+        const durationInput = document.querySelector('#duration');
+        const durationResult = document.querySelector('#duration-result');
+        clockInput.addEventListener('input', () => {
+            clockResult.textContent = clockInput.value
+                ? `${clockInput.value} is a time of day—not how long the task takes.`
+                : 'No time picked. Still not a duration.';
+        });
+        const updateDurationResult = () => {
+            const value = durationInput.value;
+            if (/^[0-9]{2}:[0-5][0-9]:[0-5][0-9]\.[0-9]{3}$/.test(value)) {
+                const formattedValue = document.createElement('strong');
+                formattedValue.textContent = value;
+                durationResult.replaceChildren(
+                    formattedValue,
+                    document.createTextNode(' — a duration, exactly as requested.')
+                );
+            } else {
+                durationResult.textContent = 'Keep going—finish entering the duration.';
+            }
+        };
+        durationInput.addEventListener('input', updateDurationResult);
+        durationInput.addEventListener('change', updateDurationResult);
+    </script>
 </body>
-</html>
+</html>

package/docs/index.js.html CHANGED Viewed

@@ -19,7 +19,7 @@
     <h1 class="page-title">Source: index.js</h1>
+    <h1>Hi from bob</h1>Hi from bobQ!!!</h1>

package/index.js CHANGED Viewed

@@ -6,12 +6,11 @@
  *
  * @fileoverview INPUT-DURATION
  * @file INPUT-DURATION
- * @author Stephan Luis stephan@learnsense.org
+ * @author Stephan Luis
  * @see <a href="https://www.npmjs.com/package/input-duration">NPM input-duration</a>
  * @see <a href="https://github.com/StephanLuis/input-duration">GitHub input-duration</a>
- * @copyright MIT License, Copyright (c) 2024
- * @version 2.2.XXX (DEV) / auto increment
- * fake update to check CI , 16 Dec, 6x
+ * @copyright MIT License, Copyright (c) 2022
+ * @version 2.2.8 (release)
  */
@@ -23,21 +22,35 @@
  */
 class InputDuration extends HTMLElement {
+    static get observedAttributes() {
+        return ['value'];
+    }
     constructor() {
         super();
         this.myElement = this.attachShadow({ mode: 'open' });
-        // needed for setting inputs when value attribute is added to chronlyHMS
-        // <chronly-hms id="bobPrepop" value="99:09:09.999"></chronly-hms>
-        this.value = this.getAttribute('value');
         this.boot();
     }  // end constructor
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name !== 'value' || oldValue === newValue) {
+            return;
+        }
+        if (newValue === null) {
+            this.resetInputs();
+        } else if (this.isValidValue(newValue)) {
+            this.setInputValues(newValue);
+        } else {
+            this.warnInvalidValue(newValue);
+        }
+    }
     /**
      * get the input-duration value, pulls values from each input
@@ -75,60 +88,52 @@ class InputDuration extends HTMLElement {
     set value(val) {
         // for setting the value in js (like document.querySelector("#bobPrepop").value = "05:05:05.005")
-        if (val) {
-            console.log(val);
-            if (/(^[0-9][0-9]):([0-5][0-9]):([0-5][0-9])\.([0-9][0-9][0-9]$)/.exec(val)) {
-                // split val
-                var timeArray = val.split(/[.:]+/);
-                console.log('time array is ' + timeArray[0] + ':' + timeArray[1] + ':' + timeArray[2] + ':' + timeArray[3]);
-                console.log('this.id = ' + this.id);
-                setTimeout(() => {
-                    this.myElement.querySelector('input[name="startHours"]').value = timeArray[0];
-                    this.myElement.querySelector('input[name="startMinutes"]').value = timeArray[1];
-                    this.myElement.querySelector('input[name="startSeconds"]').value = timeArray[2];
-                    this.myElement.querySelector('input[name="startMilliSecs"]').value = timeArray[3];
-                }, 0);
-                this.setAttribute('value', val);
-            }
-            else {
+        if (!val) {
+            this.resetInputs();
+            this.removeAttribute('value');
+            return;
+        }
-                console.warn(`The specified value ${val} does not conform to the required format.  The format is "HH:mm:ss.SSS" where HH is 00-99, mm is 00-59, ss is 00-59, and SSS is 000-999.`);
+        if (typeof val !== 'string' || !this.isValidValue(val)) {
+            this.warnInvalidValue(val);
+            return;
+        }
-            }
+        this.setInputValues(val);
-            //  I think this is for empty string to clear value
-            // gives a False bool and removes value from Webcomponent chronlyHMS
+        if (this.getAttribute('value') !== val) {
+            this.setAttribute('value', val);
+        }
+    }
-        } else {
+    isValidValue(val) {
+        return typeof val === 'string' &&
+            /^[0-9]{2}:[0-5][0-9]:[0-5][0-9]\.[0-9]{3}$/.test(val);
+    }
-            setTimeout(() => {
+    setInputValues(val) {
+        const timeArray = val.split(/[.:]+/);
+        const inputNames = ['startHours', 'startMinutes', 'startSeconds', 'startMilliSecs'];
-                this.myElement.querySelector('input[name="startHours"]').value = '00';
-                this.myElement.querySelector('input[name="startMinutes"]').value = '00';
-                this.myElement.querySelector('input[name="startSeconds"]').value = '00';
-                this.myElement.querySelector('input[name="startMilliSecs"]').value = '000';
+        inputNames.forEach((name, index) => {
+            const input = this.myElement.querySelector(`input[name="${name}"]`);
+            input.value = timeArray[index];
+            input.oldValue = input.value;
+        });
+    }
-            }, 0);
+    resetInputs() {
+        const defaults = ['00', '00', '00', '000'];
+        const inputs = this.myElement.querySelectorAll('.timeCase input');
-            this.removeAttribute('value');
+        inputs.forEach((input, index) => {
+            input.value = defaults[index];
+            input.oldValue = input.value;
+        });
+    }
-        }
+    warnInvalidValue(val) {
+        console.warn(`The specified value ${val} does not conform to the required format.  The format is "HH:mm:ss.SSS" where HH is 00-99, mm is 00-59, ss is 00-59, and SSS is 000-999.`);
     }
@@ -162,10 +167,6 @@ class InputDuration extends HTMLElement {
     addArrowKeyInput() {
-        console.log('1 this: ' + this);
-        console.log('1 this.myElement: ' + this.myElement);
-        console.log('1 this.myElement active: ' + this.myElement);
         var mE = this.myElement;
         // Left and Right arrow key toggle between HMSmS
@@ -255,82 +256,89 @@ class InputDuration extends HTMLElement {
               </svg>
           </div>
           <style>
-                *:focus {
-                outline: none;
+                :host {
+                    display: inline-block;
+                    color: inherit;
+                    font: inherit;
+                    vertical-align: middle;
                 }
-                div.timeCase{
-                display: inline-flex;
-                flex-direction: row;
-                max-width: 300px;
-                padding: 3px;
-                border-style: solid;
-                border-width: 1px;
-                border-radius: 2px;
+                .timeCase {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0.08em;
+                    max-width: 100%;
+                    padding: 0.4em 0.55em;
+                    border: 1px solid #9aa6b2;
+                    border-radius: 0.4em;
+                    background: transparent;
+                    color: inherit;
+                    font-variant-numeric: tabular-nums;
+                    line-height: 1.4;
+                    white-space: nowrap;
                 }
-                /* Each input width set and blinking cursor 'caret' removed */
-                div.timeCase input{
-                caret-color: transparent;
-                width: 15px;
-                padding-top:1px;
+                .timeCase:focus-within {
+                    border-color: #176b4a;
+                    outline: 3px solid #176b4a;
+                    outline-offset: 2px;
                 }
-                div.timeCase .D3{
-                width: 25px;
+                .timeCase input {
+                    box-sizing: content-box;
+                    width: 2ch;
+                    min-width: 2ch;
+                    margin: 0;
+                    padding: 0;
+                    border: 0;
+                    outline: 0;
+                    background: transparent;
+                    color: inherit;
+                    font: inherit;
+                    font-variant-numeric: tabular-nums;
+                    text-align: center;
+                    caret-color: transparent;
+                    appearance: textfield;
                 }
-                /* Hiding the up and down arrow */
-                /*https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp*/
-                /* Chrome, Safari, Edge, Opera */
-                input::-webkit-outer-spin-button,
-                input::-webkit-inner-spin-button {
-                -webkit-appearance: none;
-                margin: 0;
+                .timeCase input.D3 {
+                    width: 3ch;
+                    min-width: 3ch;
                 }
-                /* Firefox */
-                input[type=number] {
-                /* -moz-appearance: textfield; */
-                -moz-appearance: textarea;
-                -webkit-appearance: textarea;
+                .timeCase input::-webkit-outer-spin-button,
+                .timeCase input::-webkit-inner-spin-button {
+                    margin: 0;
+                    appearance: none;
                 }
-                div.timeCase:focus-within {
-                border: 2px solid black;
-                padding: 2px;
+                .timeCase span {
+                    color: currentColor;
+                    opacity: 0.7;
                 }
+                #svgContainer {
+                    display: inline-flex;
+                    width: 1em;
+                    height: 1em;
+                    flex: 0 0 auto;
+                    align-items: center;
+                    justify-content: center;
+                    margin-left: 0.2em;
+                    color: inherit;
+                }
-                .ts_digit {
-                border: none;
-                }
-                /* between digit span */
-                .bds{
-                padding-bottom: 1px;
+                #svgContainer svg {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
                 }
-                #svgContainer {
-                width: 12px;
-                height: 12px;
-                padding-top: 1px;
-                padding-right: 2px;
-                color: black;
-                }
-                *:disabled {
-                background-color: grey;
-                color: lightgrey;
-                opacity: .6;
+                .timeCase input:disabled {
+                    background: transparent;
+                    color: GrayText;
+                    cursor: not-allowed;
+                    opacity: 0.65;
                 }
                 </style> `
@@ -422,26 +430,19 @@ class InputDuration extends HTMLElement {
         // Digit input 0-9  (typed in by user)
         function setInputFilter(inputElement, inputFilter) {
-            // this sets a listener and  immediately updates the value of the input number (note: can update this from input text, like by removing setSelectionRange )
+            inputElement.oldValue = inputElement.value;
-            console.log('inputElement: ' + inputElement);
-            window.inputElement = inputElement;
+            inputElement.addEventListener('input', function () {
+                if (inputFilter(this.value)) {
+                    this.oldValue = this.value;
+                } else {
+                    this.value = this.oldValue;
+                }
+            });
             inputElement.addEventListener('keyup', function (event) {
-                window.kue = event;
-                if (/^([0-9]?)$/.test(event.key)) {
-                    if (inputFilter(this.value)) {
-                        this.oldValue = this.value;
-                        this.oldSelectionStart = this.selectionStart;
-                        this.oldSelectionEnd = this.selectionEnd;
-                    } else if (this.hasOwnProperty("oldValue")) {
-                        this.value = this.oldValue;
-                        // this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
-                    } else {
-                        this.value = "";
-                    }
+                if (/^[0-9]$/.test(event.key)) {
+                    inputFilter(this.value);
                 }
             });
         }
@@ -455,7 +456,7 @@ class InputDuration extends HTMLElement {
             var newV = /^([0-9]?|[0-9][0-9]?)$/.test(value);
-            if (value.length === 2) {
+            if (newV && value.length === 2) {
                 mE.querySelector('input.sM').focus();
                 mE.querySelector('input.sM').select();
@@ -472,7 +473,7 @@ class InputDuration extends HTMLElement {
             var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
-            if (value > 5 || value.length === 2) {
+            if (newV && (value > 5 || value.length === 2)) {
                 mE.querySelector('input.sS').focus();
                 mE.querySelector('input.sS').select();
@@ -488,7 +489,7 @@ class InputDuration extends HTMLElement {
             var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
-            if (value > 5 || value.length === 2) {
+            if (newV && (value > 5 || value.length === 2)) {
                 mE.querySelector('input.sMS').focus();
                 mE.querySelector('input.sMS').select();
@@ -506,7 +507,7 @@ class InputDuration extends HTMLElement {
             var newV = /^([0-9]?|[0-9][0-9]?|[0-9][0-9][0-9]?)$/.test(value);
-            if (value.length === 3) {
+            if (newV && value.length === 3) {
                 mE.querySelector('input.sMS').blur();
@@ -643,6 +644,8 @@ class InputDuration extends HTMLElement {
 // end class
-export default customElements.define('input-duration', InputDuration);
+customElements.define('input-duration', InputDuration);
+export default InputDuration;
 // an option is to make all above an IIFE

package/package.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "name": "input-duration",
-  "version": "2.2.27",
+  "version": "3.0.1",
   "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",
+  "description": "A JavaScript web component for entering durations up to 99 hours in a fixed HH:mm:ss.SSS format, with millisecond precision for countdown timers and elapsed time.",
+  "browser": "./index.js",
   "module": "index.js",
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "test": " node -v",
+    "test": "node --test Tests/inputDuration.test.js",
     "build": "webpack && date '+%T'",
     "devbuild": "webpack --mode=development && date '+%T'",
     "start": "python3 -m http.server"
@@ -18,19 +18,29 @@
     "url": "git+https://github.com/StephanLuis/input-duration.git"
   },
   "license": "ISC",
+  "devDependencies": {
+    "jsdom": "^26.1.0"
+  },
   "bugs": {
     "url": "https://github.com/StephanLuis/input-duration/issues"
   },
   "homepage": "https://github.com/StephanLuis/input-duration#readme",
   "keywords": [
+    "javascript",
+    "duration input",
+    "time duration",
+    "countdown timer",
+    "elapsed time",
+    "millisecond",
+    "time input",
+    "web component",
     "vanilla js",
     "input",
     "time",
     "duration",
-    "webcomponent",
     "hour",
     "minute",
     "second",
-    "millisecond"
+    "milliseconds"
   ]
 }

package/.github/workflows/commitToBSEndToEnd.yml DELETED Viewed

@@ -1,51 +0,0 @@
-# triggered on commit to rep
-# triggers specific workflow in curl enpoint (that workflow needs workflow_disptach)
-name: CommitToBSEndToEnd
-# Controls when the action will run. Workflow runs when manually triggered using the UI
-# or API.
-on: push
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  bump-pub:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-     # bumps minor version
-      - run: echo "Token ${{ secrets.GITHUB_TOKEN }}"
-      - run: echo "Repo ${{ github.repository }}"
-      - run: echo "Head ${{ github.head_ref }}"
-      - run: npm version patch
-      - run: git push "https://${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}"
-      # publishes with credentials
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
-  trigger-BStest:
-   runs-on: ubuntu-latest
-   steps:
-    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-    - name: Trigger Tests
-      run: |
-        curl -L \
-        -X POST \
-        -H "Accept: application/vnd.github+json" \
-        -u "StephanLuis:${{secrets.PAT_KEY}}" \
-        -H "X-GitHub-Api-Version: 2022-11-28" \
-        https://api.github.com/repos/StephanLuis/BrowserStackSelenium/actions/workflows/78546395/dispatches \
-        -d '{"ref":"main"}'

package/.github/workflows/devVersionAndRelease.yml DELETED Viewed

@@ -1,66 +0,0 @@
-name: Dev Version and Release
-on:
-  push:
-  # exclude push for these files / dir
-    paths:
-      - '**.js'
-      - '!**.config.js'
-      - '!.github/**'
-      - '!Competitors/**'
-      - '!docs/**'
-      - '!readme/**'
-env:
-  node_version: lts/*
-  new_version: patch
-concurrency: # prevent concurrent releases
-  group: npm-bump
-  cancel-in-progress: true
-jobs:
-  version_and_release:
-    runs-on: ubuntu-latest
-    outputs:
-      tagName: ${{ steps.npm-bump.outputs.release_tag }}
-    steps:
-    - uses: actions/checkout@v3
-      with:
-        # fetch full history so things like auto-changelog work properly
-        fetch-depth: 0
-    - name: Use Node.js ${{ env.node_version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ env.node_version }}
-        # setting a registry enables the NODE_AUTH_TOKEN env variable where we can set an npm token.  REQUIRED
-        registry-url: 'https://registry.npmjs.org'
-    - run: npm i
-    - run: npm test
-    # https://github.com/marketplace/actions/npm-bump
-    - name: Version and publish to npm
-      id: npm-bump
-      uses: bcomnes/npm-bump@v2
-      with:
-        git_email: stephan@learnsense.org
-        git_username: ${{ github.actor }}
-        newversion: ${{ env.new_version }}
-        publish_cmd: npm publish --tag dev
-        push_version_commit: true # if your prePublishOnly step pushes git commits, you can omit this input or set it to false.
-        github_token: ${{ secrets.GITHUB_TOKEN }} # built in actions token.  Passed tp gh-release if in use.
-        npm_token: ${{ secrets.NPM_TOKEN }} # user set secret token generated at npm
-    - run: echo ${{ steps.npm-bump.outputs.release_tag }}
-    # Trigger tests on BrowserStackSelenium repo
-    - name: Test
-      run: |
-        curl -L \
-        -X POST \
-        -H "Accept: application/vnd.github+json" \
-        -u "StephanLuis:${{secrets.PAT_KEY}}" \
-        -H "X-GitHub-Api-Version: 2022-11-28" \
-         https://api.github.com/repos/StephanLuis/BrowserStackSelenium/actions/workflows/79764882/dispatches \
-        -d '{"ref":"main"}'

package/.github/workflows/npm-bump.yml DELETED Viewed

@@ -1,47 +0,0 @@
-# second commit
-# from https://github.com/marketplace/actions/npm-bump
-name: NPM Version and Release (npm-bump.yml)
-on:
-  workflow_dispatch:
-    inputs:
-      newversion:
-        description: 'Semantic Version Bump Type (major minor patch)'
-        required: true
-env:
-  node_version: lts/*
-concurrency: # prevent concurrent releases
-  group: npm-bump
-  cancel-in-progress: true
-jobs:
-  version_and_release:
-    runs-on: ubuntu-latest
-    outputs:
-      tagName: ${{ steps.npm-bump.outputs.release_tag }}
-    steps:
-    - uses: actions/checkout@v3
-      with:
-        # fetch full history so things like auto-changelog work properly
-        fetch-depth: 0
-    - name: Use Node.js ${{ env.node_version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ env.node_version }}
-        # setting a registry enables the NODE_AUTH_TOKEN env variable where we can set an npm token.  REQUIRED
-        registry-url: 'https://registry.npmjs.org'
-    - run: npm i
-    - run: npm test
-    - name: Version and publish to npm
-      id: npm-bump
-      uses: bcomnes/npm-bump@v2
-      with:
-        git_email: bcomnes@gmail.com
-        git_username: ${{ github.actor }}
-        newversion: ${{ github.event.inputs.newversion }}
-        push_version_commit: true # if your prePublishOnly step pushes git commits, you can omit this input or set it to false.
-        github_token: ${{ secrets.GITHUB_TOKEN }} # built in actions token.  Passed tp gh-release if in use.
-        npm_token: ${{ secrets.NPM_TOKEN }} # user set secret token generated at npm
-    - run: echo ${{ steps.npm-bump.outputs.release_tag }}