general-library-union 3.3.39 → 3.3.41

package/src/app/layout/app.breadcrumb.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { MenuService } from '../core/servicios/menu.service';
+import { UtilsService } from '../core/servicios/utils.service';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+
+interface Breadcrumb {
+    label: string;
+    url?: string;
+}
+
+@Component({
+    selector: 'app-breadcrumb',
+    imports: [BreadcrumbModule],
+    standalone: true,
+    templateUrl: './app.breadcrumb.component.html'
+})
+export class AppBreadcrumbComponent implements OnInit, OnDestroy {
+  private subscription = new Subscription();
+  items: MenuItem[] = [];
+  home: MenuItem;
+
+  private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
+  readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
+
+  constructor(
+    private router: Router,
+    private menuService: MenuService,
+    private utilsService: UtilsService,
+    private cd: ChangeDetectorRef // Importando ChangeDetectorRef
+  ) {
+    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+      const root = this.router.routerState.snapshot.root;
+      const breadcrumbs: Breadcrumb[] = [];
+      this.addBreadcrumb(root, [], breadcrumbs);
+      this._breadcrumbs$.next(breadcrumbs);
+      this.cd.detectChanges(); // Marcando para detección de cambios
+    });
+  }
+
+  ngOnInit(): void {
+    this.subscription.add(
+      this.menuService.breadcrumb.subscribe(items => {
+        this.items = items;
+        this.cd.detectChanges(); // Marcando para detección de cambios
+      })
+    );
+    if (window.location.href.toString().includes('admonPortal')) {
+      this.home = { icon: 'pi pi-home', routerLink: '/'+ this.utilsService.obtenerBase() + '/admonPortal/inicio' };
+    } else {
+      this.home = { icon: 'pi pi-home', routerLink: '/'+ this.utilsService.obtenerBase() + '/inicio' };
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
+    const routeUrl = parentUrl.concat(route.url.map(url => url.path));
+    const breadcrumb = route.data['breadcrumb'];
+    const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+
+    if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+      breadcrumbs.push({
+        label: route.data['breadcrumb'],
+        url: '/' + routeUrl.join('/'),
+      });
+    }
+
+    if (route.firstChild) {
+      this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+    }
+  }
+}

package/src/app/layout/app.footer.component.html

@@ -0,0 +1,18 @@
+<div class="layout-footer">
+  <img id="footer-logo" [id]="'logoImg'" [src]="'assets/images/logo-union-simple.png'" alt="ultima-footer-logo" />
+  <img id="footer-logo" [id]="'logoName'" [src]=" 'assets/images/texto-union-soluciones.png'" alt="ultima-footer-logo" />
+  <button
+    pButton
+    pRipple
+    type="button"
+    icon="pi pi-facebook fs-large"
+    class="p-button-rounded p-button-text p-button-plain ml-auto mr-2"
+  ></button>
+  <button
+    pButton
+    pRipple
+    type="button"
+    icon="pi pi-twitter fs-large"
+    class="p-button-rounded p-button-text p-button-plain mr-2"
+  ></button>
+</div>

package/src/app/layout/app.footer.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import { GeneralPipe } from '../webcommon/pipes/general.pipe';
+import { LayoutService } from './service/app.layout.service';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+    selector: 'app-footer',
+    imports: [ButtonModule],
+    standalone: true,
+    templateUrl: './app.footer.component.html'
+})
+export class AppFooterComponent {
+
+    constructor(public layoutService: LayoutService ) {}
+}

package/src/app/layout/app.layout.component.html

@@ -0,0 +1,20 @@
+<div class="layout-container" [ngClass]="containerClass">
+
+  <app-topbar *ngIf="!autoServicio"></app-topbar>
+  <app-rightmenu *ngIf="!autoServicio"></app-rightmenu>
+  <app-sidebar *ngIf="!autoServicio"></app-sidebar>
+
+  <div class="layout-content-wrapper">
+      <app-breadcrumb *ngIf="!autoServicio"></app-breadcrumb>
+
+      <div class="layout-content">
+          <router-outlet></router-outlet>
+      </div>
+
+      <app-footer *ngIf="!autoServicio"></app-footer>
+  </div>
+  <!-- Se esconde el modulo de configuracion -->
+  <!-- <app-config></app-config> -->
+
+  <div *ngIf="layoutService.state.staticMenuMobileActive" class="layout-mask"></div>
+</div>

package/src/app/layout/app.layout.component.ts

