@mediusinc/mng-commons 0.2.1-rc → 0.2.4

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

@@ -1,56 +0,0 @@
-<ng-container [ngSwitch]="to.type">
-    <p-inputNumber *ngSwitchCase="'number'"
-                   [id]="$any(key)"
-                   [formControl]="iFormControl"
-                   [formlyAttributes]="field"
-                   [min]="$any(descriptor.numberMin)"
-                   [max]="$any(descriptor.numberMax)"
-                   [step]="$any(descriptor.numberStep)"
-                   [minFractionDigits]="descriptor.numberMinFractionDigits || 0"
-                   [maxFractionDigits]="descriptor.numberMaxFractionDigits || 0">
-    </p-inputNumber>
-
-    <div *ngSwitchCase="'switch'" class="flex flex-column">
-        <label [for]="key">{{ to?.label! | translate }} <span *ngIf="to.required && to['hideRequiredMarker'] !== true">*</span></label>
-        <p-inputSwitch [id]="$any(key)"
-                       [formControl]="iFormControl"
-                       [formlyAttributes]="field">
-        </p-inputSwitch>
-        <small *ngIf="showError" class="p-error">
-            <formly-validation-message [field]="field"></formly-validation-message>
-        </small>
-    </div>
-
-    <ng-container *ngSwitchCase="'radio'">
-        <div *ngFor="let category of descriptor.radioOptions" [id]="$any(key)" class="p-field-radiobutton">
-            <p-radioButton [value]="category" [formControl]="iFormControl" [formlyAttributes]="field"></p-radioButton>
-            <label [for]="category" class="mng-radio-button-label">{{category}}</label>
-        </div>
-    </ng-container>
-
-    <textarea *ngSwitchCase="'textarea'"
-              [id]="$any(key)"
-              [formControl]="iFormControl"
-              [formlyAttributes]="field"
-              [rows]="descriptor.rows ?? 3"
-              pInputTextarea>
-    </textarea>
-
-    <p-calendar *ngSwitchCase="'datepicker'"
-                [formControl]="iFormControl"
-                [formlyAttributes]="field"
-                [dateFormat]="$any(descriptor.datePickerFormat)"
-                [minDate]="$any(descriptor.datePickerMin)"
-                [maxDate]="$any(descriptor.datePickerMax)"
-                [showTime]="descriptor.datePickerShowTime"
-                [showIcon]="true">
-    </p-calendar>
-
-    <input *ngSwitchDefault
-           pInputText
-           [id]="$any(key)"
-           [type]="to.type || 'text'"
-           [formControl]="iFormControl"
-           [formlyAttributes]="field"
-    />
-</ng-container>

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

