ng-nova

Servicios de ayuda para peticiones a la api desarrollada con Phpnv/api

Install

npm i ng-nova

@angular/material dependecia requerida para su fucnionamiento.

ng add @angular/material

Personalizar

Para personalizar los estilos de los dialogos utilize la siguiente estructura del scss

::ng-deep{
    .nv-message-box{
        .mat-dialog-container{
            padding-top: 5px;
            position: relative;
            min-width: 300px;

            .mat-dialog-title{
                display: flex;
                align-items: center;
                column-gap: 5px;
                margin: 0;
                padding-right: 25px;
            }

            .mat-dialog-content{
                margin-top: 8px;
            }
            
            .mat-dialog-actions{
                display: flex;
                align-items: center;
                column-gap: 10px;
                &.center{
                    justify-content: center;
                }
                &.end{
                    justify-content: flex-end;
                }

                .nv-message-box-bton-content{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .nv-message-box-btn-icon-cancel{
                    color: rgba(212, 14, 14, 0.74);
                }
                .nv-message-box-btn-icon-ok{

                    color: rgba(0, 128, 0, 0.743);
                }
            }
        }
    }

    .nv-message-box-alert{
        .mat-dialog-container{
            // box-shadow: 0 0 20px 1px rgba(255, 255, 0, 0.4);
            .nv-message-box-icon{
                color: rgb(156, 156, 21);
            }
            .nv-message-box-btn-close{
                color: rgb(156, 156, 21);
            }
        }
    }
    .nv-message-box-error{
        .mat-dialog-container{
            // box-shadow: 0 0 20px 1px rgba(255, 0, 0, 0.4);
            .nv-message-box-icon{
                color: rgb(128, 7, 7);
            }
            .nv-message-box-btn-close{
                color: rgb(128, 7, 7);
            }
        }
    }
    .nv-message-box-disable-close-lock{
        .mat-dialog-container{
            animation-name: nv-message-box-disable-close-lock-show;
            animation-duration: 0.5s;
        }
    }
}

.nv-message-box-btn-close{
    position: absolute;
    top: 2px;
    right: 4px;
    mat-icon{
        font-weight: 600;
    }
}

@keyframes nv-message-box-disable-close-lock-show{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}