Class: InputDuration

InputDuration()

new InputDuration()

Class for the Input-Duration webcomponent Boolean attributes `show-days`, `no-hours`, `no-minutes`, `no-seconds`, and `no-microseconds` control field visibility. String attributes `hours-divider`, `minutes-divider`, `seconds-divider`, and `microseconds-divider` customize the separators; `days-divider` customizes the day label. Divider values are rendered as text. The days field grows to fit larger counts and has extra spacing before its divider to emphasize the less-common unit. User edits update the public value and form state when the field changes, after its intermediate input has been normalized. The element is form-associated in supporting browsers; use `name`, `required`, and `disabled` attributes for form submission and validation.
Source:
Example
<input-duration no-microseconds hours-divider="h " microseconds-divider="ms"></input-duration>

Extends

  • HTMLElement

Members

dayFriendlyValue

Gets a normalized, unit-labeled duration.
Source:

disabled

Whether the control is disabled.
Source:

disabled

Sets whether the control is disabled.
Source:

myElement :ShadowRoot

Shadow root containing this component's controls.
Type:
  • ShadowRoot
Source:

validationMessage

Validation message for the current form state.
Source:

validity

Current form validity state.
Source:

value

Gets the last committed duration value.
Source:

value

Sets the duration using `HH:mm:ss.SSS` or `D:HH:mm:ss.SSS` format.
Source:

willValidate

Whether this control participates in constraint validation.
Source:

(static) observedAttributes

HTML attributes that update the component when changed.
Source:

Methods

add0s()

eventlistener that adds 0s to preface numbers less than 10 triggered by the change event of the input
Source:
See:
  • boot()

addArrowKeyInput()

Handles arrow-key adjustment and field navigation while keeping the active field selected.
Source:
See:
  • boot()

addClicksToActivate()

eventlistener that adds click to activate input of values by the keyboard triggered by the click event of the input
Source:
See:
  • boot()

addFormValueSync() → {void}

Commits edits after a field change, once its value has been normalized.
Source:
Returns:
Type
void

addHTML()

updates inputs-duration marked with shadow html and css
Source:
See:
  • boot()

addNumberLooping()

eventlistener that adds number looping for up and down keys triggered by the change event of the input
Source:
See:
  • boot()

addNumericInput()

Filters numeric input and advances to the next unit. If the next unit is hidden, focus leaves the control once the current field is complete.
Source:
See:
  • boot()

attributeChangedCallback(name, oldValuenullable, newValuenullable) → {void}

Updates the rendered control when an observed attribute changes.
Parameters:
Name Type Attributes Description
name string Changed attribute name.
oldValue string <nullable>
 Previous attribute value.
newValue string <nullable>
 New attribute value, or null when removed.
Source:
Returns:
Type
void

boot()

Called from constructor, sets up the html and event listeners
Source:

checkValidity() → {boolean}

Runs constraint validation and fires an invalid event when needed.
Source:
Returns:
Whether the control is valid.
Type
boolean

disable()

Disables the entire control and excludes it from form submission.
Source:

enable() → {void}

Enables the duration fields.
Source:
Returns:
Type
void

formDisabledCallback(disabled) → {void}

Disables or enables the internal fields when the form disables this control.
Parameters:
Name Type Description
disabled boolean Whether the control is disabled.
Source:
Returns:
Type
void

formResetCallback() → {void}

Restores the initial value when its form is reset.
Source:
Returns:
Type
void

formStateRestoreCallback(state, mode) → {void}

Restores the duration and required state saved by the browser.
Parameters:
Name Type Description
state string Serialized duration state.
mode string Browser restoration mode.
Source:
Returns:
Type
void

hideDays() → {void}

Hides the days field and its adjacent divider. Removes the `show-days` attribute.
Source:
Returns:
Type
void

hideHours() → {void}

Hides the hours field and its adjacent divider. Sets the `no-hours` attribute.
Source:
Returns:
Type
void

hideMicroSeconds() → {void}

Hides the milliseconds field and its adjacent divider or suffix. Sets the `no-microseconds` attribute.
Source:
Returns:
Type
void

