@mediusinc/mng-commons 0.0.1-rc.3 → 0.2.1-rc

package/src/lib/components/form/formly/fields/formly-field-table-dialog-multiselect/formly-field-table-dialog-multiselect.component.ts

@@ -0,0 +1,133 @@
+import {ChangeDetectionStrategy, Component, Injector, OnDestroy, OnInit} from '@angular/core';
+
+import {FieldType} from '@ngx-formly/core';
+import {Message} from 'primeng/api';
+import {finalize, first, startWith} from 'rxjs/operators';
+import {Observable, ReplaySubject, Subject, Subscription} from 'rxjs';
+
+import {MediusFilterMatchType, MediusQueryParamBuilder, MediusQueryResult} from '../../../../../api/models';
+import {FieldManyToManyEditorDescriptor} from '../../../../../descriptors';
+
+@Component({
+    selector: 'mng-formly-table-multiselect-add-field',
+    templateUrl: './formly-field-table-dialog-multiselect.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngFormlyFieldTableDialogMultiselectComponent<T, ET> extends FieldType implements OnInit, OnDestroy {
+
+    public descriptor!: FieldManyToManyEditorDescriptor<T, ET>;
+
+    public itemsSubject: Subject<Array<T>> = new ReplaySubject(1);
+    public itemsAsync: Observable<Array<T>> = this.itemsSubject.asObservable();
+    public addItemsSubject: Subject<MediusQueryResult<T>> = new ReplaySubject(1);
+    public addItemsAsync: Observable<MediusQueryResult<T>> = this.addItemsSubject.asObservable();
+
+    public dialogUseDataProvider: boolean = false;
+    private dialogDataProviderService: any = null;
+    private dialogIsLoadingSubject = new ReplaySubject<boolean>(1);
+
+    public isDialogVisible = false;
+    public dialogAreItemsLoaded = false;
+    public dialogSelectedAddItems: Array<any> = [];
+    public dialogMessages: Message[] = [];
+    public dialogIsLoading$ = this.dialogIsLoadingSubject.asObservable();
+
+    public hasAddAction: boolean = false;
+    public hasDeleteAction: boolean = false;
+
+    private subscriptions: Subscription[] = [];
+
+    constructor(private injector: Injector) {
+        super();
+    }
+
+    public ngOnInit() {
+
+        this.descriptor = this.to['descriptor'];
+        if (this.descriptor.lookupTableDataProvider?.serviceType) {
+            this.dialogUseDataProvider = true;
+            this.dialogDataProviderService = this.injector.get<any>(this.descriptor.lookupTableDataProvider.serviceType);
+        }
+        this.hasAddAction = this.descriptor.actions.some(a => a === FieldManyToManyEditorDescriptor.ActionEnum.Add);
+        this.hasDeleteAction = this.descriptor.actions.some(a => a === FieldManyToManyEditorDescriptor.ActionEnum.Delete);
+
+        // init values
+        if (typeof this.formControl.value === 'undefined' || this.formControl.value === null) {
+            this.formControl.patchValue([]);
+        }
+        const subscription = this.formControl.valueChanges
+            .pipe(
+                startWith(this.formControl.value)
+            )
+            .subscribe(v => {
+                this.itemsSubject.next(v);
+            });
+        this.subscriptions.push(subscription);
+    }
+
+    public ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+
+    openAddDialog() {
+        if (!this.dialogAreItemsLoaded && this.dialogUseDataProvider) {
+            this.dialogIsLoadingSubject.next(true);
+            const queryParamBuilder = MediusQueryParamBuilder.create(50);
+            if (this.descriptor.lookupTableDescriptor.hasDefaultSort) {
+                this.descriptor.lookupTableDescriptor.defaultSortProperty.forEach((p, idx) => queryParamBuilder.withSort(p, this.descriptor.lookupTableDescriptor.defaultSortAsc[idx]));
+            }
+            if (this.descriptor.hasLookupExcludeValues) {
+                const filterValues = this.formControl.value.map((i: any) => i[this.descriptor.excludeValueProperty])
+                queryParamBuilder.withFilter(this.descriptor.excludeFilterProperty, filterValues, undefined, MediusFilterMatchType.NotIn);
+            }
+            this.descriptor.lookupTableDataProvider?.getAll(queryParamBuilder.build(), this.dialogDataProviderService)
+                .pipe(
+                    first(),
+                    finalize(() => this.dialogIsLoadingSubject.next(false))
+                )
+                .subscribe(res => {
+                    this.addItemsSubject.next(res);
+                    this.dialogAreItemsLoaded = true;
+                });
+        }
+        this.dialogSelectedAddItems = [];
+        this.isDialogVisible = true;
+    }
+
+    onSelectionChange(items: Array<any>) {
+        this.dialogSelectedAddItems = items;
+    }
+
+    hideDialog() {
+        this.isDialogVisible = false;
+    }
+
+    addItems() {
+        let value = this.formControl.value;
+        if (Array.isArray(value)) {
+            value = [...value, ...this.dialogSelectedAddItems];
+            this.formControl.patchValue(value);
+            this.dialogSelectedAddItems = [];
+            this.dialogAreItemsLoaded = false;
+            this.hideDialog();
+        } else {
+            console.error("Values are not an valid array, cannot add selected items to array");
+            this.dialogMessages = [{ severity: 'error', summary: 'Error', detail: 'Selected items could not be added' }];
+        }
+    }
+
+    removeItem(item: any) {
+        let value = this.formControl.value;
+        if (Array.isArray(value)) {
+            const compareProperty = this.descriptor.mainTableDescriptor.dataKeyProperty ? this.descriptor.mainTableDescriptor.dataKeyProperty : this.descriptor.mainTableDescriptor.model.idPropertyName;
+            if (!compareProperty) {
+                throw new Error('Cannot compare items, please provide main table data key property or model id property.');
+            }
+            value = value.filter(i => i[compareProperty] !== item[compareProperty]);
+            this.formControl.patchValue(value);
+            this.dialogAreItemsLoaded = false;
+        } else {
+            console.error("Values are not an valid array, cannot delete selected item from array");
+        }
+    }
+}

package/src/lib/components/form/formly/fields/formly-field-tabs/formly-field-tabs.component.html

@@ -0,0 +1,10 @@
+<p-tabView>
+    <p-tabPanel *ngFor="let tab of field.fieldGroup; let i = index; let last = last;"
+                [header]="tab.templateOptions?.label!"
+                [headerStyleClass]="formControl.valid ? 'p-tabview-title' : 'bla'">
+        <ng-template pTemplate="header">
+            <span class="p-tabview-title" [class.p-tabview-title-error]="formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']">{{ tab.templateOptions?.label! | translate }}</span>
+        </ng-template>
+        <formly-field [field]="tab"></formly-field>
+    </p-tabPanel>
+</p-tabView>

package/src/lib/components/form/formly/fields/formly-field-tabs/formly-field-tabs.component.ts

@@ -0,0 +1,10 @@
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+
+@Component({
+    selector: 'mng-formly-field-tabs',
+    templateUrl: './formly-field-tabs.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MngFormlyFieldTabsComponent extends FieldType {
+}

package/{lib/components/form/formly/fields/index.d.ts → src/lib/components/form/formly/fields/index.ts}

@@ -1,7 +1,7 @@
-export * from './formly-field-autocomplete/formly-field-autocomplete.component';
-export * from './formly-field-input/formly-field-input.component';
-export * from './formly-field-dropdown/formly-field-dropdown.component';
-export * from './formly-field-table-dialog-form/formly-field-table-dialog-form.component';
-export * from './formly-field-table-dialog-multiselect/formly-field-table-dialog-multiselect.component';
-export * from './formly-field-tabs/formly-field-tabs.component';
-export * from './formly-field-fieldset/formly-field-fieldset.component';
+export * from './formly-field-autocomplete/formly-field-autocomplete.component';
+export * from './formly-field-input/formly-field-input.component';
+export * from './formly-field-dropdown/formly-field-dropdown.component';
+export * from './formly-field-table-dialog-form/formly-field-table-dialog-form.component';
+export * from './formly-field-table-dialog-multiselect/formly-field-table-dialog-multiselect.component';
+export * from './formly-field-tabs/formly-field-tabs.component';
+export * from './formly-field-fieldset/formly-field-fieldset.component';

package/src/lib/components/form/formly/wrappers/formly-field-wrapper/formly-field-wrapper.component.html

@@ -0,0 +1,7 @@
+<div class="field">
+    <label [for]="key">{{ $any(to?.label) | translate }} <span *ngIf="to.required && to['hideRequiredMarker'] !== true">*</span></label>
+    <ng-container #fieldComponent></ng-container>
+    <small *ngIf="showError" class="p-error">
+        <formly-validation-message [field]="field"></formly-validation-message>
+    </small>
+</div>

package/src/lib/components/form/formly/wrappers/formly-field-wrapper/formly-field-wrapper.component.ts

@@ -0,0 +1,13 @@
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import { FieldWrapper } from '@ngx-formly/core';
+
+@Component({
+    selector: 'mng-formly-field-wrapper',
+    templateUrl: './formly-field-wrapper.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngFormlyFieldWrapperComponent extends FieldWrapper implements OnInit {
+
+    public ngOnInit() {
+    }
+}

package/src/lib/components/form/formly/wrappers/formly-table-wrapper/formly-table-wrapper.component.html

@@ -0,0 +1,6 @@
+<div class="field table">
+    <ng-container #fieldComponent></ng-container>
+    <small *ngIf="showError" class="p-error">
+        <formly-validation-message [field]="field"></formly-validation-message>
+    </small>
+</div>

package/src/lib/components/form/formly/wrappers/formly-table-wrapper/formly-table-wrapper.component.ts

@@ -0,0 +1,13 @@
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import { FieldWrapper } from '@ngx-formly/core';
+
+@Component({
+    selector: 'mng-formly-table-wrapper',
+    templateUrl: './formly-table-wrapper.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngFormlyTableWrapperComponent extends FieldWrapper implements OnInit {
+
+    public ngOnInit() {
+    }
+}

package/{lib/components/form/formly/wrappers/index.d.ts → src/lib/components/form/formly/wrappers/index.ts}

@@ -1,2 +1,2 @@
-export * from './formly-field-wrapper/formly-field-wrapper.component';
-export * from './formly-table-wrapper/formly-table-wrapper.component';
+export * from './formly-field-wrapper/formly-field-wrapper.component';
+export * from './formly-table-wrapper/formly-table-wrapper.component';

package/src/lib/components/form/index.ts

@@ -0,0 +1,3 @@
+export * from './editor/form-editor.component';
+export * from './autocomplete/autocomplete.component';
+export * from './dropdown/dropdown.component';

package/src/lib/components/form/models/form-editor.event.ts

@@ -0,0 +1,7 @@
+export class MngFormEditorSubmitEvent<T> {
+    public success: boolean = true;
+
+    constructor(
+        public readonly formItem: T
+    ) {}
+}

package/src/lib/components/form/models/index.ts

@@ -0,0 +1 @@
+export * from './form-editor.event';

package/src/lib/components/layout/breadcrumb.component.html

@@ -0,0 +1,5 @@
+<div class="layout-breadcrumb-container">
+    <div class="layout-breadcrumb">
+        <p-breadcrumb [home]="$any(mngCommons.breadcrumbHome$ | async)" [model]="$any(mngCommons.breadcrumbs$ |async)" styleClass="layout-breadcrumb py-2"></p-breadcrumb>
+    </div>
+</div>

package/src/lib/components/layout/breadcrumb.component.ts

@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+import {MngCommonsService} from '../../services';
+
+@Component({
+    selector: 'mng-breadcrumb',
+    templateUrl: './breadcrumb.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngBreadcrumbComponent {
+    constructor(public mngCommons: MngCommonsService) {}
+}

package/src/lib/components/layout/footer.component.html

@@ -0,0 +1,7 @@
+<div class="layout-footer">
+    <div class="footer-logo-container">
+        <img id="footer-logo" [src]="mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight" alt="atlantis-layout"/>
+        <span class="app-name">{{ mngCommons.appName | translate }}</span>
+    </div>
+    <span class="copyright">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>
+</div>

package/src/lib/components/layout/footer.component.ts

@@ -0,0 +1,15 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+import {MngCommonsService} from '../../services';
+
+@Component({
+    selector: 'mng-footer',
+    templateUrl: './footer.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngFooterComponent {
+
+    public currentYear = new Date().getFullYear();
+
+    constructor(public mngCommons: MngCommonsService) {}
+}

package/src/lib/components/layout/index.ts

@@ -0,0 +1,6 @@
+export * from './breadcrumb.component';
+export * from './footer.component';
+export * from './main-layout.component';
+export * from './menu.component';
+export * from './menu-item.component';
+export * from './topbar.component';

package/src/lib/components/layout/main-layout.component.html

@@ -0,0 +1,26 @@
+<div class="layout-wrapper"  (click)="mainLayoutService.onLayoutClick()"
+     [ngClass]="{'layout-static': mngCommons.menuModeIsStatic$ | async,
+                'layout-overlay': mngCommons.menuModeIsOverlay$ | async,
+                'layout-slim': mngCommons.menuModeIsSlim$ | async,
+                'layout-sidebar': mngCommons.menuModeIsSidebar$ | async,
+                'layout-sidebar-static': (mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async),
+                'layout-overlay-active': mainLayoutService.overlayMenuActive$ | async,
+                'layout-mobile-active': mainLayoutService.staticMenuMobileActive$ | async,
+                'layout-static-inactive': (mainLayoutService.staticMenuDesktopInactive$ | async) && (mngCommons.menuModeIsStatic$ | async) }">
+
+    <div class="layout-main">
+
+        <ng-container [mngComponent]="footerComponent"></ng-container>
+
+        <ng-container *ngIf="!(mainLayoutService.isMobile$ | async) && ((mngCommons.menuModeIsStatic$ | async) || (mngCommons.menuModeIsSlim$ | async) || (mngCommons.menuModeIsSidebar$ | async))"
+                      [mngComponent]="menuComponent">
+        </ng-container>
+
+        <div class="layout-main-content">
+            <router-outlet></router-outlet>
+        </div>
+
+        <ng-container [mngComponent]="footerComponent"></ng-container>
+    </div>
+
+</div>

package/src/lib/components/layout/main-layout.component.ts

@@ -0,0 +1,54 @@
+import {AfterViewInit, ChangeDetectionStrategy, Component, HostListener, QueryList, Type, ViewChildren} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+
+import {MngCommonsService} from '../../services';
+import {MngMainLayoutComponentService} from './services';
+import {MngTemplateDirective} from '../../directives';
+import {MngRouterData} from '../../models';
+import {MngFooterComponent} from './footer.component';
+import {MngMenuComponent} from './menu.component';
+import {MngTopbarComponent} from './topbar.component';
+
+@Component({
+    selector: 'mng-main-layout',
+    templateUrl: './main-layout.component.html',
+    providers: [MngMainLayoutComponentService],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngMainLayoutComponent implements AfterViewInit {
+
+    @ViewChildren(MngTemplateDirective) templates!: QueryList<MngTemplateDirective>;
+
+    public topbarComponent: Type<any> = MngTopbarComponent;
+    public menuComponent: Type<any> = MngMenuComponent;
+    public footerComponent: Type<any> = MngFooterComponent;
+
+    constructor(
+        private route: ActivatedRoute,
+        public mngCommons: MngCommonsService,
+        public mainLayoutService: MngMainLayoutComponentService
+    ) {}
+
+    ngOnInit() {
+        const routeData = this.route.snapshot.data as MngRouterData;
+        if (routeData?.topbarComponent) {
+            this.topbarComponent = routeData.topbarComponent;
+        }
+        if (routeData?.menuComponent) {
+            this.menuComponent = routeData.menuComponent;
+        }
+        if (routeData?.footerComponent) {
+            this.footerComponent = routeData.footerComponent;
+        }
+    }
+
+    ngAfterViewInit(): void {
+        this.mainLayoutService.innerWidth = window.innerWidth;
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onWindowResize(event: UIEvent) {
+        const target: any = event.target;
+        this.mainLayoutService.innerWidth = target?.innerWidth ?? window.innerWidth;
+    }
+}

package/src/lib/components/layout/menu-item.component.html

@@ -0,0 +1,41 @@
+<ng-container>
+    <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label | translate }}</div>
+    <a *ngIf="(!item.routerLink || item.items) && item.visible !== false"
+       [attr.href]="item.url"
+       (click)="itemClick($event)"
+       (mouseenter)="onMouseEnter()"
+       (keydown.enter)="itemClick($event)"
+       [attr.target]="item.target"
+       [attr.tabindex]="0"
+       [ngClass]="item.class"
+       pRipple>
+        <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+        <span class="layout-menuitem-text">{{ item.label | translate }}</span>
+        <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+        <span class="menuitem-badge" *ngIf="item.badge">{{ item.badge }}</span>
+    </a>
+    <a *ngIf="(item.routerLink && !item.items) && item.visible !== false"
+       (click)="itemClick($event)"
+       (mouseenter)="hover=true"
+       (mouseleave)="hover=false"
+       [routerLink]="item.routerLink"
+       routerLinkActive="active-menuitem-routerlink"
+       [routerLinkActiveOptions]="{ exact: true }"
+       [attr.target]="item.target"
+       [attr.tabindex]="0"
+       [ngClass]="item.class"
+       pRipple>
+        <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+        <span class="layout-menuitem-text">{{ item.label | translate }}</span>
+        <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+        <span class="menuitem-badge" *ngIf="item.badge">{{ item.badge }}</span>
+    </a>
+    <ul *ngIf="((item.items && active) || (item.items && (mngCommons.menuModeIsStatic$ | async) && (root || active))) && item.visible !== false"
+        [@children]="((mngCommons.menuModeIsSlim$ | async) && !(mainLayoutService.isMobile$ | async) && root)
+            ? (active ? 'visible' : 'hidden')
+            : ((mngCommons.menuModeIsStatic$ | async) && root && !(mainLayoutService.isMobile$ | async) ? 'visible' : (active ? 'visibleAnimated' : 'hiddenAnimated'))">
+        <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+                <li mng-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
+        </ng-template>
+    </ul>
+</ng-container>

package/src/lib/components/layout/menu-item.component.ts

@@ -0,0 +1,170 @@
+import {Component, Input, OnInit, ChangeDetectorRef, OnDestroy, ChangeDetectionStrategy} from '@angular/core';
+import {Router, NavigationEnd} from '@angular/router';
+import {trigger, state, style, transition, animate} from '@angular/animations';
+
+import {Subscription} from 'rxjs';
+import {filter} from 'rxjs/operators';
+
+import {MngCommonsService} from '../../services';
+import {MngMainLayoutComponentService} from './services';
+
+@Component({
+    /* tslint:disable:component-selector */
+    selector: '[mng-menuitem]',
+    /* tslint:enable:component-selector */
+    templateUrl: './menu-item.component.html',
+    host: {
+        '[class.layout-root-menuitem]': 'root',
+        '[class.active-menuitem]': 'active'
+    },
+    animations: [
+        trigger('children', [
+            state('void', style({
+                height: '0px'
+            })),
+            state('hiddenAnimated', style({
+                height: '0px'
+            })),
+            state('visibleAnimated', style({
+                height: '*'
+            })),
+            state('visible', style({
+                height: '*',
+                'z-index': 100
+            })),
+            state('hidden', style({
+                height: '0px',
+                'z-index': '*'
+            })),
+            transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('void => visibleAnimated, visibleAnimated => void', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+        ])
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngMenuItemComponent implements OnInit, OnDestroy {
+
+    @Input() item: any;
+
+    @Input() index: number = 0;
+
+    @Input() root: boolean = false;
+
+    @Input() parentKey: string|null = null;
+
+    active = false;
+
+    hover: boolean = false;
+
+    menuSourceSubscription: Subscription;
+
+    menuResetSubscription: Subscription;
+
+    key: string = '';
+
+    constructor(
+        public router: Router,
+        private cd: ChangeDetectorRef,
+        public mngCommons: MngCommonsService, 
+        public mainLayoutService: MngMainLayoutComponentService
+    ) {
+        this.menuSourceSubscription = this.mngCommons.menuActiveKey$.subscribe(key => {
+            // deactivate current active menu
+            if (this.active && this.key !== key && key.indexOf(this.key) !== 0) {
+                this.active = false;
+            }
+        });
+
+        this.menuResetSubscription = this.mngCommons.menuReset$.subscribe(() => {
+            this.active = false;
+        });
+
+        this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(params => {
+                if (this.mngCommons.menuModeIsSlim && !this.mainLayoutService.isMobile()) {
+                    this.active = false;
+                } else {
+                    if (this.item.routerLink) {
+                        this.updateActiveStateFromRoute();
+                    } else {
+                        this.active = false;
+                    }
+                }
+            });
+    }
+
+    ngOnInit() {
+        if (!this.mngCommons.menuModeIsSlim && this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+        }
+
+        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+    }
+
+    updateActiveStateFromRoute() {
+        this.active = this.router.isActive(this.item.routerLink[0], this.item.items ? false : true);
+    }
+
+    itemClick(event: Event) {
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        // navigate with hover in horizontal mode
+        if (this.root) {
+            this.mainLayoutService.menuHoverActive = !this.mainLayoutService.menuHoverActive;
+        }
+
+        // notify other items
+        this.mngCommons.menuChangeActiveKey(this.key);
+
+        // 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;
+        } else {
+            // activate item
+            this.active = true;
+
+            if (this.mainLayoutService.isMobile()) {
+                this.mainLayoutService.staticMenuMobileActive = false;
+            }
+
+            if (this.mngCommons.menuModeIsOverlay) {
+                this.mainLayoutService.overlayMenuActive = false;
+            }
+
+            // reset horizontal menu
+            if (this.mngCommons.menuModeIsSlim && !this.mainLayoutService.isMobile()){
+                this.mngCommons.menuReset();
+                this.mainLayoutService.menuHoverActive = false;
+            }
+        }
+    }
+
+    onMouseEnter() {
+        // activate item on hover
+        if (this.root && this.mainLayoutService.menuHoverActive && (this.mngCommons.menuModeIsSlim) && this.mainLayoutService.isDesktop()) {
+            this.mngCommons.menuChangeActiveKey(this.key);
+            this.active = true;
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.menuSourceSubscription) {
+            this.menuSourceSubscription.unsubscribe();
+        }
+
+        if (this.menuResetSubscription) {
+            this.menuResetSubscription.unsubscribe();
+        }
+    }
+}

package/src/lib/components/layout/menu.component.html

@@ -0,0 +1,27 @@
+<div class="layout-menu-wrapper" [ngClass]="{ 'layout-sidebar-active': (mainLayoutService.sidebarActive$ | async) }"
+     (click)="mainLayoutService.onSidebarClick($event)" (mouseover)="mainLayoutService.onSidebarMouseOver($event)" (mouseleave)="mainLayoutService.onSidebarMouseLeave($event)">
+    <div class="menu-logo">
+
+        <a routerLink="/" class="logo">
+            <img [src]="mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight" />
+        </a>
+
+        <a routerLink="/" class="app-name" *ngIf="!(mngCommons.menuModeIsSlim$ | async) || (mainLayoutService.isMobile$ | async)">
+            <img [src]="mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight" />
+        </a>
+        <a *ngIf="mngCommons.menuPinEnabled" class="menu-pin" (click)="mainLayoutService.onToggleMenu($event)">
+            <span *ngIf="mngCommons.menuModeIsOverlay$ | async" class="pi pi-times"></span>
+            <span *ngIf="(mngCommons.menuModeIsSidebar$ | async) && !(mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)" class="pi pi-unlock"></span>
+            <span *ngIf="(mngCommons.menuModeIsSidebar$ | async) && (mainLayoutService.sidebarStatic$ | async) && (mainLayoutService.pinActive$ | async)" class="pi pi-lock"></span>
+        </a>
+    </div>
+
+    <div class="layout-menu-container">
+        <ul class="layout-menu">
+            <ng-container *ngFor="let item of (mngCommons.menuItems); let i = index;">
+                <li mng-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+                <li *ngIf="item.separator" class="menu-separator"></li>
+            </ng-container>
+        </ul>
+    </div>
+</div>

package/src/lib/components/layout/menu.component.ts

@@ -0,0 +1,17 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+import {MngCommonsService} from '../../services';
+import {MngMainLayoutComponentService} from './services';
+
+@Component({
+    selector: 'mng-menu',
+    templateUrl: './menu.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngMenuComponent {
+
+    constructor(
+        public mngCommons: MngCommonsService,
+        public mainLayoutService: MngMainLayoutComponentService
+    ) {}
+}

package/src/lib/components/layout/services/index.ts

@@ -0,0 +1 @@
+export * from './main-layout.component.service';