Angular Overlays

Librería utilitaria para despliegue de diferentes tipos de diálogos, como ser pedidos de confirmación, selección de opciones, diálogos de info, error.
También funcionalidades para despliegue de algunos tipos de bottom sheets como ser listado de opciones.
La librería cuenta con funcionalidades simples para mostrar diálogos y bottom sheets comunes, si se requiere mostrar un diálogo o bottom sheet con un componente custom entonces utilizar directamente el MatDialgo o MatBottomSheet de Angular Material.

Uso

Dependencias

• Angular Material (@angular/material y "@angular/cdk)

Iconos

Los iconos que se quieran usar deben estar definidos como SVG, agregados a la app de la siguiente forma:

export class AppModule {
    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
        iconRegistry.addSvgIcon('icon_name', sanitizer.bypassSecurityTrustResourceUrl('assets/path/to/icon.svg'));
    }
}

Importación

• instalar la lib mediante npm i @gecosuy/angular-overlays
• importar el AngularOverlaysModule en el AppModule de la app
• inyectar y utilizar el AngularOverlaysService donde se requiera utilizar diálogos

Menu

Cuando un menu tiene un conjunto vacio de acciones aparece una opcion que indica "Sin acciones". Este texto puede ser personalizado mediante el input noItemsText.

Themming

El Theming esta por fuera de la librería, se debe manejar ajustandolo en la app cliente.
Lo único que necesita la librería es tener definida la variable CSS --overlays-principal-color que será usada para color de títulos, botones de acción e iconos.
Para cambiar color de letra del item "sin acciones" se puede utilizar la variable CSS --overlays-shade-color.