wm-menu 1.2.8 → 1.3.0

package/bundles/wm-menu.umd.js

@@ -324,146 +324,6 @@
         return WmMenuServicioService;
     }());
 
-    var WmMenuComponent = /** @class */ (function () {
-        function WmMenuComponent(wmMenuServicioService) {
-            this.wmMenuServicioService = wmMenuServicioService;
-            this.menuSecundarioSel = new MenuSecundario();
-            this.menuLateralAbierto = false;
-            this.menuIdioma = [];
-        }
-        WmMenuComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.cargarMenuCuenta();
-            if (this.urlMenu && this.token) {
-                var helper = new angularJwt.JwtHelperService();
-                var decodedToken = helper.decodeToken(this.token);
-                this.wmMenuServicioService
-                    .menuApiObtener(this.urlMenu, decodedToken["id_usuario"], this.token)
-                    .subscribe(function (resp) {
-                    _this.menuPrincipal = _this.wmMenuServicioService.mapearMenu(resp);
-                });
-            }
-            if (this.urlIdiomas && this.token) {
-                var helper = new angularJwt.JwtHelperService();
-                var decodedToken = helper.decodeToken(this.token);
-                this.wmMenuServicioService
-                    .menuIdiomasObtener(this.urlIdiomas, decodedToken["id_usuario"], this.token)
-                    .subscribe(function (resp) {
-                    _this.menuIdioma = resp;
-                    _this.cargarMenuCuenta();
-                });
-            }
-            if (this.urlBaseAlmacenamiento && this.token) {
-                var helper = new angularJwt.JwtHelperService();
-                var decodedToken = helper.decodeToken(this.token);
-                this.wmMenuServicioService
-                    .almacenamientoApiObtener(this.urlBaseAlmacenamiento, decodedToken["id_usuario"], this.token)
-                    .subscribe(function (resp) {
-                    var utilizado = resp[0] && resp[0].Utilizado ? resp[0].Utilizado : 0;
-                    var total = resp[0] && resp[0].Total ? resp[0].Total : 0;
-                    _this.porcentajeUtilizado = Math.round((utilizado / total) * 100);
-                });
-            }
-        };
-        WmMenuComponent.prototype.clickMenuPrincipal = function (i) {
-            if (this.menuPrincipal[i].hijos && this.menuPrincipal[i].hijos.length) {
-                if (this.menuPrincipalSel == this.menuPrincipal[i]) {
-                    this.menuPrincipalSel = null;
-                }
-                else {
-                    this.menuPrincipalSel = this.menuPrincipal[i];
-                }
-            }
-        };
-        WmMenuComponent.prototype.clickMenuSecundario = function (i) {
-            this.menuSecundarioSel = this.menuSecundario[i];
-            this.menuPrincipalSel = null;
-        };
-        WmMenuComponent.prototype.cargarMenuCuenta = function () {
-            var _a;
-            if (this.urlCuentaSeguridad && this.token) {
-                var helper = new angularJwt.JwtHelperService();
-                var decodedToken = helper.decodeToken(this.token);
-                this.menuSecundario = [{
-                        titulo: decodedToken["unique_name"],
-                        icono: "account_circle",
-                        hijos: [
-                            { titulo: decodedToken["unique_name"], url: "", icono: "person" },
-                            { titulo: this.menuIdioma && this.menuIdioma.CambiarContrasenna ? this.menuIdioma.CambiarContrasenna : "Cambiar contraseña", url: this.urlCuentaSeguridad + "CambioContrasena", icono: "vpn_key" },
-                            this.activar2fa == "1" ? { titulo: this.menuIdioma && this.menuIdioma.Configurar2fa ? this.menuIdioma.Configurar2fa : "Configurar 2FA", url: this.urlCuentaSeguridad + "Habilitacion2FA", icono: "verified_user" } : null,
-                            this.urlguiasOnline != null && this.urlguiasOnline !== "" && ((_a = this.urlguiasOnline) === null || _a === void 0 ? void 0 : _a.length) != 0 ? { titulo: this.menuIdioma && this.menuIdioma.guiasOnline ? this.menuIdioma.guiasOnline : "Guias Online", url: this.urlguiasOnline, icono: "menu_book" } : null,
-                            { titulo: this.menuIdioma && this.menuIdioma.CerrarSesion ? this.menuIdioma.CerrarSesion : "Cerrar sesión", url: this.urlCuentaSeguridad + "CerrarSesion", icono: "exit_to_app" }
-                        ].filter(function (hijo) { return hijo != null; }),
-                    }];
-            }
-        };
-        WmMenuComponent.ctorParameters = function () { return [
-            { type: WmMenuServicioService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "logo", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "colorFondo", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "colorTexto", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "menuPrincipal", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "menuSecundario", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "urlMenu", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "token", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "urlCuentaSeguridad", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "activar2fa", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "urlguiasOnline", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "urlObtenerAlertasPanico", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "urlObtenerParametro", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "rutaAudio", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "nombreCliente", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "nombreUsuario", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "versionWeb", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "urlBaseAlmacenamiento", void 0);
-        __decorate([
-            core.Input()
-        ], WmMenuComponent.prototype, "urlIdiomas", void 0);
-        WmMenuComponent = __decorate([
-            core.Component({
-                selector: 'wm-menu',
-                template: "<div class=\"menu\" [ngStyle]=\"{'background-color': colorFondo, 'color': colorTexto}\">\r\n    <div class=\"d-lg-none\">\r\n        <button mat-icon-button (click)=\"menuLateralAbierto=!menuLateralAbierto; menuPrincipalSel = null\">\r\n            <mat-icon *ngIf=\"!menuLateralAbierto\" class=\"animate__animated animate__fadeInRight animate__faster\">menu\r\n            </mat-icon>\r\n            <mat-icon *ngIf=\"menuLateralAbierto\" class=\"animate__animated animate__fadeInLeft animate__faster\">close\r\n            </mat-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"d-lg-none logo-menu-principal\">\r\n        <img class=\"logo\" src=\"{{logo}}\">\r\n    </div>\r\n    <div class=\"d-none d-lg-block\">\r\n        <img class=\"logo\" src=\"{{logo}}\">\r\n        <div *ngFor=\"let menuItem of menuPrincipal; let i=index\" class=\"d-inline-block\">\r\n\r\n            <a *ngIf=\"menuItem.url\" mat-button [href]=\"menuItem.url\" (click)=\"clickMenuPrincipal(i)\">\r\n                {{menuItem.titulo}}\r\n            </a>\r\n            <button *ngIf=\"!menuItem.url\" mat-button (click)=\"clickMenuPrincipal(i)\">\r\n                {{menuItem.titulo}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <div class=\"info-adicional\">\r\n        <div class=\"datos border-r mt-1\" *ngIf=\"nombreCliente\">{{nombreCliente}}<mat-icon>people</mat-icon></div>\r\n        <div class=\"datos border-r mt-1\" *ngIf=\"nombreUsuario\">{{nombreUsuario}}<mat-icon>person_outline</mat-icon></div>\r\n        <div class=\"version\" *ngIf=\"versionWeb\">{{versionWeb}}</div>\r\n        <div class=\"content-idioma\" *ngIf=\"urlIdiomas\">\r\n            <mat-menu #menuIdiomas=\"matMenu\">\r\n                <a mat-menu-item *ngFor=\"let menuItem of menuIdioma.Culturas\" href=\"{{urlCuentaSeguridad}}CambiarIdioma?culture={{menuItem.Name}}&ReturnUrl=/\">\r\n                    {{menuItem.NativeName}}\r\n                </a>\r\n            </mat-menu>\r\n            <button mat-button [matMenuTriggerFor]=\"menuIdiomas\"><label class=\"mt-1\">{{menuIdioma.Lenguaje}}</label><mat-icon class=\"icon-idioma\">language</mat-icon></button>\r\n        </div>\r\n\r\n    </div>\r\n    <div>\r\n        <mat-menu #submenu=\"matMenu\">\r\n            <a mat-menu-item *ngFor=\"let menuItem of menuSecundarioSel.hijos\" href=\"{{menuItem.url}}\"\r\n                [disabled]=\"!menuItem.url\">\r\n                <mat-icon *ngIf=\"menuItem.icono\">{{menuItem.icono}}</mat-icon>\r\n                {{menuItem.titulo}}\r\n            </a>\r\n        </mat-menu>\r\n        <button *ngFor=\"let menuItem of menuSecundario; let i = index\" mat-icon-button [matMenuTriggerFor]=\"submenu\"\r\n            (click)=\"clickMenuSecundario(i)\">\r\n            <mat-icon>{{menuItem.icono}}</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"menu-lateral d-lg-none animate__animated animate__fadeInRight animate__faster\" *ngIf=\"menuLateralAbierto\">\r\n    <div class=\"row\">\r\n        <div *ngFor=\"let menuItem of menuPrincipal; let i=index\" class=\"col-sm-6 col-md-4\">\r\n            <a *ngIf=\"menuItem.url\" [href]=\"menuItem.url\" (click)=\"clickMenuPrincipal(i)\">\r\n                <div>\r\n                    <mat-icon svgIcon=\"{{menuItem.icono}}\">{{menuItem.icono}}</mat-icon>\r\n                    <p>{{menuItem.titulo}}</p>\r\n                </div>\r\n            </a>\r\n            <span *ngIf=\"!menuItem.url\" (click)=\"clickMenuPrincipal(i)\">\r\n                <div>\r\n                    <mat-icon svgIcon=\"{{menuItem.icono}}\">{{menuItem.icono}}</mat-icon>\r\n                    <p>{{menuItem.titulo}}</p>\r\n                </div>\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"sub-menu-fondo animate__animated animate__fadeIn animate__faster\" (click)=\"menuPrincipalSel=null\"\r\n    *ngIf=\"menuPrincipalSel\"></div>\r\n\r\n<div class=\"sub-menu animate__animated animate__fadeIn animate__faster\" *ngIf=\"menuPrincipalSel\">\r\n    <div class=\"container-fluid\">\r\n        <div class=\"row\">\r\n            <div class=\"col-12 col-lg-5\">\r\n                <div class=\"px-3 px-sm-5 pt-5 pb-lg-5 text-center descripcion-menu\">\r\n                    <mat-icon [ngStyle]=\"{'color': colorFondo}\" svgIcon=\"{{menuPrincipalSel.icono}}\">\r\n                        {{menuPrincipalSel.icono}}</mat-icon>\r\n                    <p>{{menuPrincipalSel.titulo}}</p>\r\n                    <p class=\"text-secondary\">{{menuPrincipalSel.descripcion}}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 col-lg-7 my-4\">\r\n                <div class=\"px-3 px-md-4 py-2 py-md-2\">\r\n                    <ul class=\"list-unstyled\">\r\n\r\n                        <li class=\"mb-3 d-flex\" *ngFor=\"let menuItem of menuPrincipalSel.hijos\">\r\n                            <mat-icon>{{menuItem.icono}}</mat-icon>\r\n                            <div class=\"ml-2 flex-fill\">\r\n                                <a href=\"{{menuItem.url}}\" *ngIf=\"menuItem.url\">\r\n                                    <div class=\"lead mb-2\">{{menuItem.titulo}}</div>\r\n                                </a>\r\n                                <div class=\"lead mb-2\" *ngIf=\"!menuItem.url\">{{menuItem.titulo}}</div>\r\n\r\n                                <a href=\"{{menuSubItem.url}}\" class=\"pl-2 my-2\" *ngFor=\"let menuSubItem of menuItem.hijos\">\r\n                                    <div class=\"text-secondary\">{{menuSubItem.titulo}}</div>\r\n                                </a>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-icon-button class=\"close-icon d-lg-none\" (click)=\"menuPrincipalSel=null\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n    </button>\r\n</div>\r\n<div class=\"alerta-almacenamiento\" *ngIf=\"porcentajeUtilizado >= 100\">Su capacidad de almacenamiento ha llegado al {{porcentajeUtilizado}}% , libere espacio o adquiera mayor capacidad</div>",
-                styles: [".menu{height:46px;display:flex;justify-content:space-between;align-items:center;top:0;left:0;right:0;background-color:#1c98a4;color:#fff;padding:0 4px}.menu .d-lg-block .mat-button{font-weight:400;height:46px;line-height:46px}.menu .logo{display:inline-block;height:40px}.menu .logo-menu-principal{position:absolute;display:block;left:65px}.menu .logo-menu-principal>img{display:block;margin:0 -50%}.menu .info-adicional{color:#fff;display:flex;justify-content:end;font-size:13px;position:absolute;right:47px}.menu .info-adicional .border-r{border-right:1px solid #fff}.menu .info-adicional .version{margin:7px 0 0 7px}.menu .info-adicional div.datos{margin:0 2px 0 5px;height:28px}.menu .info-adicional .mat-icon{vertical-align:middle;font-size:17px;color:#fff;line-height:21px;margin-left:2px}.menu .info-adicional button{padding:0 0 0 15px}.menu .info-adicional .content-idioma{margin:-5px 2px 0 5px;display:block;cursor:pointer}.menu .info-adicional .icon-idioma{font-size:17px!important;vertical-align:text-top!important;color:#fffc}.sub-menu{width:100%;position:absolute;top:46px;z-index:1000;background-color:#fff;display:flex;overflow-y:auto;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.sub-menu .close-icon{position:absolute;left:4px;top:4px}.sub-menu .descripcion-menu .mat-icon{color:#1c98a4;width:100px;height:100px}.sub-menu .descripcion-menu p:first-of-type{font-weight:300;font-size:30px;margin:16px 0}.sub-menu .descripcion-menu p:last-of-type{color:#6c757d}.sub-menu li{float:left;width:50%}.sub-menu li>.mat-icon{color:#444}.sub-menu li:nth-child(even){float:right}.sub-menu li a{transition:.5s;display:block}.sub-menu li a:hover{margin-left:8px}.sub-menu li .lead{line-height:24px;color:#212529;font-size:17px}.sub-menu-fondo{background:#272d3357;position:absolute;top:46px;bottom:0;left:0;right:0;z-index:1000}.menu-lateral{width:100%;position:absolute;top:46px;bottom:0;left:0;right:0;z-index:1000;display:flex;flex-direction:column;overflow-y:auto;background:#f7f7f7;padding:20px}.menu-lateral>div>div>*>div{text-align:center;padding:16px;background-color:#fff;margin:0 0 16px;color:#333;cursor:pointer;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.menu-lateral>div>div>*>div>.mat-icon{width:50px;height:50px}.menu-lateral>div>div>*>div>p{padding:0;margin:8px 0 0}a.mat-menu-item{color:#444!important}.alerta-almacenamiento{background:#ffffec;border-bottom:1px solid #efff00;min-height:39px;line-height:36px;font-size:12px;padding:0 0 0 25px}@media (max-width:767.98px){.sub-menu ul{margin:auto;padding:0 10px}.sub-menu ul li{float:none;width:100%}.sub-menu ul li:nth-child(even){float:none}}@media (max-width:991.98px){.sub-menu{bottom:0}}@media (min-width:600px){.logo-menu-principal{left:50%!important}}* :focus,:active{outline:0!important}"]
-            })
-        ], WmMenuComponent);
-        return WmMenuComponent;
-    }());
-
     var WmMenuAlertaPanicoService = /** @class */ (function () {
         function WmMenuAlertaPanicoService(wmMenuServicioService) {
             this.wmMenuServicioService = wmMenuServicioService;
@@ -473,28 +333,23 @@
             this.IdsAlertasPanicoActivas = new Set(); // Almacena los IDs de las alertas ya manejadas
             this.soundTimeout = null; // Controla el temporizador del sonido
             this.isRunning = false;
-            console.log('WmMenuAlertaPanicoService inicializado.');
         }
         WmMenuAlertaPanicoService.prototype.iniciarProceso = function (intervalMs, callback, urlObtenerParametro, token, rutaAudio) {
             var _this = this;
-            console.log('iniciarProceso llamado con parámetros:', { intervalMs: intervalMs, urlObtenerParametro: urlObtenerParametro, token: token, rutaAudio: rutaAudio });
             this.rutaAudio = rutaAudio;
             var iniciarConInteraccion = function () {
-                console.log('iniciarConInteraccion ejecutado.');
                 _this.wmMenuServicioService
                     .menuApiObtener(urlObtenerParametro, null, token, 'ReporteAlertasPanico')
                     .subscribe(function (resp) {
-                    console.log('Respuesta obtenida de menuApiObtener:', resp);
+                    // validar si el parametro ReporteAlertasPanico esta encendido
                     if (resp && resp.length > 0 && resp[0].Valor == 1) {
                         if (_this.isRunning) {
-                            console.log('Proceso ya está corriendo.');
                             return;
                         }
+                        // Inicializar la variable desde localStorage
                         var storedIds = localStorage.getItem('ALERTAS_PANICO_ACTIVAS_WM');
                         _this.IdsAlertasPanicoActivas = storedIds ? new Set(JSON.parse(storedIds)) : new Set();
-                        console.log('IdsAlertasPanicoActivas inicializado:', _this.IdsAlertasPanicoActivas);
                         var ejecutarProceso_1 = function () {
-                            console.log('ejecutarProceso iniciado.');
                             _this.isRunning = true;
                             callback();
                             setTimeout(function () {
@@ -507,49 +362,42 @@
                 });
             };
             ['drag', 'click'].forEach(function (evento) {
-                console.log("Evento " + evento + " registrado para iniciar proceso.");
                 document.addEventListener(evento, function () {
                     iniciarConInteraccion();
                 }, { once: true });
             });
         };
         WmMenuAlertaPanicoService.prototype.stopProcess = function () {
-            console.log('stopProcess ejecutado.');
             this.isRunning = false;
             if (this.subscription) {
                 this.subscription.unsubscribe();
             }
         };
         WmMenuAlertaPanicoService.prototype.ngOnDestroy = function () {
-            console.log('ngOnDestroy ejecutado.');
             this.stopSound();
             this.stopFlashingTitle();
         };
         WmMenuAlertaPanicoService.prototype.playSound = function () {
             var _this = this;
-            console.log('playSound llamado.');
             if (this.isPlaying)
                 return; // Evita reproducir si ya está sonando
             this.isPlaying = true;
             if (!this.audio) {
                 this.audio = new Audio(this.rutaAudio); // Ruta al archivo de sonido
             }
-            console.log("Audio cargado: ", this.audio);
             this.audio.loop = true; // Reproducir en bucle
             this.audio.play()
                 .then(function () {
-                console.log('Sonido reproduciéndose.');
                 // Detener el sonido después de 10 segundos
                 _this.soundTimeout = setTimeout(function () {
                     _this.stopSound();
                 }, 10000); // Detener después de 10 segundos
             })
                 .catch(function (error) {
-                console.error('Error al reproducir el sonido:', error);
+                console.log('Error al reproducir el sonido:', error);
             });
         };
         WmMenuAlertaPanicoService.prototype.stopSound = function () {
-            console.log('stopSound llamado.');
             if (this.audio) {
                 this.audio.pause();
                 this.audio.currentTime = 0; // Reinicia el sonido
@@ -562,7 +410,6 @@
         };
         WmMenuAlertaPanicoService.prototype.startFlashingTitle = function () {
             var _this = this;
-            console.log('startFlashingTitle llamado.');
             var toggle = false;
             // Almacenar el título original si aún no se ha guardado
             if (!this.originalTitle) {
@@ -577,7 +424,6 @@
             }
         };
         WmMenuAlertaPanicoService.prototype.stopFlashingTitle = function () {
-            console.log('stopFlashingTitle llamado.');
             if (this.intervalId) {
                 clearInterval(this.intervalId);
                 this.intervalId = null;
@@ -586,16 +432,13 @@
         };
         WmMenuAlertaPanicoService.prototype.revisarAlertasPendientes = function (urlObtenerAlertasPanico, token) {
             var _this = this;
-            console.log('revisarAlertasPendientes llamado con parámetros:', { urlObtenerAlertasPanico: urlObtenerAlertasPanico, token: token });
             var helper = new angularJwt.JwtHelperService();
             var decodedToken = helper.decodeToken(token);
             this.wmMenuServicioService
                 .menuApiObtener(urlObtenerAlertasPanico, decodedToken['id_usuario'], token)
                 .subscribe(function (resp) {
-                console.log('Respuesta obtenida de revisarAlertasPendientes:', resp);
                 if (resp && resp.length > 0) {
                     var alertasIds_1 = resp.map(function (alerta) { return alerta.IdAlertaPanico; });
-                    console.log('IDs de alertas obtenidas:', alertasIds_1);
                     // Eliminar IDs que no están en la respuesta del servicio
                     _this.IdsAlertasPanicoActivas.forEach(function (id) {
                         if (!alertasIds_1.includes(id)) {
@@ -635,6 +478,150 @@
         return WmMenuAlertaPanicoService;
     }());
 
+    var WmMenuComponent = /** @class */ (function () {
+        function WmMenuComponent(wmMenuServicioService, alertaPanicoService) {
+            this.wmMenuServicioService = wmMenuServicioService;
+            this.alertaPanicoService = alertaPanicoService;
+            this.menuSecundarioSel = new MenuSecundario();
+            this.menuLateralAbierto = false;
+            this.menuIdioma = [];
+            this.intervaloPeticionesMs = 60000;
+        }
+        WmMenuComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.cargarMenuCuenta();
+            this.alertaPanicoService.iniciarProceso(this.intervaloPeticionesMs, function () { return _this.alertaPanicoService.revisarAlertasPendientes(_this.urlObtenerAlertasPanico, _this.token); }, this.urlObtenerParametro, this.token, this.rutaAudio);
+            if (this.urlMenu && this.token) {
+                var helper = new angularJwt.JwtHelperService();
+                var decodedToken = helper.decodeToken(this.token);
+                this.wmMenuServicioService
+                    .menuApiObtener(this.urlMenu, decodedToken["id_usuario"], this.token)
+                    .subscribe(function (resp) {
+                    _this.menuPrincipal = _this.wmMenuServicioService.mapearMenu(resp);
+                });
+            }
+            if (this.urlIdiomas && this.token) {
+                var helper = new angularJwt.JwtHelperService();
+                var decodedToken = helper.decodeToken(this.token);
+                this.wmMenuServicioService
+                    .menuIdiomasObtener(this.urlIdiomas, decodedToken["id_usuario"], this.token)
+                    .subscribe(function (resp) {
+                    _this.menuIdioma = resp;
+                    _this.cargarMenuCuenta();
+                });
+            }
+            if (this.urlBaseAlmacenamiento && this.token) {
+                var helper = new angularJwt.JwtHelperService();
+                var decodedToken = helper.decodeToken(this.token);
+                this.wmMenuServicioService
+                    .almacenamientoApiObtener(this.urlBaseAlmacenamiento, decodedToken["id_usuario"], this.token)
+                    .subscribe(function (resp) {
+                    var utilizado = resp[0] && resp[0].Utilizado ? resp[0].Utilizado : 0;
+                    var total = resp[0] && resp[0].Total ? resp[0].Total : 0;
+                    _this.porcentajeUtilizado = Math.round((utilizado / total) * 100);
+                });
+            }
+        };
+        WmMenuComponent.prototype.clickMenuPrincipal = function (i) {
+            if (this.menuPrincipal[i].hijos && this.menuPrincipal[i].hijos.length) {
+                if (this.menuPrincipalSel == this.menuPrincipal[i]) {
+                    this.menuPrincipalSel = null;
+                }
+                else {
+                    this.menuPrincipalSel = this.menuPrincipal[i];
+                }
+            }
+        };
+        WmMenuComponent.prototype.clickMenuSecundario = function (i) {
+            this.menuSecundarioSel = this.menuSecundario[i];
+            this.menuPrincipalSel = null;
+        };
+        WmMenuComponent.prototype.cargarMenuCuenta = function () {
+            var _a;
+            if (this.urlCuentaSeguridad && this.token) {
+                var helper = new angularJwt.JwtHelperService();
+                var decodedToken = helper.decodeToken(this.token);
+                this.menuSecundario = [{
+                        titulo: decodedToken["unique_name"],
+                        icono: "account_circle",
+                        hijos: [
+                            { titulo: decodedToken["unique_name"], url: "", icono: "person" },
+                            { titulo: this.menuIdioma && this.menuIdioma.CambiarContrasenna ? this.menuIdioma.CambiarContrasenna : "Cambiar contraseña", url: this.urlCuentaSeguridad + "CambioContrasena", icono: "vpn_key" },
+                            this.activar2fa == "1" ? { titulo: this.menuIdioma && this.menuIdioma.Configurar2fa ? this.menuIdioma.Configurar2fa : "Configurar 2FA", url: this.urlCuentaSeguridad + "Habilitacion2FA", icono: "verified_user" } : null,
+                            this.urlguiasOnline != null && this.urlguiasOnline !== "" && ((_a = this.urlguiasOnline) === null || _a === void 0 ? void 0 : _a.length) != 0 ? { titulo: this.menuIdioma && this.menuIdioma.guiasOnline ? this.menuIdioma.guiasOnline : "Guias Online", url: this.urlguiasOnline, icono: "menu_book" } : null,
+                            { titulo: this.menuIdioma && this.menuIdioma.CerrarSesion ? this.menuIdioma.CerrarSesion : "Cerrar sesión", url: this.urlCuentaSeguridad + "CerrarSesion", icono: "exit_to_app" }
+                        ].filter(function (hijo) { return hijo != null; }),
+                    }];
+            }
+        };
+        WmMenuComponent.ctorParameters = function () { return [
+            { type: WmMenuServicioService },
+            { type: WmMenuAlertaPanicoService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "logo", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "colorFondo", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "colorTexto", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "menuPrincipal", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "menuSecundario", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "urlMenu", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "token", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "urlCuentaSeguridad", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "activar2fa", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "urlguiasOnline", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "urlObtenerAlertasPanico", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "urlObtenerParametro", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "rutaAudio", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "nombreCliente", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "nombreUsuario", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "versionWeb", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "urlBaseAlmacenamiento", void 0);
+        __decorate([
+            core.Input()
+        ], WmMenuComponent.prototype, "urlIdiomas", void 0);
+        WmMenuComponent = __decorate([
+            core.Component({
+                selector: 'wm-menu',
+                template: "<div class=\"menu\" [ngStyle]=\"{'background-color': colorFondo, 'color': colorTexto}\">\r\n    <div class=\"d-lg-none\">\r\n        <button mat-icon-button (click)=\"menuLateralAbierto=!menuLateralAbierto; menuPrincipalSel = null\">\r\n            <mat-icon *ngIf=\"!menuLateralAbierto\" class=\"animate__animated animate__fadeInRight animate__faster\">menu\r\n            </mat-icon>\r\n            <mat-icon *ngIf=\"menuLateralAbierto\" class=\"animate__animated animate__fadeInLeft animate__faster\">close\r\n            </mat-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"d-lg-none logo-menu-principal\">\r\n        <img class=\"logo\" src=\"{{logo}}\">\r\n    </div>\r\n    <div class=\"d-none d-lg-block\">\r\n        <img class=\"logo\" src=\"{{logo}}\">\r\n        <div *ngFor=\"let menuItem of menuPrincipal; let i=index\" class=\"d-inline-block\">\r\n\r\n            <a *ngIf=\"menuItem.url\" mat-button [href]=\"menuItem.url\" (click)=\"clickMenuPrincipal(i)\">\r\n                {{menuItem.titulo}}\r\n            </a>\r\n            <button *ngIf=\"!menuItem.url\" mat-button (click)=\"clickMenuPrincipal(i)\">\r\n                {{menuItem.titulo}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <div class=\"info-adicional\">\r\n        <div class=\"datos border-r mt-1\" *ngIf=\"nombreCliente\">{{nombreCliente}}<mat-icon>people</mat-icon></div>\r\n        <div class=\"datos border-r mt-1\" *ngIf=\"nombreUsuario\">{{nombreUsuario}}<mat-icon>person_outline</mat-icon></div>\r\n        <div class=\"version\" *ngIf=\"versionWeb\">{{versionWeb}}</div>\r\n        <div class=\"content-idioma\" *ngIf=\"urlIdiomas\">\r\n            <mat-menu #menuIdiomas=\"matMenu\">\r\n                <a mat-menu-item *ngFor=\"let menuItem of menuIdioma.Culturas\" href=\"{{urlCuentaSeguridad}}CambiarIdioma?culture={{menuItem.Name}}&ReturnUrl=/\">\r\n                    {{menuItem.NativeName}}\r\n                </a>\r\n            </mat-menu>\r\n            <button mat-button [matMenuTriggerFor]=\"menuIdiomas\"><label class=\"mt-1\">{{menuIdioma.Lenguaje}}</label><mat-icon class=\"icon-idioma\">language</mat-icon></button>\r\n        </div>\r\n\r\n    </div>\r\n    <div>\r\n        <mat-menu #submenu=\"matMenu\">\r\n            <a mat-menu-item *ngFor=\"let menuItem of menuSecundarioSel.hijos\" href=\"{{menuItem.url}}\"\r\n                [disabled]=\"!menuItem.url\">\r\n                <mat-icon *ngIf=\"menuItem.icono\">{{menuItem.icono}}</mat-icon>\r\n                {{menuItem.titulo}}\r\n            </a>\r\n        </mat-menu>\r\n        <button *ngFor=\"let menuItem of menuSecundario; let i = index\" mat-icon-button [matMenuTriggerFor]=\"submenu\"\r\n            (click)=\"clickMenuSecundario(i)\">\r\n            <mat-icon>{{menuItem.icono}}</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"menu-lateral d-lg-none animate__animated animate__fadeInRight animate__faster\" *ngIf=\"menuLateralAbierto\">\r\n    <div class=\"row\">\r\n        <div *ngFor=\"let menuItem of menuPrincipal; let i=index\" class=\"col-sm-6 col-md-4\">\r\n            <a *ngIf=\"menuItem.url\" [href]=\"menuItem.url\" (click)=\"clickMenuPrincipal(i)\">\r\n                <div>\r\n                    <mat-icon svgIcon=\"{{menuItem.icono}}\">{{menuItem.icono}}</mat-icon>\r\n                    <p>{{menuItem.titulo}}</p>\r\n                </div>\r\n            </a>\r\n            <span *ngIf=\"!menuItem.url\" (click)=\"clickMenuPrincipal(i)\">\r\n                <div>\r\n                    <mat-icon svgIcon=\"{{menuItem.icono}}\">{{menuItem.icono}}</mat-icon>\r\n                    <p>{{menuItem.titulo}}</p>\r\n                </div>\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"sub-menu-fondo animate__animated animate__fadeIn animate__faster\" (click)=\"menuPrincipalSel=null\"\r\n    *ngIf=\"menuPrincipalSel\"></div>\r\n\r\n<div class=\"sub-menu animate__animated animate__fadeIn animate__faster\" *ngIf=\"menuPrincipalSel\">\r\n    <div class=\"container-fluid\">\r\n        <div class=\"row\">\r\n            <div class=\"col-12 col-lg-5\">\r\n                <div class=\"px-3 px-sm-5 pt-5 pb-lg-5 text-center descripcion-menu\">\r\n                    <mat-icon [ngStyle]=\"{'color': colorFondo}\" svgIcon=\"{{menuPrincipalSel.icono}}\">\r\n                        {{menuPrincipalSel.icono}}</mat-icon>\r\n                    <p>{{menuPrincipalSel.titulo}}</p>\r\n                    <p class=\"text-secondary\">{{menuPrincipalSel.descripcion}}</p>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-12 col-lg-7 my-4\">\r\n                <div class=\"px-3 px-md-4 py-2 py-md-2\">\r\n                    <ul class=\"list-unstyled\">\r\n\r\n                        <li class=\"mb-3 d-flex\" *ngFor=\"let menuItem of menuPrincipalSel.hijos\">\r\n                            <mat-icon>{{menuItem.icono}}</mat-icon>\r\n                            <div class=\"ml-2 flex-fill\">\r\n                                <a href=\"{{menuItem.url}}\" *ngIf=\"menuItem.url\">\r\n                                    <div class=\"lead mb-2\">{{menuItem.titulo}}</div>\r\n                                </a>\r\n                                <div class=\"lead mb-2\" *ngIf=\"!menuItem.url\">{{menuItem.titulo}}</div>\r\n\r\n                                <a href=\"{{menuSubItem.url}}\" class=\"pl-2 my-2\" *ngFor=\"let menuSubItem of menuItem.hijos\">\r\n                                    <div class=\"text-secondary\">{{menuSubItem.titulo}}</div>\r\n                                </a>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-icon-button class=\"close-icon d-lg-none\" (click)=\"menuPrincipalSel=null\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n    </button>\r\n</div>\r\n<div class=\"alerta-almacenamiento\" *ngIf=\"porcentajeUtilizado >= 100\">Su capacidad de almacenamiento ha llegado al {{porcentajeUtilizado}}% , libere espacio o adquiera mayor capacidad</div>",
+                styles: [".menu{height:46px;display:flex;justify-content:space-between;align-items:center;top:0;left:0;right:0;background-color:#1c98a4;color:#fff;padding:0 4px}.menu .d-lg-block .mat-button{font-weight:400;height:46px;line-height:46px}.menu .logo{display:inline-block;height:40px}.menu .logo-menu-principal{position:absolute;display:block;left:65px}.menu .logo-menu-principal>img{display:block;margin:0 -50%}.menu .info-adicional{color:#fff;display:flex;justify-content:end;font-size:13px;position:absolute;right:47px}.menu .info-adicional .border-r{border-right:1px solid #fff}.menu .info-adicional .version{margin:7px 0 0 7px}.menu .info-adicional div.datos{margin:0 2px 0 5px;height:28px}.menu .info-adicional .mat-icon{vertical-align:middle;font-size:17px;color:#fff;line-height:21px;margin-left:2px}.menu .info-adicional button{padding:0 0 0 15px}.menu .info-adicional .content-idioma{margin:-5px 2px 0 5px;display:block;cursor:pointer}.menu .info-adicional .icon-idioma{font-size:17px!important;vertical-align:text-top!important;color:#fffc}.sub-menu{width:100%;position:absolute;top:46px;z-index:1000;background-color:#fff;display:flex;overflow-y:auto;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.sub-menu .close-icon{position:absolute;left:4px;top:4px}.sub-menu .descripcion-menu .mat-icon{color:#1c98a4;width:100px;height:100px}.sub-menu .descripcion-menu p:first-of-type{font-weight:300;font-size:30px;margin:16px 0}.sub-menu .descripcion-menu p:last-of-type{color:#6c757d}.sub-menu li{float:left;width:50%}.sub-menu li>.mat-icon{color:#444}.sub-menu li:nth-child(even){float:right}.sub-menu li a{transition:.5s;display:block}.sub-menu li a:hover{margin-left:8px}.sub-menu li .lead{line-height:24px;color:#212529;font-size:17px}.sub-menu-fondo{background:#272d3357;position:absolute;top:46px;bottom:0;left:0;right:0;z-index:1000}.menu-lateral{width:100%;position:absolute;top:46px;bottom:0;left:0;right:0;z-index:1000;display:flex;flex-direction:column;overflow-y:auto;background:#f7f7f7;padding:20px}.menu-lateral>div>div>*>div{text-align:center;padding:16px;background-color:#fff;margin:0 0 16px;color:#333;cursor:pointer;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.menu-lateral>div>div>*>div>.mat-icon{width:50px;height:50px}.menu-lateral>div>div>*>div>p{padding:0;margin:8px 0 0}a.mat-menu-item{color:#444!important}.alerta-almacenamiento{background:#ffffec;border-bottom:1px solid #efff00;min-height:39px;line-height:36px;font-size:12px;padding:0 0 0 25px}@media (max-width:767.98px){.sub-menu ul{margin:auto;padding:0 10px}.sub-menu ul li{float:none;width:100%}.sub-menu ul li:nth-child(even){float:none}}@media (max-width:991.98px){.sub-menu{bottom:0}}@media (min-width:600px){.logo-menu-principal{left:50%!important}}* :focus,:active{outline:0!important}"]
+            })
+        ], WmMenuComponent);
+        return WmMenuComponent;
+    }());
+
     var WmMenuModule = /** @class */ (function () {
         function WmMenuModule() {
         }