tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance input component layout with labels and improve styling

Browse Source
This commit is contained in:
ncoronel
2026-06-26 10:18:43 -03:00
parent f1a4f51695
commit 0d46172325
6 changed files with 146 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -45,124 +45,150 @@
<hr class="section-divider" /> <hr class="section-divider" />
<div class="input-grid"> <div class="input-grid">
<app-input <div class="input-field">
type="search" <label for="search-input">Texto</label>
placeholder="Buscar producto" <app-input
[value]="textValue" id="search-input"
[maxlength]="24" type="search"
(valueChange)="textValue = $event" placeholder="Buscar producto"
> [value]="textValue"
Texto [maxlength]="24"
</app-input> (valueChange)="textValue = $event"
/>
</div>
<app-input <div class="input-field">
type="number" <label for="number-input">Numero</label>
placeholder="0" <app-input
[value]="numberValue" id="number-input"
(valueChange)="numberValue = $event" type="number"
> placeholder="0"
Numero [value]="numberValue"
</app-input> (valueChange)="numberValue = $event"
/>
</div>
<app-input <div class="input-field">
type="email" <label for="email-input">Email</label>
placeholder="mail@empresa.com" <app-input
[value]="email" id="email-input"
(valueChange)="email = $event" type="email"
> placeholder="mail@empresa.com"
Email [value]="email"
</app-input> (valueChange)="email = $event"
/>
</div>
<app-input <div class="input-field">
type="user" <label for="user-input">Usuario</label>
placeholder="Nombre de usuario" <app-input
[value]="user" id="user-input"
(valueChange)="user = $event" type="user"
> placeholder="Nombre de usuario"
Usuario [value]="user"
</app-input> (valueChange)="user = $event"
/>
</div>
<app-input <div class="input-field">
type="password-toggle" <label for="password-input">Password</label>
placeholder="********" <app-input
[value]="password" id="password-input"
(valueChange)="password = $event" type="password-toggle"
> placeholder="********"
Password [value]="password"
</app-input> (valueChange)="password = $event"
/>
</div>
<app-input <div class="input-field">
type="date" <label for="date-input">Fecha</label>
[value]="date" <app-input
(valueChange)="date = $event" id="date-input"
> type="date"
Fecha [value]="date"
</app-input> (valueChange)="date = $event"
/>
</div>
<app-input <div class="input-field">
type="period" <label for="period-input">Periodo</label>
[value]="period" <app-input
(valueChange)="period = $event" id="period-input"
> type="period"
Periodo [value]="period"
</app-input> (valueChange)="period = $event"
/>
</div>
<app-input <div class="input-field">
type="currency" <label for="amount-input">Moneda</label>
placeholder="0" <app-input
[value]="amount" id="amount-input"
(valueChange)="amount = $event" type="currency"
> placeholder="0"
Moneda [value]="amount"
</app-input> (valueChange)="amount = $event"
/>
</div>
<app-input <div class="input-field">
type="percent" <label for="percent-input">Porcentaje</label>
placeholder="0" <app-input
[value]="percent" id="percent-input"
(valueChange)="percent = $event" type="percent"
> placeholder="0"
Porcentaje [value]="percent"
</app-input> (valueChange)="percent = $event"
/>
</div>
<app-input <div class="input-field">
placeholder="Campo deshabilitado" <label for="disabled-input">Deshabilitado</label>
[value]="disabledValue" <app-input
[disabled]="true" id="disabled-input"
> placeholder="Campo deshabilitado"
Deshabilitado [value]="disabledValue"
</app-input> [disabled]="true"
/>
</div>
<app-input <div class="input-field">
type="editable" <label for="editable-input">Editable</label>
[value]="editableValue" <app-input
[disabled]="editableDisabled" id="editable-input"
(valueChange)="editableValue = $event" type="editable"
(disabledChange)="editableDisabled = $event" [value]="editableValue"
> [disabled]="editableDisabled"
Editable (valueChange)="editableValue = $event"
</app-input> (disabledChange)="editableDisabled = $event"
/>
</div>
<app-input <div class="input-field">
type="email" <label for="invalid-input">Invalido</label>
placeholder="mail@empresa.com" <app-input
[value]="invalidEmail" id="invalid-input"
[invalid]="true" type="email"
(valueChange)="invalidEmail = $event" placeholder="mail@empresa.com"
> [value]="invalidEmail"
Invalido [invalid]="true"
</app-input> (valueChange)="invalidEmail = $event"
/>
</div>
<div class="file-field"> <div class="file-field">
<app-input <div class="input-field">
type="file" <label for="file-input">Archivo</label>
accept=".pdf,.png,.jpg" <app-input
[fileName]="fileName" id="file-input"
[clearTrigger]="clearTrigger" type="file"
(fileChange)="onFileChange($event)" accept=".pdf,.png,.jpg"
> [fileName]="fileName"
Archivo [clearTrigger]="clearTrigger"
</app-input> (fileChange)="onFileChange($event)"
/>
</div>
<app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button> <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
</div> </div>

5
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
View File

@@ -65,6 +65,11 @@ h1 {
gap: 1rem; gap: 1rem;
} }
.input-field {
display: grid;
gap: 0;
}
.file-field { .file-field {
display: grid; display: grid;
gap: 0.75rem; gap: 0.75rem;

8
src/app/shared/components/input/input.component.html
View File

@@ -1,7 +1,3 @@
<label [for]="id" class="input-label">
<ng-content />
</label>
<div <div
class="input-control" class="input-control"
[ngClass]="{ [ngClass]="{
@@ -20,8 +16,8 @@
<input <input
#inputElement #inputElement
[id]="id" [id]="id()"
[name]="id" [name]="id()"
[type]="inputType()" [type]="inputType()"
[ngClass]="inputClasses()" [ngClass]="inputClasses()"
[disabled]="isInputDisabled()" [disabled]="isInputDisabled()"

6
src/app/shared/components/input/input.component.scss
View File

@@ -4,12 +4,6 @@
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.input-label {
display: block;
margin-bottom: 0.375rem;
font-weight: 500;
}
.input-control { .input-control {
position: relative; position: relative;
} }

4
src/app/shared/components/input/input.component.ts
View File

@@ -66,8 +66,10 @@ export class InputComponent {
private readonly editableDisabled = signal(false); private readonly editableDisabled = signal(false);
private readonly passwordVisible = signal(false); private readonly passwordVisible = signal(false);
private lastClearTrigger = 0; private lastClearTrigger = 0;
private readonly defaultId = `app-input-${globalThis.crypto.randomUUID()}`;
readonly invalid = input(false); readonly invalid = input(false);
readonly id = input(this.defaultId);
readonly placeholder = input(''); readonly placeholder = input('');
readonly value = input<string | number>(''); readonly value = input<string | number>('');
readonly maxlength = input<number | null>(null); readonly maxlength = input<number | null>(null);
@@ -85,8 +87,6 @@ export class InputComponent {
readonly fileChange = output<File | null>(); readonly fileChange = output<File | null>();
readonly visibleChange = output<boolean>(); readonly visibleChange = output<boolean>();
protected readonly id = `app-input-${globalThis.crypto.randomUUID()}`;
protected readonly inputType = computed(() => { protected readonly inputType = computed(() => {
const type = this.type(); const type = this.type();

6
src/styles.scss
View File

@@ -10,3 +10,9 @@
:root { :root {
--bs-body-font-family: "Gotham", sans-serif; --bs-body-font-family: "Gotham", sans-serif;
} }
label {
display: block;
margin-bottom: 0.375rem;
font-weight: 500;
}