feat: add search input type with icon support and update styles

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

@@ -46,6 +46,7 @@
 
       <div class="input-grid">
         <app-input
+          type="search"
           placeholder="Buscar producto"
           [value]="textValue"
           [maxlength]="24"

src/app/shared/components/input/input.component.html

@@ -32,6 +32,12 @@
     [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() === 'file') {
     <span class="input-file-name" [class.input-file-name-empty]="!resolvedFileName()">
       {{ resolvedFileName() || 'Sin archivo...' }}

src/app/shared/components/input/input.component.scss

@@ -14,6 +14,16 @@
   position: relative;
 }
 
+.input-search-icon {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  z-index: 1;
+  color: #495057;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
 .form-control {
   min-height: 40px;
   padding: 0.625rem 1rem;
@@ -29,6 +39,10 @@
   }
 }
 
+.input-with-search-icon {
+  padding-right: 2.5rem;
+}
+
 input[type='file'].form-control {
   padding-right: 1rem;
   color: transparent;

src/app/shared/components/input/input.component.ts

@@ -13,6 +13,7 @@ import {
 import { NgClass } from '@angular/common';
 
 export type AppInputType =
+  | 'search'
   | 'text'
   | 'number'
   | 'email'
@@ -26,6 +27,7 @@ export type AppInputType =
 
 const DEFAULT_TYPE: AppInputType = 'text';
 const INPUT_TYPES = new Set<AppInputType>([
+  'search',
   'text',
   'number',
   'email',
@@ -81,7 +83,7 @@ export class InputComponent {
   protected readonly inputType = computed(() => {
     const type = this.type();
 
-    if (type === 'currency' || type === 'percent' || type === 'editable') {
+    if (type === 'search' || type === 'currency' || type === 'percent' || type === 'editable') {
       return 'text';
     }
 
@@ -95,6 +97,7 @@ export class InputComponent {
   protected readonly inputClasses = computed(() => ({
     'form-control': true,
     'is-invalid': this.invalid(),
+    'input-with-search-icon': this.type() === 'search',
     'input-with-prefix': this.type() === 'currency',
     'input-with-suffix': this.type() === 'percent',
     'input-with-icon': this.type() === 'editable'

src/styles.scss

@@ -1,6 +1,8 @@
 
 @use "./fonts";
 
+@import "@fortawesome/fontawesome-free/css/all.min.css";
+
 @import "./theme";
 
 @import "../node_modules/bootstrap/scss/bootstrap";