Input Stepper¶

The h-input-stepper webcomponent allows the user to manipulate value within input via surrounded buttons. This element contains 2 types of differently functional webcomponents: h-display-stepper which is displaying a value and two h-button-steppers which are responsible for the value modification.

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Features:

Keyboard support
Click on input selects whole value
Double click on input show blinking cursor on the selected place

Attributes¶

Attribute name	Type	Default	Description
`min`	integer	-Infinity	minimum value which can be reached and not undertaken
`max`	integer	Infinity	maximum value which can be reached and not overtaken
`step`	integer	1	this attribute has to be set for browser behavior for input type number
`value`	string	NULL	describes beginning value for input stepper
`control-id`	string	''	adds ID to input HTML element and allows control it via label (for)
`allowed-number-of-fraction-digits`	integer	NULL	allows values to be fractional and fraction is limited to the provided argument

If the value is not set and the min has default value as -Infinity then h-input-stepper does not show any beginning value and that empty line treats as zero.
The value for attribute value cannot be lower than min. If this situation happens by mistake then the selected min will be assigned to the value

DOM Events¶

This webcomponent listens to the following DOM events:

This webcomponent also dispatches the following DOM events:

valueChanged

Input Stepper example¶

HTML

<h-input-stepper class="input-stepper" min="0" max="9999" control-id="product-amount-123" value="5" allowed-number-of-fraction-digits="3" step="1">
    <h-button-stepper step="-1" class="input-stepper__button">
        Button visualization 1
    </h-button-stepper>
    <h-display-stepper class="input-stepper__value"></h-display-stepper>
        Unit name

    <h-button-stepper step="1" class="input-stepper__button input-stepper_increment">
        Button visualization 2
    </h-button-stepper>
</h-input-stepper>

Usage¶

To proper work this component requires two children components: - h-button-stepper with attribute type which defines action and this allows only increment and decrement values. - h-display-stepper to display modified value. They have to be wrapped up by h-input-stepper component (all that described below). Between children component can be any other independent HTML element like mentioned on an example above Unit name also a visualization of buttons can be wrapped up h-button-stepper component as it can be seen above.

Hook¶

To get information about last amount selected there is possibility to connect to the custom event INPUT_STEPPER_CUSTOM_EVENT_NAMES.valueChanged (valueChanged) with a body:

{
    bubbles: boolean,
    detail: {
        value: number
    }
}

Inner h-input-stepper components¶

h-button-stepper¶

The h-button-stepper is just a button handled by parent h-input-stepper webcomponent.

h-button-stepper attributes¶

Attribute name	Type	Default	Description
`type`	string	NULL	allowed values `increment` and `decrement`

h-display-stepper¶

The h-display-stepper is a webcomponent which is showing a value in rendered HTMLInputElement. This component strongly depends based on h-input-stepper, without is just a simple input HTMLElement number type.