I think you could override the size attribute by creating a new directive for the kendo-numerictextbox
with a size
input where the type is the enumerated kendo values or number. Then you would either set the NumericTextBoxComponent
's size if it is one of t he enumerated kendo values -or- set the native element's size
attribute if it is numeric.
Here is (untested) code to give you an idea:
import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs/main';
@Directive({
selector: '[kendo-numerictextbox]'
})
export class SizeOverrideDirective implements OnChanges {
@Input() customSize: 'small' | 'medium' | 'large' | 'none' | number;
constructor(private numericTextBox: NumericTextBoxComponent) { }
ngOnChanges(changes: SimpleChanges): void {
if (!changes.customSize) {
return;
}
if (changes.customSize.currentValue) {
if (['small', 'medium', 'large', 'none'].includes(changes.customSize.currentValue)) {
this.numericTextBox.size = changes.customSize.currentValue;
} else {
this.numericTextBox.numericInput.nativeElement.setAttribute('size', changes.customSize.currentValue);
}
} else if (!changes.customSize.firstChange) {
this.numericTextBox.size = null;
this.numericTextBox.numericInput.nativeElement.removeAttribute('size');
}
}
}