@@ -1,22 +0,0 @@
-import {Component, ChangeDetectionStrategy, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
-
-import { FieldType } from '@ngx-formly/core';
-
-import {FieldInputDescriptor} from '../../../../../descriptors';
-
-@Component({
-    selector: 'mng-formly-field-input',
-    templateUrl: './formly-field-input.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MngFormlyFieldInputComponent extends FieldType implements OnInit {
-
-    public iFormControl!: FormControl;
-    public descriptor!: FieldInputDescriptor<any>;
-
-    ngOnInit(): void {
-        this.iFormControl = this.formControl as FormControl;
-        this.descriptor = this.to['descriptor'];
-    }
-}

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

@@ -1,13 +0,0 @@
-<mng-table [descriptor]="descriptor.tableDescriptor" [items]="items$">
-    <ng-template mngTemplate="caption">
-        <div class="flex flex-column md:flex-row md:justify-content-end table-header">
-            <label class="mng-datatable-form-label p-m-0" [for]="key">{{ to?.label! | translate }} <span *ngIf="to.required && to['hideRequiredMarker'] !== true">*</span></label>
-            <mng-action *ngFor="let action of toolbarActions" [action]="action"></mng-action>
-        </div>
-    </ng-template>
-    <ng-template mngTemplate="columnAction" let-item="rowItem" let-idx="rowIndex">
-        <mng-action *ngFor="let action of rowActions"
-                    [action]="action" [item]="item" [itemId]="descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined" [actionData]="{ itemIndex: idx }">
-        </mng-action>
-    </ng-template>
-</mng-table>

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

@@ -1,4 +0,0 @@
-.submit-button {
-    display: none !important;
-    visibility: hidden;
-}

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

@@ -1,114 +0,0 @@
-import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
-
-import {FieldType} from '@ngx-formly/core';
-import {Observable, of, ReplaySubject, Subject, Subscription} from 'rxjs';
-import {startWith} from 'rxjs/operators';
-
-import {FieldManyEditorDescriptor, ActionDescriptor, ActionEditorDescriptor, ActionLevelEnum} from '../../../../../descriptors';
-
-@Component({
-    selector: 'mng-formly-table-dialog-form-field',
-    templateUrl: './formly-field-table-dialog-form.component.html',
-    styleUrls: ['./formly-field-table-dialog-form.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class MngFormlyFieldTableDialogFormComponent<T, ET> extends FieldType implements OnInit, OnDestroy {
-
-    public descriptor!: FieldManyEditorDescriptor<T, ET>;
-
-    public itemsSubject: Subject<Array<T>> = new ReplaySubject(1);
-    public items$: Observable<Array<T>> = this.itemsSubject.asObservable();
-
-    public toolbarActions: Array<ActionDescriptor<T>> = [];
-    public rowActions: Array<ActionDescriptor<T>> = [];
-
-    private subscriptions: Subscription[] = [];
-
-    public ngOnInit() {
-
-        this.descriptor = this.to['descriptor'];
-        const hasAddAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Add);
-        const hasEditAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Edit);
-        const hasDeleteAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Delete);
-
-        if (hasAddAction) {
-            console.log(this.descriptor.tableviewDescriptor.addEditor);
-            const addAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.addEditor, 'add', this.descriptor.editor.model.type, this.descriptor.property)
-                .withTitle(null)
-                .withIcon('pi pi-plus')
-                .withClassName('mng-formly-field-table-form-dialog')
-                .withSubmitFunction(ctx => {
-                    if (!ctx.data?.item) {
-                        throw new Error(`No item was provided in context, edit cannot be done.`);
-                    }
-                    this.formState.submittedOn = Date.now();
-                    let value = this.formControl.value;
-                    value = [...value, ctx.data.item];
-                    this.formControl.patchValue(value);
-                    return of(ctx.data.item);
-                })
-                .withIsVisibleFunction(ctx => of(!this.options?.formState.disabled));
-            this.toolbarActions.push(addAction as ActionDescriptor<T>);
-        }
-        if (hasEditAction) {
-            const editAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.editEditor, 'edit', this.descriptor.editor.model.type, this.descriptor.property)
-                .withTitle(null)
-                .withIcon('pi pi-pencil')
-                .withClassName('mng-formly-field-table-form-dialog')
-                .withSubmitFunction(ctx => {
-                    if (!ctx.data?.item) {
-                        throw new Error(`No item was provided in context, edit cannot be done.`);
-                    }
-                    this.formState.submittedOn = Date.now();
-                    let formControlValue = this.formControl.value;
-                    formControlValue[ctx.data.actionData?.['itemIndex']] = ctx.data.item;
-                    this.formControl.patchValue(formControlValue);
-                    return of(ctx.data.item);
-                })
-                .withIsVisibleFunction(ctx => of(!this.options?.formState.disabled));
-            this.rowActions.push(editAction as ActionDescriptor<T>);
-        }
-        if (hasDeleteAction) {
-            const deleteAction = new ActionDescriptor(this.descriptor.tableviewDescriptor.model, 'delete', this.descriptor.editor.model.type, this.descriptor.property)
-                .withLevel(ActionLevelEnum.Danger)
-                .withTitle(null)
-                .withIcon('pi pi-trash')
-                .withRunFunction(ctx => {
-                    if (!ctx.data?.item) {
-                        throw new Error(`No item was provided in context, delete cannot be done.`);
-                    }
-                    let formControlValue = this.formControl.value;
-                    const compareProperty = this.descriptor.tableDescriptor.dataKeyProperty ? this.descriptor.tableDescriptor.dataKeyProperty : this.descriptor.tableDescriptor.model.idPropertyName;
-                    if (!compareProperty) {
-                        throw new Error('Cannot compare items, please provide main table data key property or model id property.');
-                    }
-                    const ctxItem: any = ctx.data.item;
-                    if (!ctxItem?.[compareProperty]) {
-                        return formControlValue;
-                    }
-                    formControlValue = formControlValue.filter((i: any) => i[compareProperty] !== ctxItem[compareProperty]);
-                    this.formControl.patchValue(formControlValue);
-                    return of(ctx.data.item);
-                })
-                .withIsVisibleFunction(ctx => of(!this.options?.formState.disabled));
-            this.rowActions.push(deleteAction);
-        }
-
-        // 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());
-    }
-}

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

@@ -1,37 +0,0 @@
-<mng-table [descriptor]="descriptor.mainTableDescriptor" [items]="itemsAsync">
-    <ng-template mngTemplate="caption">
-        <div class="flex flex-column md:flex-row md:justify-content-end table-header">
-            <label class="mng-datatable-form-label p-m-0" [for]="key">{{ to?.label! | translate }} <span *ngIf="to.required && to['hideRequiredMarker'] !== true">*</span></label>
-            <button *ngIf="hasAddAction && !formControl.disabled" pButton pRipple type="button" icon="pi pi-plus" class="p-button-rounded p-button-success"
-                    (click)="openAddDialog()">
-            </button>
-        </div>
-    </ng-template>
-    <ng-template mngTemplate="columnAction" let-item="rowItem">
-        <button *ngIf="hasDeleteAction && !formControl.disabled" pButton pRipple type="button" icon="pi pi-trash" class="p-button-rounded p-button-danger"
-                (click)="removeItem(item)">
-        </button>
-    </ng-template>
-</mng-table>
-
-<p-dialog *ngIf="hasAddAction" [(visible)]="isDialogVisible"
-          [draggable]="false"
-          [header]="'general.addItem' | translate: {item: to?.label!}"
-          [modal]="true"
-          appendTo="body"
-          styleClass="p-fluid mng-formly-field-table-multiselect-dialog">
-    <ng-template pTemplate="content">
-        <mng-table [descriptor]="descriptor.mainTableDescriptor"
-                   [queryResult]="addItemsAsync"
-                   [selectionEnabled]="true"
-                   [loading]="dialogIsLoading$"
-                   (onSelectionChange)="onSelectionChange($event)">
-        </mng-table>
-        <p-messages [value]="dialogMessages"></p-messages>
-    </ng-template>
-
-    <ng-template pTemplate="footer">
-        <button pButton pRipple type="button" [label]="'general.cancel' | translate" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"></button>
-        <button pButton pRipple type="button" [label]="'general.add' | translate" icon="pi pi-check" class="p-button-text" (click)="addItems()" [loading]="(dialogIsLoading$ | async) ?? false" [disabled]="form.disabled"></button>
-    </ng-template>
-</p-dialog>

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

@@ -1,133 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-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/src/lib/components/form/formly/wrappers/formly-field-wrapper/formly-field-wrapper.component.html

@@ -1,7 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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/src/lib/components/form/models/form-editor.event.ts

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

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

@@ -1,5 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-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/main-layout.component.html

@@ -1,26 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-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

@@ -1,41 +0,0 @@
-<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>