input-duration 3.1.0 → 3.2.0

package/docs/index.js.html

@@ -19,53 +19,115 @@
 
     <h1 class="page-title">Source: index.js</h1>
 
-    <h1>Hi from bob</h1>Hi from bobQ!!!</h1>
 
 
 
-    
+
+
     <section>
         <article>
             <pre class="prettyprint source linenums"><code>/**
  * This is jsdoc 'auto' documentation see https://jsdoc.app/
- * 
+ * npm install -g jsdoc
+ * jsdoc index.js -d ./docs/
+ *
+ *
  * @fileoverview INPUT-DURATION
- * @file INPUT-DURATION 
+ * @file INPUT-DURATION
  * @author Stephan Luis
  * @see &lt;a href="https://www.npmjs.com/package/input-duration">NPM input-duration&lt;/a>
  * @see &lt;a href="https://github.com/StephanLuis/input-duration">GitHub input-duration&lt;/a>
- * @copyright MIT License, Copyright (c) 2022 
+ * @copyright MIT License, Copyright (c) 2022
+ * @version 2.2.8 (release)
  */
 
 
 
 /**
  * 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.
+ *
+ * @example
+ * &lt;input-duration no-microseconds hours-divider="h " microseconds-divider="ms">&lt;/input-duration>
+ *
  * @class InputDuration
  * @extends HTMLElement
  */
 
 class InputDuration extends HTMLElement {
+    /**
+     * HTML attributes that update the component when changed.
+     *
+     * @static
+     * @returns {string[]} Observed value, visibility, and divider attributes.
+     */
+    static get observedAttributes() {
+        return [
+            'value',
+            'no-hours',
+            'no-minutes',
+            'no-seconds',
+            'no-microseconds',
+            'hours-divider',
+            'minutes-divider',
+            'seconds-divider',
+            'microseconds-divider'
+        ];
+    }
+
     constructor() {
 
         super();
 
+        /**
+         * Shadow root containing this component's controls.
+         * @type {ShadowRoot}
+         */
         this.myElement = this.attachShadow({ mode: 'open' });
 
-        // needed for setting inputs when value attribute is added to chronlyHMS 
-        // &lt;chronly-hms id="bobPrepop" value="99:09:09.999">&lt;/chronly-hms>
-
-        this.value = this.getAttribute('value');
-
         this.boot();
 
     }  // end constructor
 
+    /**
+     * Updates the rendered control when an observed attribute changes.
+     *
+     * @param {string} name - Changed attribute name.
+     * @param {?string} oldValue - Previous attribute value.
+     * @param {?string} newValue - New attribute value, or null when removed.
+     * @returns {void}
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+
+        if (oldValue === newValue) {
+            return;
+        }
+
+        if (name !== 'value') {
+            this.updateVisibleFields();
+            this.updateDividers();
+            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
-     * so in js use var x = document.querySelector("#bobPrepop").value; 
-     * @return {duration}
+     * so in js use var x = document.querySelector("#bobPrepop").value;
+     * @returns {?string} Duration in `HH:mm:ss.SSS` format, or null before initialization.
      */
 
     get value() {
@@ -89,69 +151,84 @@ class InputDuration extends HTMLElement {
 
 
     /**
-    * set the input-duration value
-    * so in js use document.querySelector("#bobPrepop").value = "05:05:05.005"
-    * @return {duration}
-    * @param {duration} can be html attribute or set in js
+    * Sets the duration using the fixed `HH:mm:ss.SSS` format.
+    *
+    * @param {string} val - Duration string, such as `05:05:05.005`.
+    * @returns {void}
     */
 
     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 {
-
-                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 (!val) {
+            this.resetInputs();
+            this.removeAttribute('value');
+            return;
+        }
 
-            }
+        if (typeof val !== 'string' || !this.isValidValue(val)) {
+            this.warnInvalidValue(val);
+            return;
+        }
 
-            //  I think this is for empty string to clear value
-            // gives a False bool and removes value from Webcomponent chronlyHMS
+        this.setInputValues(val);
 
-        } else {
+        if (this.getAttribute('value') !== val) {
+            this.setAttribute('value', val);
+        }
+    }
 
-            setTimeout(() => {
+    /**
+     * Checks whether a value follows the supported duration format and ranges.
+     *
+     * @param {*} val - Candidate value.
+     * @returns {boolean} Whether the value is valid `HH:mm:ss.SSS`.
+     */
+    isValidValue(val) {
+        return typeof val === 'string' &amp;&amp;
+            /^[0-9]{2}:[0-5][0-9]:[0-5][0-9]\.[0-9]{3}$/.test(val);
+    }
 
-                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';
+    /**
+     * Copies a validated duration string into the four shadow inputs.
+     *
+     * @param {string} val - Valid duration in `HH:mm:ss.SSS` format.
+     * @returns {void}
+     */
+    setInputValues(val) {
+        const timeArray = val.split(/[.:]+/);
+        const inputNames = ['startHours', 'startMinutes', 'startSeconds', 'startMilliSecs'];
+
+        inputNames.forEach((name, index) => {
+            const input = this.myElement.querySelector(`input[name="${name}"]`);
+            input.value = timeArray[index];
+            input.oldValue = input.value;
+        });
+    }
 
-            }, 0);
+    /**
+     * Resets all duration fields to zero.
+     *
+     * @returns {void}
+     */
+    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;
+        });
+    }
 
