input-duration 2.2.27 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  # manually triggered
2
2
  # triggers specific workflow in curl enpoint (that workflow needs workflow_disptach)
3
3
 
4
- name: ManualTrigger Echo0
4
+ name: ManualTrigger0
5
5
 
6
6
  # Controls when the action will run. Workflow runs when manually triggered using the UI
7
7
  # or API.
package/README.md CHANGED
@@ -4,6 +4,8 @@
4
4
  *** Thanks for checking out the Best-README-Template. If you have a suggestion
5
5
  *** that would make this better, please fork the repo and create a pull request
6
6
  *** or simply open an issue with the tag "enhancement".
7
+ *** Don't forget to give the project a star!
8
+ *** Thanks again! Now go create something AMAZING! :D
7
9
  -->
8
10
 
9
11
 
@@ -17,16 +19,6 @@
17
19
  *** https://www.markdownguide.org/basic-syntax/#reference-style-links
18
20
  -->
19
21
 
20
- Live BrowserStack Test Results:
21
-
22
- ![example workflow](https://github.com/StephanLuis/BrowserStackSelenium/workflows/curlEcho1/badge.svg)
23
-
24
- ![ContinuousIntegration](https://github.com/StephanLuis/BrowserStackSelenium/workflows/InputDurationTests/badge.svg)
25
-
26
- - this can be updated with https://shields.io/
27
-
28
- Remove these:
29
-
30
22
  [![npm bundle size][npm-bundle-size]][npm-bundle-size]
31
23
  [![Contributors][contributors-shield]][contributors-url]
32
24
  [![Forks][forks-shield]][forks-url]
@@ -47,15 +39,18 @@ Remove these:
47
39
 
48
40
 
49
41
  <a href="https://github.com/StephanLuis/input-duration">
50
- <h3 align="center">Input-Duration -- The best 'Time Only' Input (Vanilla JS)</h3> <img src="readme/logo.svg" alt="Logo" width="90" height="90">
42
+ <h3 align="center">Input-Duration -- JavaScript duration input</h3> <img src="readme/logo.svg" alt="Logo" width="90" height="90">
51
43
  </a>
52
44
 
53
45
 
54
46
 
55
- <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>
47
+ <p align="center">A compact duration input with a fixed, locale-independent display for hours, minutes, seconds, and milliseconds.</p>
56
48
  </div>
57
49
 
58
- '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>
50
+ 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`.
51
+
52
+ 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.
53
+ <br>
59
54
  <p>
60
55
  <div>
61
56
  </div>
@@ -65,6 +60,8 @@ Remove these:
65
60
  </a> ·
66
61
  <a href="https://6mxpg2.csb.app/" target="_blank">Demo</a>
67
62
  ·
63
+ <a href="https://stephanluis.github.io/input-duration/" target="_blank">Live demo</a>
64
+ ·
68
65
  <a href="https://stephanluis.github.io/input-duration/" target="_blank">Docs</a>
69
66
  ·
70
67
  <a href="https://github.com/StephanLuis/input-duration/issues">Bugs</a>
@@ -72,17 +69,28 @@ Remove these:
72
69
  <a href="https://github.com/StephanLuis/input-duration/issues">Request Feature</a>
73
70
  </p>
74
71
  </div>
75
- Ok, what about mobile?? Yep, input-duration works on all popular operating system / browser combinations.
76
- <br/>
77
72
  </div>
78
73
  <br/>
79
74
 
80
- <h2>Touch and Keyboard Timepicker</h2>
75
+ <h2>Fixed-format duration input</h2>
76
+
77
+ `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.
78
+
79
+ <h2>Bob is rescued by INPUT-DURATION!</h2>
80
+
81
+ 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.
81
82
 
82
- |OS(mobile) | Browser | | OS(laptop) | Browser |
83
- |-----------------|----------------|--|-------------|-----------|
84
- | Android | Chrome | |Windows 10, 11 | Chrome, Edge |
85
- | iOS | Safari, Chrome | |OsX | Safari, Chrome |
83
+ <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.
84
+
85
+ <img src="readme/safariBad.png" alt="Example comparing a native time input with input-duration" width="80%"/>
86
+
87
+ 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.
88
+
89
+ Here's why:
90
+ * Enter durations independently of a calendar date or time of day.
91
+ * Keep a fixed `HH:mm:ss.SSS` display regardless of locale-specific clock conventions.
92
+ * Represent durations beyond 24 hours (up to 99 hours in the current implementation).
93
+ * Read and set the value from JavaScript using the component's `.value` property.
86
94
 
87
95
  <!-- TABLE OF CONTENTS -->
88
96
  <details>
@@ -103,7 +111,7 @@ Remove these:
103
111
  </li>
104
112
  <li><a href="#usage">Usage</a></li>
105
113
  <li><a href="#roadmap">Roadmap</a></li>
106
- <li><a href="#teststatus">Test Status</a></li>
114
+ <li><a href="#cross-browser-testing">Cross-browser testing</a></li>
107
115
  <li><a href="#contributing">Contributing</a></li>
108
116
  <li><a href="#license">License</a></li>
109
117
  <li><a href="#contact">Contact</a></li>
@@ -115,50 +123,16 @@ Remove these:
115
123
 
116
124
  <!-- ABOUT THE PROJECT -->
117
125
  ## About The Project
118
- 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.
126
+
127
+ 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.
128
+
129
+ `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.
119
130
 
120
131
  <!-- [![Product Name Screen Shot][product-screenshot]](https://example.com) -->
121
132
 
122
133
  <img src="readme/codeDrawing.png" alt="drawing" width="60%"/>
123
134
 
124
135
  <!-- [![HTML Screen Shot][html-screenshot]](https://example.com) -->
125
- *note input-duration needs closing tag!
126
-
127
- <h3> Bob is rescued by INPUT-DURATION! </h3>
128
-
129
- 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.
130
-
131
- <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.
132
-
133
-
134
-
135
- <img src="readme/safariBad.png" alt="drawing" width="80%"/>
136
- <!-- [![Safari Screen Shot][safari-screenshot]](https://example.com) -->
137
-
138
- 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.
139
-
140
- 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!
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
- 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.
149
-
150
- Here's why:
151
- * Time is hours minutes and seconds (and millisecs) and needn't be associated with part of a day or a date
152
- * The date association breaks UX and is varied with browser implementation
153
- * I found no other crossbrowser solution
154
- * I thought this would be a great open source project
155
- * End use of number inputs (standard hack) for use with time
156
-
157
- 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.
158
-
159
-
160
- Feel free to vote for WhatWG inclusion of a into the HTML spec! (link comming soon)
161
-
162
136
  <p align="right">(<a href="#top">back to top</a>)</p>
163
137
 
164
138
 
@@ -279,14 +253,9 @@ See the [open issues](https://github.com/StephanLuis/input-duration/issues) for
279
253
  <p align="right">(<a href="#top">back to top</a>)</p>
280
254
 
281
255
  <!-- TESTSTATUS -->
282
- ## Teststatus
256
+ ## Cross-browser testing
283
257
 
284
- ![TestStatusDIY](https://img.shields.io/static/v1?label=Android:Chrome&message=Pass&color=<COLOR>&style=for-the-badge)
285
- ![TestStatusDIY](https://img.shields.io/static/v1?label=iOS:Safari&message=Pass&color=<COLOR>&style=for-the-badge)
286
- ![TestStatusDIY](https://img.shields.io/static/v1?label=iOS:Chrome&message=Pass&color=<COLOR>&style=for-the-badge)
287
- ![TestStatusDIY](https://img.shields.io/static/v1?label=Windows:Chrome&message=Pass&color=<COLOR>&style=for-the-badge)
288
- ![TestStatusDIY](https://img.shields.io/static/v1?label=osX:Safari&message=Pass&color=<COLOR>&style=for-the-badge)
289
- ![TestStatusDIY](https://img.shields.io/static/v1?label=osX:Chrome&message=Pass&color=<COLOR>&style=for-the-badge)
258
+ 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.
290
259
 
291
260
  [Tests & Live Status](https://github.com/StephanLuis/BrowserStackSelenium/blob/main/input-duration/README.md)
292
261
 
@@ -296,6 +265,8 @@ See the [open issues](https://github.com/StephanLuis/input-duration/issues) for
296
265
 
297
266
  Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
298
267
 
268
+ Run the local regression tests with `npm test`.
269
+
299
270
  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".
300
271
  Don't forget to give the project a star! Thanks again!
301
272
 
@@ -350,8 +321,6 @@ Resources I've found helpful and would like to give credit to:
350
321
  <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
351
322
 
352
323
 
353
-
354
-
355
324
  [contributors-shield]: https://img.shields.io/github/contributors/StephanLuis/input-duration?style=for-the-badge
356
325
  [contributors-url]: https://github.com/StephanLuis/input-duration/graphs/contributors
357
326
  [forks-shield]: https://img.shields.io/github/forks/StephanLuis/input-duration?style=for-the-badge
package/docs/index.html CHANGED
@@ -3,6 +3,25 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <title>JSDoc: Home</title>
6
+ <h1> See the input-duration in action</h1>
7
+
8
+ <h2>Best HTML5 Option</h2>
9
+ <input type="time" id="problemTime" step="0.01" value="00:00:00.000">
10
+
11
+ <h2>Better Option</h2>
12
+ <input-duration id="bob"></input-duration>
13
+
14
+ <h1>More uses of input-duration</h1>
15
+ <input-duration id="bobPrepop" value="99:09:09.999"></input-duration><br>
16
+ <input-duration id="Jane"></input-duration><br>
17
+ <input type="date" id="BobsDate"><br>
18
+
19
+ <h2>Test the prototype</h2>
20
+ <p id="what">This is for testing HTMLelement prototype update</p>
21
+
22
+ <script type="module">
23
+ import chronlyhms from 'https://cdn.jsdelivr.net/npm/input-duration/+esm';
24
+ </script>
6
25
 
7
26
  <script src="scripts/prettify/prettify.js"> </script>
8
27
  <script src="scripts/prettify/lang-css.js"> </script>
@@ -17,7 +36,7 @@
17
36
 
18
37
  <div id="main">
19
38
 
20
- <h1 class="page-title">Home</h1>
39
+ <h1 class="page-title">Plugin Doccumentation</h1>
21
40
 
22
41
 
23
42
 
@@ -174,4 +193,4 @@
174
193
  <script> prettyPrint(); </script>
175
194
  <script src="scripts/linenumber.js"> </script>
176
195
  </body>
177
- </html>
196
+ </html>
@@ -19,7 +19,7 @@
19
19
 
20
20
  <h1 class="page-title">Source: index.js</h1>
21
21
 
22
-
22
+ <h1>Hi from bob</h1>Hi from bobQ!!!</h1>
23
23
 
24
24
 
25
25
 
package/index.js CHANGED
@@ -6,12 +6,11 @@
6
6
  *
7
7
  * @fileoverview INPUT-DURATION
8
8
  * @file INPUT-DURATION
9
- * @author Stephan Luis stephan@learnsense.org
9
+ * @author Stephan Luis
10
10
  * @see <a href="https://www.npmjs.com/package/input-duration">NPM input-duration</a>
11
11
  * @see <a href="https://github.com/StephanLuis/input-duration">GitHub input-duration</a>
12
- * @copyright MIT License, Copyright (c) 2024
13
- * @version 2.2.XXX (DEV) / auto increment
14
- * fake update to check CI , 16 Dec, 6x
12
+ * @copyright MIT License, Copyright (c) 2022
13
+ * @version 2.2.8 (release)
15
14
  */
16
15
 
17
16
 
@@ -23,21 +22,35 @@
23
22
  */
24
23
 
25
24
  class InputDuration extends HTMLElement {
25
+ static get observedAttributes() {
26
+ return ['value'];
27
+ }
28
+
26
29
  constructor() {
27
30
 
28
31
  super();
29
32
 
30
33
  this.myElement = this.attachShadow({ mode: 'open' });
31
34
 
32
- // needed for setting inputs when value attribute is added to chronlyHMS
33
- // <chronly-hms id="bobPrepop" value="99:09:09.999"></chronly-hms>
34
-
35
- this.value = this.getAttribute('value');
36
-
37
35
  this.boot();
38
36
 
39
37
  } // end constructor
40
38
 
39
+ attributeChangedCallback(name, oldValue, newValue) {
40
+
41
+ if (name !== 'value' || oldValue === newValue) {
42
+ return;
43
+ }
44
+
45
+ if (newValue === null) {
46
+ this.resetInputs();
47
+ } else if (this.isValidValue(newValue)) {
48
+ this.setInputValues(newValue);
49
+ } else {
50
+ this.warnInvalidValue(newValue);
51
+ }
52
+ }
53
+
41
54
 
42
55
  /**
43
56
  * get the input-duration value, pulls values from each input
@@ -75,60 +88,52 @@ class InputDuration extends HTMLElement {
75
88
  set value(val) {
76
89
 
77
90
  // for setting the value in js (like document.querySelector("#bobPrepop").value = "05:05:05.005")
78
- if (val) {
79
-
80
-
81
- console.log(val);
82
-
83
-
84
- if (/(^[0-9][0-9]):([0-5][0-9]):([0-5][0-9])\.([0-9][0-9][0-9]$)/.exec(val)) {
85
-
86
-
87
- // split val
88
-
89
- var timeArray = val.split(/[.:]+/);
90
-
91
- console.log('time array is ' + timeArray[0] + ':' + timeArray[1] + ':' + timeArray[2] + ':' + timeArray[3]);
92
-
93
- console.log('this.id = ' + this.id);
94
-
95
- setTimeout(() => {
96
-
97
- this.myElement.querySelector('input[name="startHours"]').value = timeArray[0];
98
- this.myElement.querySelector('input[name="startMinutes"]').value = timeArray[1];
99
- this.myElement.querySelector('input[name="startSeconds"]').value = timeArray[2];
100
- this.myElement.querySelector('input[name="startMilliSecs"]').value = timeArray[3];
101
-
102
- }, 0);
103
-
104
-
105
- this.setAttribute('value', val);
106
-
107
- }
108
-
109
- else {
91
+ if (!val) {
92
+ this.resetInputs();
93
+ this.removeAttribute('value');
94
+ return;
95
+ }
110
96
 
111
- 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.`);
97
+ if (typeof val !== 'string' || !this.isValidValue(val)) {
98
+ this.warnInvalidValue(val);
99
+ return;
100
+ }
112
101
 
113
- }
102
+ this.setInputValues(val);
114
103
 