@@ -0,0 +1,201 @@
+import { ChangeDetectorRef, Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
+import { NavigationEnd, Router, RouterModule, RouterOutlet } from '@angular/router';
+import { filter, Subscription } from 'rxjs';
+import { MenuService } from './app.menu.service';
+import { AppSidebarComponent } from './app.sidebar.component';
+import { AppTopbarComponent } from './app.topbar.component';
+import { LayoutService } from './service/app.layout.service';
+import { AuthService } from '../core/servicios/auth.service';
+import { AppFooterComponent } from './app.footer.component';
+import { AppRightMenuComponent } from './app.rightmenu.component';
+import { AppBreadcrumbComponent } from './app.breadcrumb.component';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'app-layout',
+    standalone: true,
+    imports: [RouterOutlet, RouterModule, AppFooterComponent, AppTopbarComponent, AppRightMenuComponent, AppSidebarComponent, AppBreadcrumbComponent, FormsModule, CommonModule,],
+    templateUrl: './app.layout.component.html'
+})
+export class AppLayoutComponent implements OnDestroy {
+
+    overlayMenuOpenSubscription: Subscription;
+
+    topbarMenuOpenSubscription: Subscription;
+
+    menuProfileOpenSubscription: Subscription;
+
+    menuOutsideClickListener: any;
+
+    menuScrollListener: any;
+
+    topbarMenuOutsideClickListener: any;
+
+    menuProfileOutsideClickListener: any;
+
+    @ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
+
+    @ViewChild(AppTopbarComponent) appTopbar!: AppTopbarComponent;
+
+    autoServicio: boolean = false;
+
+    constructor(private menuService: MenuService, public layoutService: LayoutService, public renderer: Renderer2, public router: Router, private cd: ChangeDetectorRef, private authService: AuthService) {
+        this.autoServicio = (authService.getTokenKey('aplicacion') == '10')
+        this.hideMenuProfile();
+        
+        this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
+            this.hideTopbarMenu();
+            
+            if (!this.menuOutsideClickListener) {
+                this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
+                    const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) || this.appSidebar.el.nativeElement.contains(event.target)
+                        || this.appTopbar.menuButton.nativeElement.isSameNode(event.target) || this.appTopbar.menuButton.nativeElement.contains(event.target));
+                    if (isOutsideClicked) {
+                        this.hideMenu();
+                    }
+                });
+            }
+
+            if ((this.layoutService.isHorizontal() || this.layoutService.isSlim()|| this.layoutService.isSlimPlus()) && !this.menuScrollListener) {
+                this.menuScrollListener = this.renderer.listen(this.appSidebar.menuContainer.nativeElement, 'scroll', event => {
+                    if (this.layoutService.isDesktop()) {
+                        this.hideMenu();
+                    }
+                });
+            }
+
+            if (this.layoutService.state.staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
+        });
+
+        this.topbarMenuOpenSubscription = this.layoutService.topbarMenuOpen$.subscribe(() => {
+            if (!this.topbarMenuOutsideClickListener) {
+                this.topbarMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
+                    const isOutsideClicked = !(this.appTopbar.el.nativeElement.isSameNode(event.target) || this.appTopbar.el.nativeElement.contains(event.target)
+                        || this.appTopbar.mobileMenuButton.nativeElement.isSameNode(event.target) || this.appTopbar.mobileMenuButton.nativeElement.contains(event.target));
+                    if (isOutsideClicked) {
+                        this.hideTopbarMenu();
+                    }
+                });
+            }
+
+            if (this.layoutService.state.staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
+        });
+
+        this.menuProfileOpenSubscription = this.layoutService.menuProfileOpen$.subscribe(() => {
+            this.hideMenu();
+
+            if (!this.menuProfileOutsideClickListener) {
+                this.menuProfileOutsideClickListener = this.renderer.listen('document', 'click', event => {
+                    const isOutsideClicked = !(this.appSidebar.menuProfile.el.nativeElement.isSameNode(event.target) || this.appSidebar.menuProfile.el.nativeElement.contains(event.target));
+                    if (isOutsideClicked) {
+                        this.hideMenuProfile();
+                    }
+                });
+            }
+        });
+
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(() => {
+                this.hideMenu();
+                this.hideTopbarMenu();
+                this.hideMenuProfile();
+            });
+    }
+
+    blockBodyScroll(): void {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        }
+        else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+
+    unblockBodyScroll(): void {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        }
+        else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' +
+                'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+
+    hideMenu() {
+        this.layoutService.state.overlayMenuActive = false;
+        this.layoutService.state.staticMenuMobileActive = false;
+        this.layoutService.state.menuHoverActive = false;
+        this.menuService.reset();
+        
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+
+        if (this.menuScrollListener) {
+            this.menuScrollListener();
+            this.menuScrollListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+
+    hideTopbarMenu() {
+        this.layoutService.state.topbarMenuActive = false;
+        
+        if (this.topbarMenuOutsideClickListener) {
+            this.topbarMenuOutsideClickListener();
+            this.topbarMenuOutsideClickListener = null;
+        }
+    }
+
+    hideMenuProfile() {
+        this.layoutService.state.menuProfileActive = false;
+        
+        if (this.menuProfileOutsideClickListener) {
+            this.menuProfileOutsideClickListener();
+            this.menuProfileOutsideClickListener = null;
+        }
+    }
+
+    get containerClass() {
+        let styleClass: {[key: string]: any} = {
+            'layout-overlay': this.layoutService.config.menuMode === 'overlay',
+            'layout-static': this.layoutService.config.menuMode === 'static',
+            'layout-slim': this.layoutService.config.menuMode === 'slim',
+            'layout-slim-plus': this.layoutService.config.menuMode === 'slim-plus',
+            'layout-horizontal': this.layoutService.config.menuMode === 'horizontal',
+            'layout-reveal': this.layoutService.config.menuMode === 'reveal',
+            'layout-drawer': this.layoutService.config.menuMode === 'drawer',
+            'p-input-filled': this.layoutService.config.inputStyle === 'filled',
+            'p-ripple-disabled': !this.layoutService.config.ripple,
+            'layout-static-inactive': this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config.menuMode === 'static',
+            'layout-overlay-active': this.layoutService.state.overlayMenuActive,
+            'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
+            'layout-topbar-menu-active': this.layoutService.state.topbarMenuActive,
+            'layout-menu-profile-active': this.layoutService.state.menuProfileActive,
+            'layout-sidebar-active': this.layoutService.state.sidebarActive,
+            'layout-sidebar-anchored': this.layoutService.state.anchored
+        };
+
+        styleClass['layout-topbar-' + this.layoutService.config.topbarTheme] = true;
+        styleClass['layout-menu-' + this.layoutService.config.menuTheme] = true;
+        styleClass['layout-menu-profile-' + this.layoutService.config.menuProfilePosition] = true;
+        return styleClass;
+    }
+
+    ngOnDestroy() {
+        if (this.overlayMenuOpenSubscription) {
+            this.overlayMenuOpenSubscription.unsubscribe();
+        }
+
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+        }
+    }
+
+}