-        }
+    /**
+     * Reports a value that does not match the supported duration format.
+     *
+     * @param {*} val - Rejected value.
+     * @returns {void}
+     */
+    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.`);
     }
 
 
@@ -178,17 +255,13 @@ class InputDuration extends HTMLElement {
 
     /**
      * eventlistener that adds arrow key input of values (up/down) and place toggling (left/right) triggered by
-     * the change event of the input 
+     * the change event of the input
      * @method
      * @see boot()
      */
 
     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
@@ -259,18 +332,20 @@ class InputDuration extends HTMLElement {
         var spanIn = document.createElement("div");
 
         spanIn.classList.add('timeCase');
+        spanIn.setAttribute('part', 'control');
 
         var template = document.createElement('template');
 
         template.innerHTML = `
-          &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>
-          &lt;input type="number" class="sS D2 ts_digit" name="startSeconds" data-tp="3" min="-1" max="60" value="00">
-          &lt;span class="bds-s">.&lt;/span>
-          &lt;input type="number" class="sMS D3 ts_digit" name="startMilliSecs" data-tp="4" min="-10" max="1010" step="10" value="000">
-          &lt;div id="svgContainer">
+          &lt;input type="number" class="sH D2 ts_digit" part="field field-hours" name="startHours" data-tp="1" min="-1" max="100" value="00" >
+          &lt;span class="bds-h" part="divider divider-hours-minutes">:&lt;/span>
+          &lt;input type="number" class="sM D2 ts_digit" part="field field-minutes" name="startMinutes" data-tp="2" min="-1" max="60" value="00">
+          &lt;span class="bds-m" part="divider divider-minutes-seconds">:&lt;/span>
+          &lt;input type="number" class="sS D2 ts_digit" part="field field-seconds" name="startSeconds" data-tp="3" min="-1" max="60" value="00">
+          &lt;span class="bds-s" part="divider divider-seconds-milliseconds">.&lt;/span>
+          &lt;input type="number" class="sMS D3 ts_digit" part="field field-milliseconds" name="startMilliSecs" data-tp="4" min="-10" max="1010" step="10" value="000">
+          &lt;span class="bds-ms" part="divider divider-milliseconds-suffix" style="display: none">&lt;/span>
+          &lt;div id="svgContainer" part="icon">
               &lt;svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
               focusable="false" data-prefix="fal" data-icon="stopwatch" class="svg-inline--fa fa-stopwatch fa-w-14"
               role="img" viewBox="0 0 448 512">