115
- // I think this is for empty string to clear value
116
- // gives a False bool and removes value from Webcomponent chronlyHMS
104
+ if (this.getAttribute('value') !== val) {
105
+ this.setAttribute('value', val);
106
+ }
107
+ }
117
108
 
118
- } else {
109
+ isValidValue(val) {
110
+ return typeof val === 'string' &&
111
+ /^[0-9]{2}:[0-5][0-9]:[0-5][0-9]\.[0-9]{3}$/.test(val);
112
+ }
119
113
 
120
- setTimeout(() => {
114
+ setInputValues(val) {
115
+ const timeArray = val.split(/[.:]+/);
116
+ const inputNames = ['startHours', 'startMinutes', 'startSeconds', 'startMilliSecs'];
121
117
 
122
- this.myElement.querySelector('input[name="startHours"]').value = '00';
123
- this.myElement.querySelector('input[name="startMinutes"]').value = '00';
124
- this.myElement.querySelector('input[name="startSeconds"]').value = '00';
125
- this.myElement.querySelector('input[name="startMilliSecs"]').value = '000';
118
+ inputNames.forEach((name, index) => {
119
+ const input = this.myElement.querySelector(`input[name="${name}"]`);
120
+ input.value = timeArray[index];
121
+ input.oldValue = input.value;
122
+ });
123
+ }
126
124
 
127
- }, 0);
125
+ resetInputs() {
126
+ const defaults = ['00', '00', '00', '000'];
127
+ const inputs = this.myElement.querySelectorAll('.timeCase input');
128
128
 
129
- this.removeAttribute('value');
129
+ inputs.forEach((input, index) => {
130
+ input.value = defaults[index];
131
+ input.oldValue = input.value;
132
+ });
133
+ }
130
134
 
131
- }
135
+ warnInvalidValue(val) {
136
+ 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.`);
132
137
  }
133
138
 
134
139
 
@@ -162,10 +167,6 @@ class InputDuration extends HTMLElement {
162
167
 
163
168
  addArrowKeyInput() {
164
169
 
165
- console.log('1 this: ' + this);
166
- console.log('1 this.myElement: ' + this.myElement);
167
- console.log('1 this.myElement active: ' + this.myElement);
168
-
169
170
  var mE = this.myElement;
170
171
 
171
172
  // Left and Right arrow key toggle between HMSmS
@@ -422,26 +423,19 @@ class InputDuration extends HTMLElement {
422
423
  // Digit input 0-9 (typed in by user)
423
424
 
424
425
  function setInputFilter(inputElement, inputFilter) {
425
- // this sets a listener and immediately updates the value of the input number (note: can update this from input text, like by removing setSelectionRange )
426
+ inputElement.oldValue = inputElement.value;
426
427
 
427
- console.log('inputElement: ' + inputElement);
428
- window.inputElement = inputElement;
428
+ inputElement.addEventListener('input', function () {
429
+ if (inputFilter(this.value)) {
430
+ this.oldValue = this.value;
431
+ } else {
432
+ this.value = this.oldValue;
433
+ }
434
+ });
429
435
 
430
436
  inputElement.addEventListener('keyup', function (event) {
431
-
432
- window.kue = event;
433
-
434
- if (/^([0-9]?)$/.test(event.key)) {
435
- if (inputFilter(this.value)) {
436
- this.oldValue = this.value;
437
- this.oldSelectionStart = this.selectionStart;
438
- this.oldSelectionEnd = this.selectionEnd;
439
- } else if (this.hasOwnProperty("oldValue")) {
440
- this.value = this.oldValue;
441
- // this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
442
- } else {
443
- this.value = "";
444
- }
437
+ if (/^[0-9]$/.test(event.key)) {
438
+ inputFilter(this.value);
445
439
  }
446
440
  });
447
441
  }
@@ -455,7 +449,7 @@ class InputDuration extends HTMLElement {
455
449
  var newV = /^([0-9]?|[0-9][0-9]?)$/.test(value);
456
450
 
457
451
 
458
- if (value.length === 2) {
452
+ if (newV && value.length === 2) {
459
453
 
460
454
  mE.querySelector('input.sM').focus();
461
455
  mE.querySelector('input.sM').select();
@@ -472,7 +466,7 @@ class InputDuration extends HTMLElement {
472
466
 
473
467
  var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
474
468
 
475
- if (value > 5 || value.length === 2) {
469
+ if (newV && (value > 5 || value.length === 2)) {
476
470
 
477
471
  mE.querySelector('input.sS').focus();
478
472
  mE.querySelector('input.sS').select();
@@ -488,7 +482,7 @@ class InputDuration extends HTMLElement {
488
482
 
489
483
  var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
490
484
 
491
- if (value > 5 || value.length === 2) {
485
+ if (newV && (value > 5 || value.length === 2)) {
492
486
 
493
487
  mE.querySelector('input.sMS').focus();
494
488
  mE.querySelector('input.sMS').select();
@@ -506,7 +500,7 @@ class InputDuration extends HTMLElement {
506
500
  var newV = /^([0-9]?|[0-9][0-9]?|[0-9][0-9][0-9]?)$/.test(value);
507
501
 
508
502
 
509
- if (value.length === 3) {
503
+ if (newV && value.length === 3) {
510
504
 
511
505
  mE.querySelector('input.sMS').blur();
512
506
 
@@ -643,6 +637,8 @@ class InputDuration extends HTMLElement {
643
637
  // end class
644
638
 
645
639
 
646
- export default customElements.define('input-duration', InputDuration);
640
+ customElements.define('input-duration', InputDuration);
641
+
642
+ export default InputDuration;
647
643
 
648
644
  // an option is to make all above an IIFE
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "input-duration",
3
- "version": "2.2.27",
3
+ "version": "3.0.0",
4
4
  "author": "Stephan Luis <stephan@learnsense.org>",
5
- "description": "This is the 'Input-Duration'! It is a webcomponent that provides an hour, minute, second, and millisecond control for HTML5.",
6
- "browser": "indexjs",
5
+ "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.",
6
+ "browser": "./index.js",
7
7
  "module": "index.js",
8
8
  "main": "index.js",
9
9
  "type": "module",
10
10
  "scripts": {
11
- "test": " node -v",
11
+ "test": "node --test Tests/inputDuration.test.js",
12
12
  "build": "webpack && date '+%T'",
13
13
  "devbuild": "webpack --mode=development && date '+%T'",
14
14
  "start": "python3 -m http.server"
@@ -18,19 +18,29 @@
18
18
  "url": "git+https://github.com/StephanLuis/input-duration.git"
19
19
  },
20
20
  "license": "ISC",
21
+ "devDependencies": {
22
+ "jsdom": "^26.1.0"
23
+ },
21
24
  "bugs": {
22
25
  "url": "https://github.com/StephanLuis/input-duration/issues"
23
26
  },
24
27
  "homepage": "https://github.com/StephanLuis/input-duration#readme",
25
28
  "keywords": [
29
+ "javascript",
30
+ "duration input",
31
+ "time duration",
32
+ "countdown timer",
33
+ "elapsed time",
34
+ "millisecond",
35
+ "time input",
36
+ "web component",
26
37
  "vanilla js",
27
38
  "input",
28
39
  "time",
29
40
  "duration",
30
- "webcomponent",
31
41
  "hour",
32
42
  "minute",
33
43
  "second",
34
- "millisecond"
44
+ "milliseconds"
35
45
  ]
36
46
  }
@@ -1,51 +0,0 @@
1
- # triggered on commit to rep
2
- # triggers specific workflow in curl enpoint (that workflow needs workflow_disptach)
3
-
4
- name: CommitToBSEndToEnd
5
-
6
- # Controls when the action will run. Workflow runs when manually triggered using the UI
7
- # or API.
8
- on: push
9
-
10
- # A workflow run is made up of one or more jobs that can run sequentially or in parallel
11
- jobs:
12
- bump-pub:
13
- runs-on: ubuntu-latest
14
- steps:
15
- - uses: actions/checkout@v3
16
- - uses: actions/setup-node@v3
17
- with:
18
- node-version: 16
19
- registry-url: https://registry.npmjs.org/
20
- - run: npm ci
21
-
22
- # bumps minor version
23
- - run: echo "Token ${{ secrets.GITHUB_TOKEN }}"
24
- - run: echo "Repo ${{ github.repository }}"
25
- - run: echo "Head ${{ github.head_ref }}"
26
- - run: npm version patch
27
- - run: git push "https://${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}"
28
-
29
- # publishes with credentials
30
- - run: npm publish
31
- env:
32
- NODE_AUTH_TOKEN: ${{secrets.npm_token}}
33
-
34
-
35
-
36
-
37
- trigger-BStest:
38
- runs-on: ubuntu-latest
39
- steps:
40
-
41
- # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
42
- - name: Trigger Tests
43
-
44
- run: |
45
- curl -L \
46
- -X POST \
47
- -H "Accept: application/vnd.github+json" \
48
- -u "StephanLuis:${{secrets.PAT_KEY}}" \
49
- -H "X-GitHub-Api-Version: 2022-11-28" \
50
- https://api.github.com/repos/StephanLuis/BrowserStackSelenium/actions/workflows/78546395/dispatches \
51
- -d '{"ref":"main"}'
@@ -1,66 +0,0 @@
1
- name: Dev Version and Release
2
-
3
- on:
4
- push:
5
-
6
- # exclude push for these files / dir
7
- paths:
8
- - '**.js'
9
- - '!**.config.js'
10
- - '!.github/**'
11
- - '!Competitors/**'
12
- - '!docs/**'
13
- - '!readme/**'
14
-
15
- env:
16
- node_version: lts/*
17
- new_version: patch
18
-
19
- concurrency: # prevent concurrent releases
20
- group: npm-bump
21
- cancel-in-progress: true
22
-
23
- jobs:
24
- version_and_release:
25
- runs-on: ubuntu-latest
26
- outputs:
27
- tagName: ${{ steps.npm-bump.outputs.release_tag }}
28
- steps:
29
- - uses: actions/checkout@v3
30
- with:
31
- # fetch full history so things like auto-changelog work properly
32
- fetch-depth: 0
33
- - name: Use Node.js ${{ env.node_version }}
34
- uses: actions/setup-node@v3
35
- with:
36
- node-version: ${{ env.node_version }}
37
- # setting a registry enables the NODE_AUTH_TOKEN env variable where we can set an npm token. REQUIRED
38
- registry-url: 'https://registry.npmjs.org'
39
- - run: npm i
40
- - run: npm test
41
-
42
- # https://github.com/marketplace/actions/npm-bump
43
- - name: Version and publish to npm
44
- id: npm-bump
45
- uses: bcomnes/npm-bump@v2
46
- with:
47
- git_email: stephan@learnsense.org
48
- git_username: ${{ github.actor }}
49
- newversion: ${{ env.new_version }}
50
- publish_cmd: npm publish --tag dev
51
- push_version_commit: true # if your prePublishOnly step pushes git commits, you can omit this input or set it to false.
52
- github_token: ${{ secrets.GITHUB_TOKEN }} # built in actions token. Passed tp gh-release if in use.
53
- npm_token: ${{ secrets.NPM_TOKEN }} # user set secret token generated at npm
54
- - run: echo ${{ steps.npm-bump.outputs.release_tag }}
55
-
56
- # Trigger tests on BrowserStackSelenium repo
57
- - name: Test
58
-
59
- run: |
60
- curl -L \
61
- -X POST \
62
- -H "Accept: application/vnd.github+json" \
63
- -u "StephanLuis:${{secrets.PAT_KEY}}" \
64
- -H "X-GitHub-Api-Version: 2022-11-28" \
65
- https://api.github.com/repos/StephanLuis/BrowserStackSelenium/actions/workflows/79764882/dispatches \
66
- -d '{"ref":"main"}'
@@ -1,47 +0,0 @@
1
- # second commit
2
- # from https://github.com/marketplace/actions/npm-bump
3
- name: NPM Version and Release (npm-bump.yml)
4
-
5
- on:
6
- workflow_dispatch:
7
- inputs:
8
- newversion:
9
- description: 'Semantic Version Bump Type (major minor patch)'
10
- required: true
11
-
12
- env:
13
- node_version: lts/*
14
-
15
- concurrency: # prevent concurrent releases
16
- group: npm-bump
17
- cancel-in-progress: true
18
-
19
- jobs:
20
- version_and_release:
21
- runs-on: ubuntu-latest
22
- outputs:
23
- tagName: ${{ steps.npm-bump.outputs.release_tag }}
24
- steps:
25
- - uses: actions/checkout@v3
26
- with:
27
- # fetch full history so things like auto-changelog work properly
28
- fetch-depth: 0
29
- - name: Use Node.js ${{ env.node_version }}
30
- uses: actions/setup-node@v3
31
- with:
32
- node-version: ${{ env.node_version }}
33
- # setting a registry enables the NODE_AUTH_TOKEN env variable where we can set an npm token. REQUIRED
34
- registry-url: 'https://registry.npmjs.org'
35
- - run: npm i
36
- - run: npm test
37
- - name: Version and publish to npm
38
- id: npm-bump
39
- uses: bcomnes/npm-bump@v2
40
- with:
41
- git_email: bcomnes@gmail.com
42
- git_username: ${{ github.actor }}
43
- newversion: ${{ github.event.inputs.newversion }}
44
- push_version_commit: true # if your prePublishOnly step pushes git commits, you can omit this input or set it to false.
45
- github_token: ${{ secrets.GITHUB_TOKEN }} # built in actions token. Passed tp gh-release if in use.
46
- npm_token: ${{ secrets.NPM_TOKEN }} # user set secret token generated at npm
47
- - run: echo ${{ steps.npm-bump.outputs.release_tag }}