hideMinutes() → {void}

Hides the minutes field and its adjacent divider. Sets the `no-minutes` attribute.
Source:
Returns:
Type
void

hideSeconds() → {void}

Hides the seconds field and its adjacent divider. Sets the `no-seconds` attribute.
Source:
Returns:
Type
void

isValidValue(val) → {boolean}

Checks whether a value follows the supported duration format and ranges.
Parameters:
Name Type Description
val * Candidate value.
Source:
Returns:
Whether the value follows a supported duration format.
Type
boolean

noHours() → {void}

Backward-compatible alias for InputDuration#hideHours.
Source:
Returns:
Type
void

noMicroSeconds() → {void}

Backward-compatible alias for InputDuration#hideMicroSeconds.
Source:
Returns:
Type
void

noMinutes() → {void}

Backward-compatible alias for InputDuration#hideMinutes.
Source:
Returns:
Type
void

noSeconds() → {void}

Backward-compatible alias for InputDuration#hideSeconds.
Source:
Returns:
Type
void

nonNumericBugInHTML()

eventlistener that adds key filtering to stop letters (or other non-numerics) from being input triggered by the keypress event of the input
Source:
See:
  • boot()

removeEprop()

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)
Source:

reportValidity() → {boolean}

Runs constraint validation and asks the browser to report any error.
Source:
Returns:
Whether the control is valid.
Type
boolean

resetInputs() → {void}

Resets all duration fields to zero.
Source:
Returns:
Type
void

setDaysDivider(text) → {void}

Replaces the day/hour separator. Also available through the `days-divider` attribute.
Parameters:
Name Type Description
text string Divider text to display.
Source:
Returns:
Type
void

setHoursDivider(text) → {void}

Replaces the hours/minutes separator. Also available through the `hours-divider` attribute.
Parameters:
Name Type Description
text string Divider text to display.
Source:
Returns:
Type
void

setInputValues(val) → {void}

Copies a validated duration string into the shadow inputs.
Parameters:
Name Type Description
val string Valid duration in `HH:mm:ss.SSS` format.
Source:
Returns:
Type
void

setMicroSecondsDivider(text) → {void}

Sets a suffix to display after milliseconds. Also available through the `microseconds-divider` attribute.
Parameters:
Name Type Description
text string Suffix text to display.
Source:
Returns:
Type
void

setMinutesDivider(text) → {void}

Replaces the minutes/seconds separator. Also available through the `minutes-divider` attribute.
Parameters:
Name Type Description
text string Divider text to display.
Source:
Returns:
Type
void

setSecondsDivider(text) → {void}

Replaces the seconds/milliseconds separator. Also available through the `seconds-divider` attribute.
Parameters:
Name Type Description
text string Divider text to display.
Source:
Returns:
Type
void

showDays() → {void}

Shows the days field and its adjacent divider. Sets the `show-days` attribute.
Source:
Returns:
Type
void

showHours() → {void}

Shows the hours field and its adjacent divider. Removes the `no-hours` attribute.
Source:
Returns:
Type
void

showMicroSeconds() → {void}

Shows the milliseconds field and its adjacent divider or suffix. Removes the `no-microseconds` attribute.
Source:
Returns:
Type
void

showMinutes() → {void}

Shows the minutes field and its adjacent divider. Removes the `no-minutes` attribute.
Source:
Returns:
Type
void

showSeconds() → {void}

Shows the seconds field and its adjacent divider. Removes the `no-seconds` attribute.
Source:
Returns:
Type
void

updateDividers() → {void}

Synchronizes divider text and shows one separator between each pair of visible units, including when intervening units are hidden.
Source:
Returns:
Type
void

updateFormValue() → {void}

Keeps the form-associated value synchronized with the displayed duration.
Source:
Returns:
Type
void

updateVisibleFields() → {void}

Synchronizes field and divider visibility with the `no-*` attributes. The days field grows for longer values; its minimum matches other fields.
Source:
Returns:
Type
void

warnInvalidValue(val) → {void}

Reports a value that does not match the supported duration format.
Parameters:
Name Type Description
val * Rejected value.
Source:
Returns:
Type
void