ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
141 lines • 98.5 kB
JavaScript
import { OCustomContentDirective } from 'ngx-obelisco-example/directives';
import { Component, ContentChild, HostListener, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
export class ONavbarComponent {
constructor(router, elementRef, renderer) {
this.router = router;
this.elementRef = elementRef;
this.renderer = renderer;
// Navbar
this.id = 'ONavbar';
this.logo = {
route: '/',
img: [
{
src: 'https://buenosaires.gob.ar/assets/img/logos/LogoBA.svg',
alt: 'Gobierno de la Ciudad de Buenos Aires - Inicio',
customClasses: 'header-logo',
height: 41,
width: 76
}
]
};
this.isRouteExact = false;
this.customClasses = '';
this.maxLengthResults = 10;
this.placeholder = 'Buscar...';
this.term = '';
this.isHover = false;
this.noResults = false;
this.filteredResults = [];
this.selectedIndex = 0;
this.isMenuExpanded = false;
this.loginClassMobile = { classMobile: '-mobile' };
this.clickOutsideListener = () => { };
}
//Searchbar logic
ngOnInit() {
this.clickOutsideListener = this.renderer.listen('document', 'click', (event) => {
if (!this.elementRef.nativeElement.contains(event.target)) {
this.resetSearch();
}
});
}
ngAfterViewInit() {
if (this.navbarSearchResponsive) {
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const width = entry.contentRect.width - 2;
if (this.searchResults) {
this.renderer.setStyle(this.searchResults.nativeElement, 'width', `${width}px`);
this.renderer.setStyle(this.searchResults.nativeElement, 'max-width', `${width}px`);
}
}
});
resizeObserver.observe(this.navbarSearchResponsive.nativeElement);
}
}
search() {
if (this.term === '') {
this.resetSearch();
}
else {
this.filteredResults = this.searchbarItems
.filter((e) => e.title.toLowerCase().includes(this.term.toLowerCase()))
.slice(0, this.maxLengthResults);
this.noResults = this.filteredResults.length === 0;
}
}
resetSearch() {
this.term = '';
this.isHover = false;
this.noResults = false;
this.filteredResults = [];
this.selectedIndex = 0;
}
goTo(e) {
this.router.navigate([e.route]);
this.resetSearch();
this.closeDropdownMenu();
}
onEnter() {
if (this.filteredResults.length > 0) {
this.goTo(this.filteredResults[this.selectedIndex]);
this.closeDropdownMenu();
}
}
onUp() {
if (this.selectedIndex > 0) {
this.selectedIndex--;
this.isHover = false;
}
}
onDown() {
if (this.selectedIndex < this.filteredResults.length) {
this.selectedIndex++;
this.isHover = false;
}
}
onMouseEnter() {
this.isHover = true;
}
onMouseLeave() {
this.isHover = false;
}
scrollToContent() {
if (this.idMain) {
const element = document.getElementById(this.idMain);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
}
ngOnDestroy() {
if (this.clickOutsideListener) {
this.clickOutsideListener();
}
}
closeDropdownMenu() {
if (this.navbarContent) {
this.navbarContent.nativeElement.classList.remove('show');
this.isMenuExpanded = false;
}
}
onClick(event) {
const backdrop = event.target;
if (backdrop && backdrop.classList.contains('header-backdrop')) {
this.closeDropdownMenu();
}
}
toggleMenu() {
this.isMenuExpanded = !this.isMenuExpanded;
}
}
ONavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ONavbarComponent, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
ONavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ONavbarComponent, selector: "o-navbar", inputs: { id: "id", logo: "logo", isRouteExact: "isRouteExact", routes: "routes", routesExtended: "routesExtended", routesAccount: "routesAccount", routesLogin: "routesLogin", idMain: "idMain", customClasses: "customClasses", searchbarItems: "searchbarItems", maxLengthResults: "maxLengthResults", placeholder: "placeholder" }, host: { listeners: { "document:click": "onClick($event)" } }, queries: [{ propertyName: "oCustomContent", first: true, predicate: OCustomContentDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "navbarSearchResponsive", first: true, predicate: ["navbarSearchResponsive"], descendants: true }, { propertyName: "searchResults", first: true, predicate: ["searchResults"], descendants: true }, { propertyName: "navbarContent", first: true, predicate: ["navbarContent"], descendants: true }], ngImport: i0, template: "<header class=\"navbar navbar-light navbar-expand-lg\" role=\"banner\" [ngClass]=\"customClasses\">\n <a href=\"javascript:void(0)\" class=\"skip-to-main-content-link\" (click)=\"scrollToContent()\">\n Ir al contenido principal\n </a>\n <div class=\"container header-container\">\n <ng-container *ngIf=\"!oCustomContent\">\n <!-- Logo \u2193 -->\n <a class=\"navbar-brand\" [routerLink]=\"logo.route\" *ngIf=\"logo\">\n <img\n *ngFor=\"let media of logo.img\"\n [ngClass]=\"media.customClasses\"\n [src]=\"media.src\"\n [alt]=\"media.alt\"\n [attr.width]=\"media.width\"\n [attr.height]=\"media.height\"\n />\n </a>\n <!-- Login button Mobile \u2193 -->\n <ng-container *ngTemplateOutlet=\"loginButton; context: loginClassMobile\"></ng-container>\n <!-- Menu button \u2193 -->\n <ng-container [ngTemplateOutlet]=\"menuButton\"></ng-container>\n <div #navbarContent class=\"collapse navbar-collapse\" [id]=\"id + 'navbarContent'\">\n <div class=\"navbar-content\">\n <!-- Sections \u2193 -->\n <ng-container [ngTemplateOutlet]=\"sections\"></ng-container>\n <!-- Searchbar \u2193 -->\n <ng-container [ngTemplateOutlet]=\"searchBar\"></ng-container>\n <!-- Login button Desktop \u2193 -->\n <ng-container [ngTemplateOutlet]=\"loginButton\"></ng-container>\n <!-- Account button Desktop \u2193 -->\n <ng-container [ngTemplateOutlet]=\"accountButtonDesktop\"></ng-container>\n </div>\n <!-- Sections extended \u2193 -->\n <ng-container [ngTemplateOutlet]=\"sectionsExtended\"></ng-container>\n <!-- Account button Mobile \u2193 -->\n <ng-container [ngTemplateOutlet]=\"accountButtonMobile\"></ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"oCustomContent\" [ngTemplateOutlet]=\"oCustomContent.template\">\n <ng-content></ng-content>\n </ng-container>\n </div>\n <div class=\"header-backdrop\"></div>\n</header>\n\n<!-- TEMPLATES -->\n<ng-template #iconTemplate let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n</ng-template>\n\n<ng-template #iconTemplateLink let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n <span *ngIf=\"!icon\" class=\"material-icons-round\" aria-hidden=\"true\">arrow_forward</span>\n</ng-template>\n\n<ng-template #iconTemplateDropdown let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n <span *ngIf=\"!icon\" class=\"material-icons-round btn-dropdown-icon\"> expand_more </span>\n</ng-template>\n\n<ng-template #iconTemplateAccount let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n <span *ngIf=\"!icon\" class=\"material-icons-round\" aria-hidden=\"true\">person</span>\n</ng-template>\n\n<ng-template #iconTemplateLogout let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n <span *ngIf=\"!icon\" class=\"material-icons-round\" aria-hidden=\"true\">logout</span>\n</ng-template>\n\n<ng-template #accountButtonMobile>\n <div class=\"navbar-user-mobile\" *ngIf=\"routesAccount\">\n <nav>\n <p class=\"navbar-user-mobile-title\">{{ routesAccount.title }}</p>\n <ul class=\"nav flex-column nav-pills nav-user\">\n <ng-container *ngFor=\"let accountChild of routesAccount.children\">\n <li class=\"nav-item\">\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n [routerLink]=\"accountChild.route\"\n *ngIf=\"!accountChild.isDangerTitle\"\n >\n <span>{{ accountChild.title }}</span>\n <span class=\"item-notifications\" *ngIf=\"accountChild.isWithNotification\"></span>\n </a>\n </li>\n <li class=\"nav-item\" *ngIf=\"accountChild.isDangerTitle\">\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-danger nav-link-lg\"\n [routerLink]=\"accountChild.route\"\n >\n <div class=\"nav-icon\">\n <span class=\"material-icons-round\" aria-hidden=\"true\">logout</span>\n <span>Cerrar sesi\u00F3n</span>\n </div>\n </a>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n</ng-template>\n\n<ng-template #sections>\n <div class=\"navbar-sections\" *ngIf=\"routes\">\n <nav>\n <p class=\"navbar-sections-title\">Secciones</p>\n <ul class=\"nav nav-pills nav-sections\">\n <ng-container *ngFor=\"let routeItem of routes\">\n <li class=\"dropdown\" *ngIf=\"routeItem.children\">\n <button\n type=\"button\"\n class=\"btn btn-dropdown btn-dropdown-lg dropdown-toggle\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n <span class=\"btn-dropdown-text\">{{ routeItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateDropdown\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconRight }\"\n ></ng-container>\n </button>\n <div class=\"dropdown-menu\">\n <ng-container *ngFor=\"let routeItemChild of routeItem.children\">\n <!-- Rutas con RouterLink -->\n <a\n class=\"dropdown-item\"\n [routerLink]=\"routeItemChild.route\"\n *ngIf=\"routeItemChild.route && !routeItemChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ routeItemChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n </a>\n <a\n class=\"dropdown-item item-link\"\n [routerLink]=\"routeItemChild.route\"\n *ngIf=\"routeItemChild.route && routeItemChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ routeItemChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLink\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n </a>\n <!-- Rutas con Href -->\n <a\n class=\"dropdown-item\"\n [href]=\"routeItemChild.link\"\n target=\"_blank\"\n *ngIf=\"routeItemChild.link && !routeItemChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ routeItemChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n </a>\n <a\n class=\"dropdown-item item-link\"\n [href]=\"routeItemChild.link\"\n target=\"_blank\"\n *ngIf=\"routeItemChild.link && routeItemChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ routeItemChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLink\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n </a>\n </ng-container>\n </div>\n </li>\n <li class=\"nav-item\" *ngIf=\"!routeItem.children\">\n <!-- Ruta con RouterLink -->\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n *ngIf=\"routeItem.route\"\n [routerLink]=\"routeItem.route\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n <span>{{ routeItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n </a>\n <!-- Ruta con Href -->\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n *ngIf=\"routeItem.link\"\n [href]=\"routeItem.link\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n <span>{{ routeItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n </a>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n</ng-template>\n\n<ng-template #sectionsExtended>\n <div class=\"navbar-content-extended\" *ngIf=\"routesExtended\">\n <nav>\n <p class=\"navbar-sections-title\">Secciones</p>\n <ul class=\"nav nav-pills nav-sections\">\n <ng-container *ngFor=\"let extendedItem of routesExtended; let i = index\">\n <li class=\"nav-item\" *ngIf=\"!extendedItem.children\">\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n *ngIf=\"extendedItem.route\"\n [routerLink]=\"extendedItem.route\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconLeft }\"\n ></ng-container>\n <span>{{ extendedItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconRight }\"\n ></ng-container>\n </a>\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n *ngIf=\"extendedItem.link\"\n [href]=\"extendedItem.link\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconLeft }\"\n ></ng-container>\n <span>{{ extendedItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconRight }\"\n ></ng-container>\n </a>\n </li>\n <li class=\"dropdown\" *ngIf=\"extendedItem.children\">\n <button\n type=\"button\"\n class=\"btn btn-dropdown btn-dropdown-lg dropdown-toggle\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconLeft }\"\n ></ng-container>\n <span class=\"btn-dropdown-text\">{{ extendedItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateDropdown\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconRight }\"\n ></ng-container>\n </button>\n <div class=\"dropdown-menu\">\n <ng-container *ngFor=\"let extendedChild of extendedItem.children\">\n <!-- Rutas con RouterLink -->\n <a\n class=\"dropdown-item\"\n [routerLink]=\"extendedChild.route\"\n *ngIf=\"extendedChild.route && !extendedChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ extendedChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n </a>\n <a\n class=\"dropdown-item item-link\"\n [routerLink]=\"extendedChild.route\"\n *ngIf=\"extendedChild.route && extendedChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ extendedChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLink\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n </a>\n <!-- Rutas con Href -->\n <a\n class=\"dropdown-item\"\n [href]=\"extendedChild.link\"\n target=\"_blank\"\n *ngIf=\"extendedChild.link && !extendedChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ extendedChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n </a>\n <a\n class=\"dropdown-item item-link\"\n [href]=\"extendedChild.link\"\n target=\"_blank\"\n *ngIf=\"extendedChild.link && extendedChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ extendedChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLink\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n </a>\n </ng-container>\n </div>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n</ng-template>\n\n<ng-template #loginButton let-classMobile=\"classMobile\">\n <ng-container *ngIf=\"routesLogin\">\n <div class=\"navbar-login{{ classMobile }}\" *ngIf=\"!routesAccount\">\n <a class=\"btn btn-lg btn-icon btn-outline-link\" [routerLink]=\"routesLogin.route\" target=\"_blank\">\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateAccount\"\n [ngTemplateOutletContext]=\"{ icon: routesLogin.iconLeft }\"\n ></ng-container>\n <span class=\"btn-text\">{{ routesLogin.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routesLogin.iconRight }\"\n ></ng-container>\n </a>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #searchBar>\n <div class=\"navbar-search\" *ngIf=\"searchbarItems\">\n <form class=\"form-search\">\n <div class=\"form-group\">\n <label class=\"sr-only\" for=\"search-input\">Buscador</label>\n <input\n type=\"search\"\n class=\"form-control input-search\"\n id=\"search-input\"\n name=\"name\"\n aria-label=\"Ingrese su b\u00FAsqueda\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"term\"\n (input)=\"search()\"\n (keydown.enter)=\"onEnter()\"\n (keydown.ArrowUp)=\"onUp()\"\n (keydown.ArrowDown)=\"onDown()\"\n />\n <button class=\"reset\" type=\"reset\" aria-label=\"Borrar\" (click)=\"resetSearch()\"></button>\n <button\n class=\"submit-search\"\n type=\"submit\"\n aria-label=\"Buscar\"\n (click)=\"onEnter()\"\n (keydown.enter)=\"onEnter()\"\n ></button>\n </div>\n </form>\n <div class=\"search-results\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <ng-container *ngIf=\"filteredResults.length > 0\">\n <div\n class=\"search-item\"\n *ngFor=\"let result of filteredResults; let i = index\"\n [class.selected-search-item]=\"i === selectedIndex\"\n [class.first-search-item]=\"i === selectedIndex && !isHover\"\n (click)=\"goTo(result)\"\n >\n {{ result.title }}\n </div>\n </ng-container>\n <div class=\"no-results\" *ngIf=\"noResults\">No se encontraron resultados\uD83D\uDE22.</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #accountButtonDesktop>\n <div class=\"navbar-user\" *ngIf=\"routesAccount\">\n <div class=\"dropdown\">\n <button\n type=\"button\"\n class=\"btn btn-dropdown btn-dropdown-lg btn-dropdown-border dropdown-toggle\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateAccount\"\n [ngTemplateOutletContext]=\"{ icon: routesAccount.iconLeft }\"\n ></ng-container>\n <span class=\"btn-dropdown-text\">{{ routesAccount.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routesAccount.iconLeft }\"\n ></ng-container>\n </button>\n <div class=\"dropdown-menu dropdown-menu-right\">\n <ng-container *ngFor=\"let accountChild of routesAccount.children\">\n <a class=\"dropdown-item\" [routerLink]=\"accountChild.route\" *ngIf=\"!accountChild.isDangerTitle\">\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: accountChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ accountChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: accountChild.iconRight }\"\n ></ng-container>\n <span class=\"item-notifications\" *ngIf=\"accountChild.isWithNotification\"></span>\n </a>\n <a class=\"dropdown-item item-danger\" [routerLink]=\"accountChild.route\" *ngIf=\"accountChild.isDangerTitle\">\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: accountChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">Cerrar sesi\u00F3n</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLogout\"\n [ngTemplateOutletContext]=\"{ icon: accountChild.iconLeft }\"\n ></ng-container>\n </a>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #menuButton>\n <button\n class=\"navbar-toggler\"\n type=\"button\"\n data-toggle=\"collapse\"\n [attr.data-target]=\"'#' + id + 'navbarContent'\"\n [attr.aria-controls]=\"id + 'navbarContent'\"\n [attr.aria-expanded]=\"isMenuExpanded ? 'true' : 'false'\"\n aria-label=\"Men\u00FA\"\n (click)=\"toggleMenu()\"\n *ngIf=\"routes || routesExtended || routesAccount || searchbarItems\"\n ></button>\n</ng-template>\n", styles: [".navbar-search{display:flex;flex-direction:column;align-items:flex-start;gap:0px}.navbar-search .input-search{text-transform:capitalize}.navbar-search .search-results{z-index:999;margin-top:52px;margin-left:6px;max-width:20.5rem;width:20.5rem;position:absolute;background-color:#f3f6f9;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.navbar-search .search-results .search-item{padding:.5rem 1rem}.navbar-search .search-results .search-item:hover{cursor:pointer;color:#007bc7}.navbar-search .search-results .no-results{padding:.5rem 1rem}.navbar-search .search-results .first-search-item,.navbar-search .search-results .selected-search-item{color:#007bc7}@media (max-width: 975px){.navbar-search .search-results{width:94%;max-width:94%;margin-left:0;left:50%;transform:translate(-50%)}}@media (max-width: 615px){.navbar-search .search-results{width:90%;max-width:90%}}@media (max-width: 425px){.navbar-search .search-results{width:86%;max-width:86%}}@media (min-width: 976px){.navbar .header-container .navbar-brand{margin-top:0}}@media (min-width: 976px){.navbar .header-container .navbar-brand .header-logo{margin-top:3.5px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ONavbarComponent, decorators: [{
type: Component,
args: [{ selector: 'o-navbar', template: "<header class=\"navbar navbar-light navbar-expand-lg\" role=\"banner\" [ngClass]=\"customClasses\">\n <a href=\"javascript:void(0)\" class=\"skip-to-main-content-link\" (click)=\"scrollToContent()\">\n Ir al contenido principal\n </a>\n <div class=\"container header-container\">\n <ng-container *ngIf=\"!oCustomContent\">\n <!-- Logo \u2193 -->\n <a class=\"navbar-brand\" [routerLink]=\"logo.route\" *ngIf=\"logo\">\n <img\n *ngFor=\"let media of logo.img\"\n [ngClass]=\"media.customClasses\"\n [src]=\"media.src\"\n [alt]=\"media.alt\"\n [attr.width]=\"media.width\"\n [attr.height]=\"media.height\"\n />\n </a>\n <!-- Login button Mobile \u2193 -->\n <ng-container *ngTemplateOutlet=\"loginButton; context: loginClassMobile\"></ng-container>\n <!-- Menu button \u2193 -->\n <ng-container [ngTemplateOutlet]=\"menuButton\"></ng-container>\n <div #navbarContent class=\"collapse navbar-collapse\" [id]=\"id + 'navbarContent'\">\n <div class=\"navbar-content\">\n <!-- Sections \u2193 -->\n <ng-container [ngTemplateOutlet]=\"sections\"></ng-container>\n <!-- Searchbar \u2193 -->\n <ng-container [ngTemplateOutlet]=\"searchBar\"></ng-container>\n <!-- Login button Desktop \u2193 -->\n <ng-container [ngTemplateOutlet]=\"loginButton\"></ng-container>\n <!-- Account button Desktop \u2193 -->\n <ng-container [ngTemplateOutlet]=\"accountButtonDesktop\"></ng-container>\n </div>\n <!-- Sections extended \u2193 -->\n <ng-container [ngTemplateOutlet]=\"sectionsExtended\"></ng-container>\n <!-- Account button Mobile \u2193 -->\n <ng-container [ngTemplateOutlet]=\"accountButtonMobile\"></ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"oCustomContent\" [ngTemplateOutlet]=\"oCustomContent.template\">\n <ng-content></ng-content>\n </ng-container>\n </div>\n <div class=\"header-backdrop\"></div>\n</header>\n\n<!-- TEMPLATES -->\n<ng-template #iconTemplate let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n</ng-template>\n\n<ng-template #iconTemplateLink let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n <span *ngIf=\"!icon\" class=\"material-icons-round\" aria-hidden=\"true\">arrow_forward</span>\n</ng-template>\n\n<ng-template #iconTemplateDropdown let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n <span *ngIf=\"!icon\" class=\"material-icons-round btn-dropdown-icon\"> expand_more </span>\n</ng-template>\n\n<ng-template #iconTemplateAccount let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n <span *ngIf=\"!icon\" class=\"material-icons-round\" aria-hidden=\"true\">person</span>\n</ng-template>\n\n<ng-template #iconTemplateLogout let-icon=\"icon\">\n <i *ngIf=\"icon && icon.includes('bx')\" class=\"{{ icon }}\"></i>\n <span *ngIf=\"icon && !icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{ icon }}</span>\n <span *ngIf=\"!icon\" class=\"material-icons-round\" aria-hidden=\"true\">logout</span>\n</ng-template>\n\n<ng-template #accountButtonMobile>\n <div class=\"navbar-user-mobile\" *ngIf=\"routesAccount\">\n <nav>\n <p class=\"navbar-user-mobile-title\">{{ routesAccount.title }}</p>\n <ul class=\"nav flex-column nav-pills nav-user\">\n <ng-container *ngFor=\"let accountChild of routesAccount.children\">\n <li class=\"nav-item\">\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n [routerLink]=\"accountChild.route\"\n *ngIf=\"!accountChild.isDangerTitle\"\n >\n <span>{{ accountChild.title }}</span>\n <span class=\"item-notifications\" *ngIf=\"accountChild.isWithNotification\"></span>\n </a>\n </li>\n <li class=\"nav-item\" *ngIf=\"accountChild.isDangerTitle\">\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-danger nav-link-lg\"\n [routerLink]=\"accountChild.route\"\n >\n <div class=\"nav-icon\">\n <span class=\"material-icons-round\" aria-hidden=\"true\">logout</span>\n <span>Cerrar sesi\u00F3n</span>\n </div>\n </a>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n</ng-template>\n\n<ng-template #sections>\n <div class=\"navbar-sections\" *ngIf=\"routes\">\n <nav>\n <p class=\"navbar-sections-title\">Secciones</p>\n <ul class=\"nav nav-pills nav-sections\">\n <ng-container *ngFor=\"let routeItem of routes\">\n <li class=\"dropdown\" *ngIf=\"routeItem.children\">\n <button\n type=\"button\"\n class=\"btn btn-dropdown btn-dropdown-lg dropdown-toggle\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n <span class=\"btn-dropdown-text\">{{ routeItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateDropdown\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconRight }\"\n ></ng-container>\n </button>\n <div class=\"dropdown-menu\">\n <ng-container *ngFor=\"let routeItemChild of routeItem.children\">\n <!-- Rutas con RouterLink -->\n <a\n class=\"dropdown-item\"\n [routerLink]=\"routeItemChild.route\"\n *ngIf=\"routeItemChild.route && !routeItemChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ routeItemChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n </a>\n <a\n class=\"dropdown-item item-link\"\n [routerLink]=\"routeItemChild.route\"\n *ngIf=\"routeItemChild.route && routeItemChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ routeItemChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLink\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n </a>\n <!-- Rutas con Href -->\n <a\n class=\"dropdown-item\"\n [href]=\"routeItemChild.link\"\n target=\"_blank\"\n *ngIf=\"routeItemChild.link && !routeItemChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ routeItemChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n </a>\n <a\n class=\"dropdown-item item-link\"\n [href]=\"routeItemChild.link\"\n target=\"_blank\"\n *ngIf=\"routeItemChild.link && routeItemChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ routeItemChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLink\"\n [ngTemplateOutletContext]=\"{ icon: routeItemChild.iconLeft }\"\n ></ng-container>\n </a>\n </ng-container>\n </div>\n </li>\n <li class=\"nav-item\" *ngIf=\"!routeItem.children\">\n <!-- Ruta con RouterLink -->\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n *ngIf=\"routeItem.route\"\n [routerLink]=\"routeItem.route\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n <span>{{ routeItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n </a>\n <!-- Ruta con Href -->\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n *ngIf=\"routeItem.link\"\n [href]=\"routeItem.link\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n <span>{{ routeItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routeItem!.iconLeft }\"\n ></ng-container>\n </a>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n</ng-template>\n\n<ng-template #sectionsExtended>\n <div class=\"navbar-content-extended\" *ngIf=\"routesExtended\">\n <nav>\n <p class=\"navbar-sections-title\">Secciones</p>\n <ul class=\"nav nav-pills nav-sections\">\n <ng-container *ngFor=\"let extendedItem of routesExtended; let i = index\">\n <li class=\"nav-item\" *ngIf=\"!extendedItem.children\">\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n *ngIf=\"extendedItem.route\"\n [routerLink]=\"extendedItem.route\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconLeft }\"\n ></ng-container>\n <span>{{ extendedItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconRight }\"\n ></ng-container>\n </a>\n <a\n (click)=\"closeDropdownMenu()\"\n class=\"nav-link nav-link-lg\"\n *ngIf=\"extendedItem.link\"\n [href]=\"extendedItem.link\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconLeft }\"\n ></ng-container>\n <span>{{ extendedItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconRight }\"\n ></ng-container>\n </a>\n </li>\n <li class=\"dropdown\" *ngIf=\"extendedItem.children\">\n <button\n type=\"button\"\n class=\"btn btn-dropdown btn-dropdown-lg dropdown-toggle\"\n data-toggle=\"dropdown\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconLeft }\"\n ></ng-container>\n <span class=\"btn-dropdown-text\">{{ extendedItem.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateDropdown\"\n [ngTemplateOutletContext]=\"{ icon: extendedItem.iconRight }\"\n ></ng-container>\n </button>\n <div class=\"dropdown-menu\">\n <ng-container *ngFor=\"let extendedChild of extendedItem.children\">\n <!-- Rutas con RouterLink -->\n <a\n class=\"dropdown-item\"\n [routerLink]=\"extendedChild.route\"\n *ngIf=\"extendedChild.route && !extendedChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ extendedChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n </a>\n <a\n class=\"dropdown-item item-link\"\n [routerLink]=\"extendedChild.route\"\n *ngIf=\"extendedChild.route && extendedChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ extendedChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLink\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n </a>\n <!-- Rutas con Href -->\n <a\n class=\"dropdown-item\"\n [href]=\"extendedChild.link\"\n target=\"_blank\"\n *ngIf=\"extendedChild.link && !extendedChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ extendedChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n </a>\n <a\n class=\"dropdown-item item-link\"\n [href]=\"extendedChild.link\"\n target=\"_blank\"\n *ngIf=\"extendedChild.link && extendedChild.isOverviewItem\"\n >\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n <span class=\"item-text\">{{ extendedChild.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateLink\"\n [ngTemplateOutletContext]=\"{ icon: extendedChild.iconLeft }\"\n ></ng-container>\n </a>\n </ng-container>\n </div>\n </li>\n </ng-container>\n </ul>\n </nav>\n </div>\n</ng-template>\n\n<ng-template #loginButton let-classMobile=\"classMobile\">\n <ng-container *ngIf=\"routesLogin\">\n <div class=\"navbar-login{{ classMobile }}\" *ngIf=\"!routesAccount\">\n <a class=\"btn btn-lg btn-icon btn-outline-link\" [routerLink]=\"routesLogin.route\" target=\"_blank\">\n <ng-container\n [ngTemplateOutlet]=\"iconTemplateAccount\"\n [ngTemplateOutletContext]=\"{ icon: routesLogin.iconLeft }\"\n ></ng-container>\n <span class=\"btn-text\">{{ routesLogin.title }}</span>\n <ng-container\n [ngTemplateOutlet]=\"iconTemplate\"\n [ngTemplateOutletContext]=\"{ icon: routesLogin.iconRight }\"\n ></ng-container>\n </a>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #searchBar>\n <div class=\"navbar-search\" *ngIf=\"searchbarItems\">\n <form class=\"form-search\">\n <div class=\"form-group\">\n <label class=\"sr-only\" for=\"search-input\">Buscador</label>\n <input\n type=\"search\"\n class=\"form-control input-search\"\n id=\"search-input\"\n name=\"name\"\n aria-label=\"Ingrese su b\u00FAsqueda\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"term\"\n (input)=\"search()\"\n (keydown.enter)=\"onEnter()\"\n (keydown.ArrowUp)=\"onUp()\"\n (keydown.ArrowDown)=\"onDown()\"\n />\n <button class=\"reset\" type=\"reset\" aria-label=\"Borrar\" (click)=\"resetSearch()\"></button>\n <button\n class=\"submit-search\"\n type=\"submit\"\n aria-label=\"Buscar\"\n (click)=\"onEnter()\"\n (keydown.enter)=\"onEnter()\"\n ></button>\n </div>\n </form>\n <div class=\"search-results\" (mouseenter)=\"onMou