open-index/open-npm huggingface dataset:
npm package: @guajiritos/icon-selector
Description: `Guajiritos Icon Selector` es una librería destinada a la selección de íconos de material. Permite la selección del ícono a través de una interfaz visual amigable para el usuario.
Latest version: 20.0.1

# Guajiritos Icon Selector

`Guajiritos Icon Selector` es una librería destinada a la selección de íconos de material. Permite la selección del ícono a través de una interfaz visual amigable para el usuario.

## Instalación

Con `npm`

```sh
npm i @guajiritos/icon-selector --save
```

Con `yarn`

```sh
yarn add @guajiritos/icon-selector
```

Con `pnpm`

```sh
pnpm add @guajiritos/icon-selector
```

### Estilos y configuración del tema de Angular Material

La librería cuenta con una personalización predeterminada de estilos que puede agregar a su aplicación de la siguiente forma:

```scss
@import "@guajiritos/icon-selector/theme";


@include theme-guajiritos-icon-selector($custom-theme);
```

## Uso

Debe importar las dependencias para el correcto funcionamiento de la librería en su proyecto.

```ts
import { GuajiritosIconSelector } from "guajiritos-icon-selector";

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    GuajiritosIconSelector,
    BrowserAnimationsModule,
    MatDialogModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    MatIconModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Luego agregarla a su plantilla. Usando FormControl:

```html
<guajiritos-icon-selector [required]="true" [formControl]="form"></guajiritos-icon-selector>
```

y declarar el formulario reactivo

```ts
import {UntypedFormControl} from "@angular/forms";

form: UntypedFormControl = new UntypedFormControl({value: null, disabled: false});
```
o usando FormGroup:


```html
<div [formGroup]="form">
  <guajiritos-icon-selector [required]="true" formControlName="icon"></guajiritos-icon-selector>
</div>
```
y declarar un FormGroup

```ts
import {UntypedFormControl, UntypedFormGroup} from "@angular/forms";

form: UntypedFormGroup = new UntypedFormGroup({
  icon: new UntypedFormControl({value: null, disabled: false})
});
```

### Notas
```text
- El valor del required no es obligatorio.
- Para deshabilitar el componente es necesario deshabilitar el formulario reactivo.
```