<div class="custom-input-wrapper" [class.readonly]="field.readOnly">
    <input
        [type]="field.type"
        [id]="field.key"
        [placeholder]="field.placeholder || ' '"
        [value]="value"
        (input)="onInput($event)"
        (blur)="onBlur()"
        (keypress)="onKeyPress($event)"
        [mask]="field.mask"
        [disabled]="disabled"
        [readonly]="field.readOnly"
        [dropSpecialCharacters]="false"
        [class.readonly-input]="field.readOnly"
    />
    <label [for]="field.key">
        {{ field.label }}
        <span *ngIf="field.required" class="required-indicator">*</span>
    </label>
</div>