<div class="currency-input-wrapper" [class.readonly]="field.readOnly" [class.focused]="isFocused">
    <input
        #inputElement
        type="text"
        [id]="field.key"
        [placeholder]="field.placeholder || ' '"
        [value]="displayValue"
        (input)="onInput($event)"
        (focus)="onFocus()"
        (blur)="onBlur()"
        (keypress)="onKeyPress($event)"
        [disabled]="disabled || field.disabled"
        [readonly]="field.readOnly"
        [class.readonly-input]="field.readOnly"
        [class.has-value]="hasValue"
        autocomplete="off"
        inputmode="decimal"
    />
    <label [for]="field.key" [class.active]="hasValue || isFocused">
        {{ field.label }}
        <span *ngIf="field.required" class="required-indicator">*</span>
    </label>
    
    <!-- Ícone de moeda -->
    <div class="currency-icon" *ngIf="!field.readOnly">
        <i class="fas fa-dollar-sign"></i>
    </div>
    
    <!-- Informações de valor mínimo/máximo -->
    <div class="value-info" *ngIf="field.min !== undefined || field.max !== undefined">
        <small class="text-muted">
            <span *ngIf="field.min !== undefined">Mín: {{ formatCurrency(field.min) }}</span>
            <span *ngIf="field.min !== undefined && field.max !== undefined"> | </span>
            <span *ngIf="field.max !== undefined">Máx: {{ formatCurrency(field.max) }}</span>
        </small>
    </div>
</div> 