@@ -278,82 +353,103 @@ class InputDuration extends HTMLElement {
               &lt;/svg>
           &lt;/div>
           &lt;style>
-                *:focus {
-                outline: none;
+                :host {
+                    display: inline-block;
+                    color: inherit;
+                    font: inherit;
+                    vertical-align: middle;
+                    --input-duration-gap: 0.08em;
+                    --input-duration-padding: 0.4em 0.55em;
+                    --input-duration-border-color: #9aa6b2;
+                    --input-duration-border-radius: 0.4em;
+                    --input-duration-background: transparent;
+                    --input-duration-color: inherit;
+                    --input-duration-focus-color: #2196f3;
+                    --input-duration-focus-outline: 3px solid #2196f3;
+                    --input-duration-focus-outline-offset: 2px;
+                    --input-duration-divider-color: currentColor;
+                    --input-duration-divider-opacity: 0.7;
+                    --input-duration-disabled-color: GrayText;
+                    --input-duration-icon-color: inherit;
                 }
 
-
-                div.timeCase{
-                display: inline-flex;
-                flex-direction: row;
-                max-width: 300px;
-                padding: 3px;
-                border-style: solid;
-                border-width: 1px;
-                border-radius: 2px;
+                .timeCase,
+                .timeCase[part~="control"] {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--input-duration-gap);
+                    max-width: 100%;
+                    padding: var(--input-duration-padding);
+                    border: 1px solid var(--input-duration-border-color);
+                    border-radius: var(--input-duration-border-radius);
+                    background: var(--input-duration-background);
+                    color: var(--input-duration-color);
+                    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: var(--input-duration-focus-color);
+                    outline: var(--input-duration-focus-outline);
+                    outline-offset: var(--input-duration-focus-outline-offset);
                 }
 
-
-                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: var(--input-duration-divider-color);
+                    opacity: var(--input-duration-divider-opacity);
                 }
 
+                #svgContainer {
+                    display: inline-flex;
+                    width: 1em;
+                    height: 1em;
+                    flex: 0 0 auto;
+                    align-items: center;
+                    justify-content: center;
+                    margin-left: 0.2em;
+                    color: var(--input-duration-icon-color);
+                }
 
