Input Number

<!-- Default -->
<div class="dso-input-number">

    <label for="default" class="control-label">
        Default
    </label>

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span>
        <dso-icon icon="minus-square"></dso-icon>
    </button>

    <input type="number" id="default" class="dso-input-step-counter" tabindex="-1" value="99" readonly>
    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>

<!-- Input Number Inactive -->
<div class="dso-input-number">

    <label for="inactive" class="control-label">
        Inactive input number
    </label>

    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verlagen (disabled)</span>
        <dso-icon icon="minus-square"></dso-icon>
    </button>

    <input type="number" id="inactive" class="dso-input-step-counter" tabindex="-1" value="99" readonly>
    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verhogen (disabled)</span>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>

<!-- Input Number Minimum Limit -->
<div class="dso-input-number">

    <label for="minimum-limit" class="control-label">
        Input number with minimum limit
    </label>

    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verlagen (disabled)</span>
        <dso-icon icon="minus-square"></dso-icon>
    </button>

    <input type="number" id="minimum-limit" class="dso-input-step-counter" tabindex="-1" min="0" value="0" readonly>
    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>

<!-- Input Number Maximum Limit -->
<div class="dso-input-number">

    <label for="maximum-limit" class="control-label">
        Input number with maximum limit
    </label>

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span>
        <dso-icon icon="minus-square"></dso-icon>
    </button>

    <input type="number" id="maximum-limit" class="dso-input-step-counter" tabindex="-1" max="99" value="5" readonly>
    <button type="button" disabled class="btn btn-link"><span class="sr-only">Aantal verhogen (disabled)</span>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>

<!-- No Label -->
<div class="dso-input-number">

    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verlagen</span>
        <dso-icon icon="minus-square"></dso-icon>
    </button>

    <input type="number" id="no-label" class="dso-input-step-counter" tabindex="-1" value="99" readonly>
    <button type="button" class="btn btn-link"><span class="sr-only">Aantal verhogen</span>
        <dso-icon icon="plus-square"></dso-icon>
    </button>

</div>

<div class="dso-input-number">
  {% if label %}
    <label for="{{ id }}" class="control-label">
      {{ label }}
    </label>
  {% endif %}
  {% render '@button', {type: 'button', modifier: 'link', label: minusButtonLabel, icon: 'minus-square', iconOnly: 'true', disabled: minusButtonInactive} %}
  <input
    type="number"
    id="{{ id }}"
    class="dso-input-step-counter"
    tabindex="-1"
    {{- attributes(
      [min, 'min', min],
      [max, 'max', max]
    ) -}}
    value="{{ count }}"
    readonly
  >
  {% render '@button', {type: 'button', modifier: 'link', label: plusButtonLabel, icon: 'plus-square', iconOnly: 'true', disabled: plusButtonInactive} %}
</div>

/* Default */
__title: default
label: Default
id: default
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen

/* Input Number Inactive */
__title: Inactive
label: Inactive input number
id: inactive
count: 99
minusButtonLabel: Aantal verlagen (disabled)
plusButtonLabel: Aantal verhogen (disabled)
minusButtonInactive: true
plusButtonInactive: true

/* Input Number Minimum Limit */
__title: Minimum limit (optional)
label: Input number with minimum limit
id: minimum-limit
count: 0
minusButtonLabel: Aantal verlagen (disabled)
plusButtonLabel: Aantal verhogen
min: '0'
minusButtonInactive: true

/* Input Number Maximum Limit */
__title: Maximum limit (optional)
label: Input number with maximum limit
id: maximum-limit
count: 5
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen (disabled)
max: '99'
plusButtonInactive: true

/* No Label */
__title: no label
label: null
id: no-label
count: 99
minusButtonLabel: Aantal verlagen
plusButtonLabel: Aantal verhogen