83 lines
2.3 KiB
HTML
83 lines
2.3 KiB
HTML
<div
|
|
class="input-control"
|
|
[ngClass]="{
|
|
'input-control-currency': type() === 'currency',
|
|
'input-control-percent': type() === 'percent',
|
|
'input-control-file': type() === 'file',
|
|
'input-control-editable': type() === 'editable',
|
|
'input-control-password-toggle': type() === 'password-toggle',
|
|
'input-control-disabled': isInputDisabled(),
|
|
'input-control-editable-active': isEditableActive()
|
|
}"
|
|
>
|
|
@if (type() === 'currency') {
|
|
<span class="input-prefix">$</span>
|
|
}
|
|
|
|
<input
|
|
#inputElement
|
|
[id]="id()"
|
|
[name]="id()"
|
|
[type]="inputType()"
|
|
[ngClass]="inputClasses()"
|
|
[disabled]="isInputDisabled()"
|
|
[placeholder]="placeholder()"
|
|
[value]="type() !== 'file' ? value() : null"
|
|
(input)="type() !== 'file' ? onValueChange($event) : null"
|
|
(paste)="onPaste($event)"
|
|
(change)="type() === 'file' ? onFileChange($event) : null"
|
|
[attr.maxlength]="type() !== 'file' ? maxlength() : null"
|
|
[attr.accept]="type() === 'file' ? accept() : null"
|
|
/>
|
|
|
|
@if (type() === 'search') {
|
|
<span class="input-search-icon" aria-hidden="true">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
</span>
|
|
}
|
|
|
|
@if (type() === 'user') {
|
|
<span class="input-user-icon" aria-hidden="true">
|
|
<i class="fa-solid fa-user"></i>
|
|
</span>
|
|
}
|
|
|
|
@if (type() === 'password-toggle') {
|
|
<button
|
|
type="button"
|
|
class="input-icon"
|
|
[disabled]="disabled()"
|
|
[attr.aria-label]="isPasswordVisible() ? 'Ocultar contraseña' : 'Mostrar contraseña'"
|
|
(click)="togglePasswordVisibility()"
|
|
>
|
|
<i
|
|
class="fa-solid"
|
|
[ngClass]="isPasswordVisible() ? 'fa-eye' : 'fa-eye-slash'"
|
|
aria-hidden="true"
|
|
></i>
|
|
</button>
|
|
}
|
|
|
|
@if (type() === 'file') {
|
|
<span class="input-file-name" [class.input-file-name-empty]="!resolvedFileName()">
|
|
{{ resolvedFileName() || 'Sin archivo...' }}
|
|
</span>
|
|
}
|
|
|
|
@if (type() === 'percent') {
|
|
<span class="input-suffix">%</span>
|
|
}
|
|
|
|
@if (type() === 'editable') {
|
|
<button
|
|
type="button"
|
|
class="input-icon"
|
|
[class.input-icon-active]="isEditableActive()"
|
|
[attr.aria-label]="isEditableActive() ? 'Deshabilitar edición' : 'Habilitar edición'"
|
|
(click)="toggleEditableState()"
|
|
>
|
|
<i class="fa-solid fa-pen" aria-hidden="true"></i>
|
|
</button>
|
|
}
|
|
</div>
|