NumericTextBoxComponent (Angular): Implement Vertical Spinner Buttons

[WenatexIT]

Hello

 

In this component I miss vertical spinners, so I extended your implementation

 

It would be great if you could adopt my implementation in your branch, so I don't have to maintain a private package for each new release of the kendo-angular-inputs package

 

Vertical spinners are much more useable when it comes to mobile devices, and the changes are minimal

 

• In the HTML-Template two additional <spans> for the extra buttons

<ng-container kendoNumericTextBoxLocalizedMessages
    i18n-increment="kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox"
    increment="Increase value"
    i18n-decrement="kendo.numerictextbox.decrement|The title for the **Decrement** button in the NumericTextBox"
    decrement="Decrease value"
>
</ng-container>
<span class="k-numeric-wrap" [class.k-state-disabled]="disabled" [class.k-state-focused]="focused">
    <span class="k-select" *ngIf="spinners && verticalSpinners" [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }">
        <span
            (mousedown)="arrowPress(ArrowDirection.Down, $event)"
            [attr.aria-label]="decrementTitle"
            [title]="decrementTitle"
            [class.k-state-active]="arrowDirection === ArrowDirection.Down"
            class="k-link"
        >
            <i class="fa fa-minus k-icon-vertical"></i>
        </span>
    </span>
    <input
    role="spinbutton"
    class="k-input"
    autocomplete="off"
    autocorrect="off"
    [id]="focusableId"
    [attr.aria-valuemin]="min"
    [attr.aria-valuemax]="max"
    [attr.aria-valuenow]="value"
    [attr.title]="title"
    [attr.placeholder]="placeholder"
    [tabindex]="tabIndex"
    [class.k-formatted-value]="!focused"
    [disabled]="disabled"
    [readonly]="readonly"
    (focus)="handleFocus()"
    (blur)="handleBlur()"
    [kendoEventsOutsideAngular]="{ dragenter: handleDragEnter, keydown: handleKeyDown, input: handleInput }"
    #numericInput />
    <span class="k-select" *ngIf="spinners && !verticalSpinners" [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }">
        <span
            (mousedown)="arrowPress(ArrowDirection.Up, $event)"
            [attr.aria-label]="incrementTitle"
            [title]="incrementTitle"
            [class.k-state-active]="arrowDirection === ArrowDirection.Up"
            class="k-link k-link-increase"
        >
            <span class="k-icon k-i-arrow-n"></span>
        </span>
        <span
            (mousedown)="arrowPress(ArrowDirection.Down, $event)"
            [attr.aria-label]="decrementTitle"
            [title]="decrementTitle"
            [class.k-state-active]="arrowDirection === ArrowDirection.Down"
            class="k-link k-link-decrease"
        >
            <span class="k-icon k-i-arrow-s"></span>
        </span>
    </span>
    <span class="k-select" *ngIf="spinners && verticalSpinners" [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }">
        <span
            (mousedown)="arrowPress(ArrowDirection.Up, $event)"
            [attr.aria-label]="incrementTitle"
            [title]="incrementTitle"
            [class.k-state-active]="arrowDirection === ArrowDirection.Up"
            class="k-link"
        >
            <i class="fa fa-plus k-icon-vertical"></i>
        </span>
    </span>
</span>

• An extra property

/**
 * Specifies whether the **Up** and **Down** spin buttons renered left and right of the input - spinners must be true.
 */
@Input() public verticalSpinners: boolean = false;

 

• A CSS class (I think you would adopt it to your structure)

.k-icon-vertical {
    margin-top: 10px;
    padding-left: 1px;
}

 

Best regards

Jürgen

[WenatexIT]

PS: It looks like this

 

[WenatexIT]

Image

[Dimiter Topalov]

Hi Jürgen,

Thank you for the provided code and suggestion. Please submit a feature request to our UserVoice portal, describing the desired layout and the motivation behind it so we can track the customer demand for such an enhancement and consider adding it in a future version of the Inputs package depending on the interest:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback

Meanwhile you can create a custom directive to customize the current layout and behavior of the NumericTextBox and use it over NumericTextBoxes in your application to avoid maintaining a private package for all new release of our package (or wrap the NumericTextBox in a custom component and manipulate its internals in accordance with your preference).

Regards,
Dimiter Topalov
Progress Telerik