Group Input Number

<!-- Default -->
<div class="form-group dso-input-number">
    <div class="dso-label-container">
        <label for="default" class="control-label">
            Default
        </label>
    </div>
    <div class="dso-field-container">
        <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="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>
    </div>
</div>

<!-- Input Number Inactive -->
<div class="form-group dso-input-number">
    <div class="dso-label-container">
        <label for="inactive" class="control-label">
            Inactive input number
        </label>
    </div>
    <div class="dso-field-container">
        <div class="dso-input-number">

            <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>
    </div>
</div>

<!-- Input Number Minimum Limit -->
<div class="form-group dso-input-number">
    <div class="dso-label-container">
        <label for="minimum-limit" class="control-label">
            Input number with minimum limit
        </label>
    </div>
    <div class="dso-field-container">
        <div class="dso-input-number">

            <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" 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>
    </div>
</div>

<!-- Input Number Maximum Limit -->
<div class="form-group dso-input-number">
    <div class="dso-label-container">
        <label for="maximum-limit" class="control-label">
            Input number with maximum limit
        </label>
    </div>
    <div class="dso-field-container">
        <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="maximum-limit" 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>
    </div>
</div>

{% set localId = generateLocalId(prefix, id) %}

<div class="form-group dso-input-number">
  <div class="dso-label-container">
    <label for="{{ localId }}" class="control-label">
      {{ label }}
    </label>
  </div>
  <div class="dso-field-container">
    {% render '@input-number', {
      id: localId,
      count: count,
      minusButtonLabel: minusButtonLabel,
      minusButtonInactive: minusButtonInactive,
      plusButtonLabel: plusButtonLabel,
      plusButtonInactive: plusButtonInactive
    } %}
  </div>
</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
minusButtonInactive: true

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