package/src/app/layout/app.layout.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  declarations: [
+  ],
+  imports: [
+  ]
+})
+export class AppLayoutModule { }

package/src/app/layout/app.menu.component.html

@@ -0,0 +1,6 @@
+<ul class="layout-menu">
+    <ng-container *ngFor="let item of model; let i = index;">
+        <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+        <li *ngIf="item.separator" class="menu-separator"></li>
+    </ng-container>
+</ul>

package/src/app/layout/app.menu.component.ts

@@ -0,0 +1,51 @@
+import { OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Subscription } from 'rxjs';
+import { MenuService } from '../core/servicios/menu.service';
+import { UtilsService } from '../core/servicios/utils.service';
+import { CommonModule } from '@angular/common';
+import { AppMenuitemComponent } from './app.menuitem.component';
+
+@Component({
+    selector: 'app-menu',
+    imports: [CommonModule, AppMenuitemComponent],
+    standalone: true,
+    templateUrl: './app.menu.component.html'
+})
+export class AppMenuComponent implements OnInit {
+  subcription: Subscription;
+  model: MenuItem[]
+
+  /**
+   *
+   */
+  constructor(private menuService: MenuService, private utilsService: UtilsService) {
+  }
+
+    ngOnInit() {
+      if (window.location.href.toString().includes('admonPortal')) {
+        this.model = [{
+          label: "Inicio",
+          icon: "pi pi-home",
+          routerLink: this.utilsService.obtenerBase() + "/admonPortal/inicio",
+          visible: true,
+          items: [],
+        }];
+      } else {
+        this.model = [{
+          label: "Inicio",
+          icon: "pi pi-home",
+          routerLink: this.utilsService.obtenerBase() + "/inicio",
+          visible: true,
+          items: [],
+        }];
+      }
+      
+        this.subcription = this.menuService.menu.subscribe((menu) => {
+          this.model[0].label = menu.label;
+          this.model[0].items = menu.items;
+        });
+    }
+}
+