-                .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: var(--input-duration-disabled-color);
+                    cursor: not-allowed;
+                    opacity: 0.65;
                 }
                 &lt;/style> `
 
@@ -366,7 +462,7 @@ class InputDuration extends HTMLElement {
 
     /**
      * eventlistener that adds number looping for up and down keys triggered by
-     * the change event of the input 
+     * the change event of the input
      * @method
      * @see boot()
      */
@@ -432,7 +528,7 @@ class InputDuration extends HTMLElement {
 
 
     /**
-    * eventlistener that adds number input for keyed values triggered by the keyup event
+    * eventlistener that filters number input and advances between fields
     * @method
     * @see boot()
     */
@@ -445,26 +541,13 @@ 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 )
-
-            console.log('inputElement: ' + inputElement);
-            window.inputElement = inputElement;
-
-            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 = "";
-                    }
+            inputElement.oldValue = inputElement.value;
+
+            inputElement.addEventListener('input', function () {
+                if (inputFilter(this.value)) {
+                    this.oldValue = this.value;
+                } else {
+                    this.value = this.oldValue;
                 }
             });
         }
@@ -478,7 +561,7 @@ class InputDuration extends HTMLElement {
             var newV = /^([0-9]?|[0-9][0-9]?)$/.test(value);
 
 
-            if (value.length === 2) {
+            if (newV &amp;&amp; value.length === 2) {
 
                 mE.querySelector('input.sM').focus();
                 mE.querySelector('input.sM').select();
@@ -495,7 +578,7 @@ class InputDuration extends HTMLElement {
 
             var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
 
-            if (value > 5 || value.length === 2) {
+            if (newV &amp;&amp; (value > 5 || value.length === 2)) {
 
                 mE.querySelector('input.sS').focus();
                 mE.querySelector('input.sS').select();
@@ -511,7 +594,7 @@ class InputDuration extends HTMLElement {
 
             var newV = /^([0-9]?|[0-5][0-9]?)$/.test(value);
 
-            if (value > 5 || value.length === 2) {
+            if (newV &amp;&amp; (value > 5 || value.length === 2)) {
 
                 mE.querySelector('input.sMS').focus();
                 mE.querySelector('input.sMS').select();
@@ -529,7 +612,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 &amp;&amp; value.length === 3) {
 
                 mE.querySelector('input.sMS').blur();
 
@@ -543,7 +626,7 @@ class InputDuration extends HTMLElement {
 
     /**
      * eventlistener that adds 0s to preface numbers less than 10 triggered by
-     * the change event of the input 
+     * the change event of the input
      * @method
      * @see boot()
      */
@@ -567,11 +650,11 @@ class InputDuration extends HTMLElement {
         }));
 
     }
-    
+
 
     /**
      * eventlistener that adds click to activate input of values by the keyboard triggered by
-     * the click event of the input 
+     * the click event of the input
      * @method
      * @see boot()
      */
@@ -584,7 +667,7 @@ class InputDuration extends HTMLElement {
 
     /**
      * eventlistener that adds key filtering to stop letters (or other non-numerics) from being input triggered by
-     * the keypress event of the input 
+     * the keypress event of the input
      * @method
      * @see boot()
      */
@@ -606,25 +689,30 @@ class InputDuration extends HTMLElement {
     }
 
     /**
-     * Stop event propigation from the timeCase up through the DOM so when keys 
+     * 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();}); 
+
+        var closure = this;
+
+        closure.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();}));
 
     }
 
 
-    
+
     // formatting and behaviour options
 
     /**
      * disables entire control => read-only
-     * @method 
+     * @method
      */
 
     disable() {
@@ -639,31 +727,228 @@ class InputDuration extends HTMLElement {
 
 
     /**
-     * removes the hours, so the display is mm:ss.uuu
-     * @method
+     * Hides the hours field and its adjacent divider.
+     * Sets the `no-hours` attribute.
+     *
+     * @returns {void}
      */
+    hideHours() {
+        this.setAttribute('no-hours', '');
+    }
 
+    /**
+     * Shows the hours field and its adjacent divider.
+     * Removes the `no-hours` attribute.
+     *
+     * @returns {void}
+     */
+    showHours() {
+        this.removeAttribute('no-hours');
+    }
+
+    /**
+     * Backward-compatible alias for {@link InputDuration#hideHours}.
+     *
+     * @returns {void}
+     */
     noHours() {
+        this.hideHours();
+    }
 
-        var closure = this;
+    /**
+     * Hides the minutes field and its adjacent divider.
+     * Sets the `no-minutes` attribute.
+     *
+     * @returns {void}
+     */
+    hideMinutes() {
+        this.setAttribute('no-minutes', '');
+    }
+
+    /**
+     * Shows the minutes field and its adjacent divider.
+     * Removes the `no-minutes` attribute.
+     *
+     * @returns {void}
+     */
+    showMinutes() {
+        this.removeAttribute('no-minutes');
+    }
+
+    /**
+     * Backward-compatible alias for {@link InputDuration#hideMinutes}.
+     *
+     * @returns {void}
+     */
+    noMinutes() {
+        this.hideMinutes();
+    }
+
+    /**
+     * Hides the seconds field and its adjacent divider.
+     * Sets the `no-seconds` attribute.
+     *
+     * @returns {void}
+     */
+    hideSeconds() {
+        this.setAttribute('no-seconds', '');
+    }
+
+    /**
+     * Shows the seconds field and its adjacent divider.
+     * Removes the `no-seconds` attribute.
+     *
+     * @returns {void}
+     */
+    showSeconds() {
+        this.removeAttribute('no-seconds');
+    }
+
+    /**
+     * Backward-compatible alias for {@link InputDuration#hideSeconds}.
+     *
+     * @returns {void}
+     */
+    noSeconds() {
+        this.hideSeconds();
+    }
 
-        // hide chronly hours inputs on page
+    /**
+     * Hides the milliseconds field and its adjacent divider or suffix.
+     * Sets the `no-microseconds` attribute.
+     *
+     * @returns {void}
+     */
+    hideMicroSeconds() {
+        this.setAttribute('no-microseconds', '');
+    }
 
-        closure.shadowRoot.querySelectorAll(".timeCase input.sH").forEach(el => el.style.display = 'none');
+    /**
+     * Shows the milliseconds field and its adjacent divider or suffix.
+     * Removes the `no-microseconds` attribute.
+     *
+     * @returns {void}
+     */
+    showMicroSeconds() {
+        this.removeAttribute('no-microseconds');
+    }
 
+    /**
+     * Backward-compatible alias for {@link InputDuration#hideMicroSeconds}.
+     *
+     * @returns {void}
+     */
+    noMicroSeconds() {
+        this.hideMicroSeconds();
+    }
 
-        // hide the hours colon on page
+    /**
+     * Replaces the hours/minutes separator.
+     * Also available through the `hours-divider` attribute.
+     *
+     * @param {string} text - Divider text to display.
+     * @returns {void}
+     */
+    setHoursDivider(text) {
+        this.setAttribute('hours-divider', text);
+    }
 
-        closure.shadowRoot.querySelectorAll(".timeCase span.bds-h").forEach(el => el.style.display = 'none');
+    /**
+     * Replaces the minutes/seconds separator.
+     * Also available through the `minutes-divider` attribute.
+     *
+     * @param {string} text - Divider text to display.
+     * @returns {void}
+     */
+    setMinutesDivider(text) {
+        this.setAttribute('minutes-divider', text);
+    }
 
+    /**
+     * Replaces the seconds/milliseconds separator.
+     * Also available through the `seconds-divider` attribute.
+     *
+     * @param {string} text - Divider text to display.
+     * @returns {void}
+     */
+    setSecondsDivider(text) {
+        this.setAttribute('seconds-divider', text);
     }
-} 
+
+    /**
+     * Sets a suffix to display after milliseconds.
+     * Also available through the `microseconds-divider` attribute.
+     *
+     * @param {string} text - Suffix text to display.
+     * @returns {void}
+     */
+    setMicroSecondsDivider(text) {
+        this.setAttribute('microseconds-divider', text);
+    }
+
+    /**
+     * Synchronizes field and divider visibility with the `no-*` attributes.
+     *
+     * @returns {void}
+     */
+    updateVisibleFields() {
+        const hiddenFields = {
+            'no-hours': '.sH',
+            'no-minutes': '.sM',
+            'no-seconds': '.sS',
+            'no-microseconds': '.sMS'
+        };
+        const hiddenDividers = {
+            '.bds-h': ['no-hours', 'no-minutes'],
+            '.bds-m': ['no-seconds'],
+            '.bds-s': ['no-microseconds'],
+            '.bds-ms': ['no-microseconds']
+        };
+
+        for (const [attribute, selector] of Object.entries(hiddenFields)) {
+            const field = this.myElement.querySelector(selector);
+            field.style.display = this.hasAttribute(attribute) ? 'none' : '';
+        }
+
+        for (const [selector, attributes] of Object.entries(hiddenDividers)) {
+            const divider = this.myElement.querySelector(selector);
+            const shouldHide = attributes.some(attribute => this.hasAttribute(attribute));
+            divider.style.display = shouldHide ? 'none' : '';
+        }
+    }
+
+    /**
+     * Synchronizes divider text with the corresponding divider attributes.
+     *
+     * @returns {void}
+     */
+    updateDividers() {
+        const dividers = {
+            'hours-divider': ['.bds-h', ':'],
+            'minutes-divider': ['.bds-m', ':'],
+            'seconds-divider': ['.bds-s', '.'],
+            'microseconds-divider': ['.bds-ms', '']
+        };
+
+        for (const [attribute, [selector, defaultText]] of Object.entries(dividers)) {
+            const divider = this.myElement.querySelector(selector);
+            const text = this.getAttribute(attribute) ?? defaultText;
+            divider.textContent = text;
+            if (selector === '.bds-ms') {
+                divider.style.display = text &amp;&amp; !this.hasAttribute('no-microseconds') ? '' : 'none';
+            }
+        }
+    }
+}
 // 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</code></pre>
+// an option is to make all above an IIFE
+</code></pre>
         </article>
     </section>
 
@@ -679,7 +964,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 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>