npm package: @gecosuy/angular-loader
Description: Librería utilitaria para manejo de loaders
Latest version: 21.0.1

# Angular Loader

Librería utilitaria para manejo de loaders.

## Uso

Maneja 2 tipos de loader, uno global que se debe agregar en el `app.component` y cubre toda la pantalla. Y luego permite definición de multiples loaders internos nombrados.  
Además cuenta con un interceptor HTTP para poder usar si se requiere, para mostrar automáticamente un loader en los request http.

### Importar el módulo:

En el AppModule se debe importar el `AngularLoaderModule` y ademas agregar schemas: [CUSTOM_ELEMENTS_SCHEMA].

### Agregar en el HTML

Agregar el loader en el html de la siguiente forma:

```html
<lib-angular-loader ...></lib-angular-loader>
```

Se puede dar valor a las siguientes propiedades como inputs del componente, en otro caso se toman valores por defecto:

-   name: obligatorio para loader internos y NO se debe pasar para el loader global
-   message: mensaje a mostrar junto con el indicador de loading
-   backdropColor: color del backdrop
-   type: tipo de loader, ver https://labs.danielcardoso.net/load-awesome/animations.html
-   size: tamaño
-   color: color del indicador

Además estas propiedades pueden ser redefinidas cuando se llama al loader si se requiere.

### Agregar las animaciones a usar en el angular.json

Cada una de las animaciones que se quieran usar (los diferentes 'type' que se quieran usar en la app), deben ser agregados en los `styles` del el `angular.json` como indica la librería ngx-spinner: https://www.npmjs.com/package/ngx-spinner#usage.

### Invocar el loader

Se utiliza el `AngularLoaderService` para invocar al loader de la siguiente forma:

```typescript
...
constructor(private loader: AngularLoaderService) {}
...
this.loader.showGlobalLoader(/* puede incluir redefinición de opciones*/);
...
this.loader.hideGlobalLoader();
```

Las posibles opciones a pasar al invocar son:

```typescript
{
    name?: string;
    delay?: number;

    message?: string;
    /**
     * Debe ser en formato rgba con opacity
     */
    bdColor?: string;
    size?: LoaderSize;
    color?: string;
    /**
     * Alguna de las opciones de https://labs.danielcardoso.net/load-awesome/animations.html
     */
    type?: string;
}
```

### Usar Interceptor HTTP

Si se requiere además usar el interceptor entonces agregar en el AppModule la configuración:

```typescript
{
    provide: LOADER_CONFIG,
    useValue: {
        interceptor: {
            delay: 1500,
            customizeShowLoaderByRequest: (req: HttpRequest<any>) => {
                /* return true o false si se requiere mostrar o no segun el request */
            },
            customizeLoaderOptionsByRequest: (req: HttpRequest<any>) => {
                /* retornar una objeto LoaderConfig si se requiere customizar las opciones segun el request */
            }
        }
    }
},
{
    provide: HTTP_INTERCEPTORS,
    useClass: AngularLoaderHttpInterceptor,
    multi: true,
    deps: [AngularLoaderService, LOADER_CONFIG]
}
```

## Themming

Se pueden utilizar las siguientes variables para customizar como se ve el loader.
Estos son valores por defecto, luego al invocar se pueden pisar.

-   `--loader-indicator-color`: color del indicador de loader
-   `--loader-backdrop-color`: color del backdrop, debe ser en formato rgba con opacity, ejemplo rgba(50, 50, 50, 0.5)
-   `--loader-text-color`: color del texto
-   `--loader-text-font`: fuente del texto

## TODO

Testear el uso de loaders internos (no global)