package/src/app/layout/app.menu.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { MenuChangeEvent } from './api/menuchangeevent';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class MenuService {
+
+    private menuSource = new Subject<MenuChangeEvent>();
+    private resetSource = new Subject();
+
+    menuSource$ = this.menuSource.asObservable();
+    resetSource$ = this.resetSource.asObservable();
+
+    onMenuStateChange(event: MenuChangeEvent) {
+        this.menuSource.next(event);
+    }
+
+    reset() {
+        this.resetSource.next(true);
+    }
+}

package/src/app/layout/app.menuitem.component.ts

@@ -0,0 +1,252 @@
+import { ChangeDetectorRef, Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { MenuService } from './app.menu.service';
+import { LayoutService } from './service/app.layout.service';
+import {DomHandler} from 'primeng/dom';
+import { UtilsService } from '../core/servicios/utils.service';
+import { CommonModule } from '@angular/common';
+import { TooltipModule } from 'primeng/tooltip';
+
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: '[app-menuitem]',
+    standalone: true,
+    imports: [CommonModule, RouterModule, TooltipModule],
+    template: `
+		<ng-container>
+            <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">
+                <span>{{item.label}}</span>
+                <i class="layout-menuitem-root-icon pi pi-fw pi-ellipsis-h"></i>
+            </div>
+			<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)"  (mouseenter)="onMouseEnter()"
+			   [ngClass]="item.class" [attr.target]="item.target" tabindex="0" pRipple [pTooltip]="item.label" [tooltipDisabled]="!(isSlim && root && !active)">
+				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+				<span class="layout-menuitem-text">{{item.label}}</span>
+				<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+			</a>
+			<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" (mouseenter)="onMouseEnter()" [ngClass]="item.class"
+			   [routerLink]="'/'+utilsService.obtenerBase()+ (url.toString().includes('admonPortal') ? '/admonPortal' : '') +item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
+               [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment"
+               [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
+               [attr.target]="item.target" tabindex="0" pRipple [pTooltip]="item.label" [tooltipDisabled]="!(isSlim && root)">
+				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+				<span class="layout-menuitem-text">{{item.label}}</span>
+				<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+			</a>
+
+			<ul #submenu *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation" (@children.done)="onSubmenuAnimated($event)">
+				<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+					<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
+				</ng-template>
+			</ul>
+		</ng-container>
+    `,
+    animations: [
+        trigger('children', [
+            state('collapsed', style({
+                height: '0'
+            })),
+            state('expanded', style({
+                height: '*'
+            })),
+            state('hidden', style({
+                display: 'none'
+            })),
+            state('visible', style({
+                display: 'block'
+            })),
+            transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+        ])
+    ]
+})
+export class AppMenuitemComponent implements OnInit, OnDestroy {
+
+    @Input() item: any;
+
+    @Input() index!: number;
+
+    @Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
+
+    @Input() parentKey!: string;
+
+    @ViewChild('submenu') submenu!: ElementRef;
+
+    active = false;
+
+    menuSourceSubscription: Subscription;
+
+    menuResetSubscription: Subscription;
+
+    key: string = "";
+
+    url = window.location.href;
+
+    constructor(public layoutService: LayoutService, private cd: ChangeDetectorRef, public router: Router, private menuService: MenuService, public utilsService: UtilsService) {
+        this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
+            Promise.resolve(null).then(() => {
+                if (value.routeEvent) {
+                    this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
+                }
+                else {
+                    if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
+                        this.active = false;
+                    }
+                }
+            });
+        });
+
+        this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
+            this.active = false;
+        });
+
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(params => {
+                if (this.isSlimPlus || this.isSlim || this.isHorizontal) {
+                    this.active = false;
+                }
+                else {
+                    if (this.item.routerLink) {
+                        this.updateActiveStateFromRoute();
+                    }
+                }
+            });
+    }
+
+    ngOnInit() {
+        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+
+        if (!(this.isSlimPlus || this.isSlim || this.isHorizontal) && this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+        }
+    }
+
+    ngAfterViewChecked() {
+        if (this.root && this.active && this.layoutService.isDesktop() && (this.layoutService.isHorizontal() || this.layoutService.isSlim()|| this.layoutService.isSlimPlus())) {
+            this.calculatePosition(this.submenu?.nativeElement, this.submenu?.nativeElement.parentElement);
+        }
+    }
+
+    updateActiveStateFromRoute() {
+        let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
+
+        if (activeRoute) {
+            this.menuService.onMenuStateChange({key: this.key, routeEvent: true});
+        }
+    }
+
+    onSubmenuAnimated(event: AnimationEvent) {
+        if (event.toState === 'visible' && this.layoutService.isDesktop() && (this.layoutService.isHorizontal() || this.layoutService.isSlim()|| this.layoutService.isSlimPlus())) {
+            const el = <HTMLUListElement> event.element;
+            const elParent = <HTMLUListElement> el.parentElement;
+            this.calculatePosition(el, elParent);
+        }
+    }
+
+    calculatePosition(overlay: HTMLElement, target: HTMLElement) {
+        if (overlay) {
+            const { left, top } = target.getBoundingClientRect();
+            const [vWidth, vHeight] = [window.innerWidth, window.innerHeight];
+            const [oWidth, oHeight] = [overlay.offsetWidth, overlay.offsetHeight];
+            const scrollbarWidth = DomHandler.calculateScrollbarWidth();
+            const topbarEl = document.querySelector('.layout-topbar') as HTMLElement;
+            const topbarHeight = topbarEl?.offsetHeight || 0;
+            // reset
+            overlay.style.top = '';
+            overlay.style.left = '';
+
+            if (this.layoutService.isHorizontal()) {
+                const width = left + oWidth + scrollbarWidth;
+                overlay.style.left = vWidth < width ? `${left - (width - vWidth)}px` : `${left}px`;
+            } else if ( this.layoutService.isSlim() || this.layoutService.isSlimPlus()) {
+                const topOffset = top - topbarHeight;
+                const height = topOffset + oHeight + topbarHeight;
+                overlay.style.top = vHeight < height ? `${topOffset - (height - vHeight)}px` : `${topOffset}px`;
+            }
+        }
+    }
+
+    itemClick(event: Event) {
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        // navigate with hover
+        if (this.root && this.isSlim || this.isHorizontal || this.isSlimPlus) {
+            this.layoutService.state.menuHoverActive = !this.layoutService.state.menuHoverActive;
+        }
+
+        // execute command
+        if (this.item.command) {
+            this.item.command({ originalEvent: event, item: this.item });
+        }
+
+        // toggle active state
+        if (this.item.items) {
+            this.active = !this.active;
+
+            if (this.root && this.active && (this.isSlim || this.isHorizontal || this.isSlimPlus)) {
+                this.layoutService.onOverlaySubmenuOpen();
+            }
+        }
+        else {
+            if (this.layoutService.isMobile()) {
+                this.layoutService.state.staticMenuMobileActive = false;
+            }
+
+            if (this.isSlim || this.isHorizontal || this.isSlimPlus) {
+                this.menuService.reset();
+                this.layoutService.state.menuHoverActive = false;
+            }
+        }
+
+        this.menuService.onMenuStateChange({key: this.key});
+    }
+
+    onMouseEnter() {
+        // activate item on hover
+        if (this.root && (this.isSlim || this.isHorizontal || this.isSlimPlus) && this.layoutService.isDesktop()) {
+            if (this.layoutService.state.menuHoverActive) {
+                this.active = true;
+                this.menuService.onMenuStateChange({key: this.key});
+            }
+        }
+    }
+
+    get submenuAnimation() {
+        if (this.layoutService.isDesktop() && (this.layoutService.isHorizontal() || this.layoutService.isSlim()|| this.layoutService.isSlimPlus()))
+            return this.active ? 'visible' : 'hidden';
+        else
+            return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
+    }
+
+    get isHorizontal() {
+        return this.layoutService.isHorizontal();
+    }
+
+    get isSlim() {
+        return this.layoutService.isSlim();
+    }
+    get isSlimPlus() {
+        return this.layoutService.isSlimPlus();
+    }
+
+    @HostBinding('class.active-menuitem')
+    get activeClass() {
+        return this.active && !this.root;
+    }
+
+    ngOnDestroy() {
+        if (this.menuSourceSubscription) {
+            this.menuSourceSubscription.unsubscribe();
+        }
+
+        if (this.menuResetSubscription) {
+            this.menuResetSubscription.unsubscribe();
+        }
+    }
+}