<div class="kilometer-input-wrapper" [class.focused]="isFocused" [class.disabled]="disabled" [class.readonly]="field.readOnly" [class.has-value]="hasValue">
  <div class="input-container">
    <input
      [id]="field.key"
      type="text"
      [placeholder]="field.placeholder || ' '"
      [value]="displayValue"
      [disabled]="disabled"
      [readonly]="field.readOnly"
      (input)="onInput($event)"
      (focus)="onFocus()"
      (blur)="onBlur()"
      (keypress)="onKeyPress($event)"
      autocomplete="off"
      class="kilometer-input"
      [class.has-value]="hasValue"
    />
    
    <label [for]="field.key" class="input-label">
      {{ field.label }}
      <span *ngIf="field.required" class="required-indicator">*</span>
    </label>
    
    <span class="suffix" *ngIf="displayValue && !isFocused">{{ suffix }}</span>
  </div>
</div> 