ng-mat-multilevel-menu 7.0.2 → 7.1.0

package/README.md

@@ -0,0 +1,9 @@
+# ng-mat-multilevel-menu
+Material Multi-Level Menu for Angular projects, compatible with Angular version up to 19-20.
+
+This project is a fork of the original ng-material-multilevel-menu, that you can find [here](https://www.npmjs.com/package/ng-material-multilevel-menu) for detailed documentation.
+The fork was necessary for lack of support for Angular 19/20 of the original project.
+
+## Installation
+```npm install --save ng-mat-multilevel-menu```
+

package/fesm2022/ng-mat-multilevel-menu.mjs

@@ -1,19 +1,63 @@
-import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, EventEmitter, Output, NgModule, ContentChild } from '@angular/core';
+import { NgModule, Injectable, EventEmitter, ContentChild, Output, Input, Component } from '@angular/core';
 import * as i1 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
-import { trigger, state, style, transition, group, animate } from '@angular/animations';
-import { Subject } from 'rxjs';
-import * as i4 from '@angular/cdk/bidi';
-import * as i5 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
-import * as i6 from '@angular/material/divider';
-import * as i7 from '@angular/material/core';
+import { RouterModule, NavigationEnd } from '@angular/router';
 import { MatRippleModule } from '@angular/material/core';
-import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { Subject } from 'rxjs';
+import { trigger, state, transition, style, group, animate } from '@angular/animations';
+
+class MaterialsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MaterialsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: MaterialsModule, imports: [MatIconModule,
+            MatListModule,
+            MatRippleModule], exports: [MatIconModule,
+            MatListModule,
+            MatRippleModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MaterialsModule, imports: [MatIconModule,
+            MatListModule,
+            MatRippleModule, MatIconModule,
+            MatListModule,
+            MatRippleModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MaterialsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatIconModule,
+                        MatListModule,
+                        MatRippleModule,
+                    ],
+                    declarations: [],
+                    exports: [
+                        MatIconModule,
+                        MatListModule,
+                        MatRippleModule,
+                    ]
+                }]
+        }] });
+
+class NgMaterialMultilevelMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgMaterialMultilevelMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: NgMaterialMultilevelMenuModule, imports: [CommonModule,
+            MaterialsModule,
+            RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgMaterialMultilevelMenuModule, imports: [CommonModule,
+            MaterialsModule,
+            RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgMaterialMultilevelMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MaterialsModule,
+                        RouterModule,
+                    ]
+                }]
+        }] });
 
 var ExpandCollapseStatusEnum;
 (function (ExpandCollapseStatusEnum) {
@@ -41,36 +85,6 @@ const CONSTANT = {
     NO: 'no'
 };
 
-const SlideInOut = trigger('SlideInOut', [
-    state('in', style({ height: '*', opacity: 0 })),
-    transition(':leave', [
-        style({ height: '*', opacity: 0.2 }),
-        group([
-            animate(200, style({ height: 0 })),
-            animate('200ms ease-out', style({ opacity: 0 }))
-        ])
-    ]),
-    transition(':enter', [
-        style({ height: '0', opacity: 0 }),
-        group([
-            animate(200, style({ height: '*' })),
-            animate('400ms ease-out', style({ opacity: 1 }))
-        ])
-    ])
-]);
-const ExpandedLTR = trigger('ExpandedLTR', [
-    state('no', style({ transform: 'rotate(-90deg)' })),
-    state('yes', style({ transform: 'rotate(0deg)', })),
-    transition('no => yes', animate(200)),
-    transition('yes => no', animate(200))
-]);
-const ExpandedRTL = trigger('ExpandedRTL', [
-    state('no', style({ transform: 'rotate(90deg)' })),
-    state('yes', style({ transform: 'rotate(0deg)', })),
-    transition('no => yes', animate(200)),
-    transition('yes => no', animate(200))
-]);
-
 class CommonUtils {
     static { this.isNullOrUndefinedOrEmpty = function (object) {
         return CommonUtils.isNullOrUndefined(object) || object === '';
@@ -158,267 +172,16 @@ class MultilevelMenuService {
         this.selectedMenuID.next(menuID);
         return this.foundLinkObject;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultilevelMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultilevelMenuService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultilevelMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultilevelMenuService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultilevelMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultilevelMenuService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
-class ListItemContentComponent {
-    constructor() {
-        this.nodeConfiguration = null;
-        // NOOP
-    }
-    ngOnInit() {
-        // NOOP
-    }
-    getListIcon(node) {
-        if (!CommonUtils.isNullOrUndefinedOrEmpty(node.icon)) {
-            return `icon`;
-        }
-        else if (!CommonUtils.isNullOrUndefinedOrEmpty(node.faIcon)) {
-            return `faIcon`;
-        }
-        else if (!CommonUtils.isNullOrUndefinedOrEmpty(node.imageIcon)) {
-            return `imageIcon`;
-        }
-        else if (!CommonUtils.isNullOrUndefinedOrEmpty(node.svgIcon)) {
-            return `svgIcon`;
-        }
-        else {
-            return ``;
-        }
-    }
-    getHrefTargetType() {
-        return this.node.hrefTargetType ? this.node.hrefTargetType : CONSTANT.DEFAULT_HREF_TARGET_TYPE;
-    }
-    getSelectedSvgIcon() {
-        return this.node.isSelected && this.node.activeSvgIcon ? this.node.activeSvgIcon : this.node.svgIcon;
-    }
-    getSelectedIcon() {
-        return this.node.isSelected && this.node.activeIcon ? this.node.activeIcon : this.node.icon;
-    }
-    getSelectedFaIcon() {
-        return this.node.isSelected && this.node.activeFaIcon ? this.node.activeFaIcon : this.node.faIcon;
-    }
-    getSelectedImageIcon() {
-        return this.node.isSelected && this.node.activeImageIcon ? this.node.activeImageIcon : this.node.imageIcon;
-    }
-    nodeExpandStatus() {
-        return this.node.expanded ? CONSTANT.YES : CONSTANT.NO;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListItemContentComponent, selector: "ng-list-item-content", inputs: { node: "node", isRtlLayout: "isRtlLayout", listContentStyle: "listContentStyle", nodeConfiguration: "nodeConfiguration" }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"node.externalRedirect ? redirectLinkTemplate : routerLinkTemplate\"></ng-container>\r\n\r\n<ng-template #redirectLinkTemplate>\r\n  <a class=\"anml-link\" [href]=\"node.link\" [target]=\"getHrefTargetType()\" [ngStyle]=\"listContentStyle\">\r\n    <ng-container *ngTemplateOutlet=\"isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n\r\n<ng-template #routerLinkTemplate>\r\n  <ng-container *ngIf=\"node.link && nodeConfiguration.interfaceWithRoute; else defaultContentContainer\">\r\n    <a class=\"anml-link\" [routerLink]=\"node.link\" [ngStyle]=\"listContentStyle\">\r\n      <ng-container *ngTemplateOutlet=\"isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet\"></ng-container>\r\n    </a>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultContentContainer>\r\n  <a class=\"anml-link\" [ngStyle]=\"listContentStyle\">\r\n    <ng-container *ngTemplateOutlet=\"isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n\r\n<ng-template #linkLabelLtrOutlet>\r\n  <div class=\"anml-data\" [dir]=\"'ltr'\">\r\n    <ng-container *ngTemplateOutlet=\"iconContainer\"></ng-container>\r\n    <span class=\"label\">{{node.label}}</span>\r\n  </div>\r\n  <div class=\"amml-icon-arrow-container\" *ngIf='node.hasChildren'>\r\n    <mat-icon [@ExpandedLTR]=\"nodeExpandStatus()\">\r\n      keyboard_arrow_down\r\n    </mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #linkLabelRtlOutlet>\r\n  <div class=\"anml-data\" [dir]=\"'rtl'\">\r\n    <ng-container *ngTemplateOutlet=\"iconContainer\"></ng-container>\r\n    <span class=\"label\">{{node.label}}</span>\r\n  </div>\r\n  <div class=\"amml-icon-arrow-container\" *ngIf='node.hasChildren'>\r\n    <mat-icon [@ExpandedRTL]=\"nodeExpandStatus()\">\r\n      keyboard_arrow_down\r\n    </mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #iconContainer>\r\n  <div class=\"icon-container\" [ngSwitch]=\"getListIcon(node)\">\r\n      <span *ngSwitchCase=\"'faIcon'\" class=\"amml-icon amml-icon-fa\">\r\n        <i [ngClass]=\"getSelectedFaIcon()\"></i>\r\n      </span>\r\n    <mat-icon *ngSwitchCase=\"'icon'\" class=\"amml-icon\">\r\n      {{getSelectedIcon()}}\r\n    </mat-icon>\r\n    <mat-icon *ngSwitchCase=\"'svgIcon'\" class=\"amml-icon amml-svg-icon\"\r\n              svgIcon=\"{{getSelectedSvgIcon()}}\">\r\n    </mat-icon>\r\n    <img *ngSwitchCase=\"'imageIcon'\" class=\"amml-icon amml-img-icon\"\r\n         src=\"{{getSelectedImageIcon()}}\" alt=\"{{node.label}}\"/>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".amml-item{position:relative;cursor:pointer}.anml-link{width:100%;display:flex;justify-content:flex-start;text-transform:capitalize;text-decoration:none}.anml-data{width:100%;height:48px;display:flex;justify-content:flex-start}.icon-container{display:flex;flex-direction:column;justify-content:center}.amml-icon-fa{font-size:20px}.label{line-height:48px;font-weight:400}.amml-svg-icon{width:22px;height:22px;margin-top:-12px}.amml-img-icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;object-fit:cover}.amml-icon-arrow-container{direction:ltr;display:flex;align-items:center}div[dir=ltr] .amml-icon{margin-right:16px}div[dir=rtl] .amml-icon{margin-left:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [ExpandedLTR, ExpandedRTL] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-list-item-content', animations: [ExpandedLTR, ExpandedRTL], template: "<ng-container *ngTemplateOutlet=\"node.externalRedirect ? redirectLinkTemplate : routerLinkTemplate\"></ng-container>\r\n\r\n<ng-template #redirectLinkTemplate>\r\n  <a class=\"anml-link\" [href]=\"node.link\" [target]=\"getHrefTargetType()\" [ngStyle]=\"listContentStyle\">\r\n    <ng-container *ngTemplateOutlet=\"isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n\r\n<ng-template #routerLinkTemplate>\r\n  <ng-container *ngIf=\"node.link && nodeConfiguration.interfaceWithRoute; else defaultContentContainer\">\r\n    <a class=\"anml-link\" [routerLink]=\"node.link\" [ngStyle]=\"listContentStyle\">\r\n      <ng-container *ngTemplateOutlet=\"isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet\"></ng-container>\r\n    </a>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultContentContainer>\r\n  <a class=\"anml-link\" [ngStyle]=\"listContentStyle\">\r\n    <ng-container *ngTemplateOutlet=\"isRtlLayout ? linkLabelRtlOutlet : linkLabelLtrOutlet\"></ng-container>\r\n  </a>\r\n</ng-template>\r\n\r\n<ng-template #linkLabelLtrOutlet>\r\n  <div class=\"anml-data\" [dir]=\"'ltr'\">\r\n    <ng-container *ngTemplateOutlet=\"iconContainer\"></ng-container>\r\n    <span class=\"label\">{{node.label}}</span>\r\n  </div>\r\n  <div class=\"amml-icon-arrow-container\" *ngIf='node.hasChildren'>\r\n    <mat-icon [@ExpandedLTR]=\"nodeExpandStatus()\">\r\n      keyboard_arrow_down\r\n    </mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #linkLabelRtlOutlet>\r\n  <div class=\"anml-data\" [dir]=\"'rtl'\">\r\n    <ng-container *ngTemplateOutlet=\"iconContainer\"></ng-container>\r\n    <span class=\"label\">{{node.label}}</span>\r\n  </div>\r\n  <div class=\"amml-icon-arrow-container\" *ngIf='node.hasChildren'>\r\n    <mat-icon [@ExpandedRTL]=\"nodeExpandStatus()\">\r\n      keyboard_arrow_down\r\n    </mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #iconContainer>\r\n  <div class=\"icon-container\" [ngSwitch]=\"getListIcon(node)\">\r\n      <span *ngSwitchCase=\"'faIcon'\" class=\"amml-icon amml-icon-fa\">\r\n        <i [ngClass]=\"getSelectedFaIcon()\"></i>\r\n      </span>\r\n    <mat-icon *ngSwitchCase=\"'icon'\" class=\"amml-icon\">\r\n      {{getSelectedIcon()}}\r\n    </mat-icon>\r\n    <mat-icon *ngSwitchCase=\"'svgIcon'\" class=\"amml-icon amml-svg-icon\"\r\n              svgIcon=\"{{getSelectedSvgIcon()}}\">\r\n    </mat-icon>\r\n    <img *ngSwitchCase=\"'imageIcon'\" class=\"amml-icon amml-img-icon\"\r\n         src=\"{{getSelectedImageIcon()}}\" alt=\"{{node.label}}\"/>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".amml-item{position:relative;cursor:pointer}.anml-link{width:100%;display:flex;justify-content:flex-start;text-transform:capitalize;text-decoration:none}.anml-data{width:100%;height:48px;display:flex;justify-content:flex-start}.icon-container{display:flex;flex-direction:column;justify-content:center}.amml-icon-fa{font-size:20px}.label{line-height:48px;font-weight:400}.amml-svg-icon{width:22px;height:22px;margin-top:-12px}.amml-img-icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;object-fit:cover}.amml-icon-arrow-container{direction:ltr;display:flex;align-items:center}div[dir=ltr] .amml-icon{margin-right:16px}div[dir=rtl] .amml-icon{margin-left:16px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { node: [{
-                type: Input
-            }], isRtlLayout: [{
-                type: Input
-            }], listContentStyle: [{
-                type: Input
-            }], nodeConfiguration: [{
-                type: Input
-            }] } });
-
-class ListItemComponent {
-    constructor(router, multilevelMenuService) {
-        this.router = router;
-        this.multilevelMenuService = multilevelMenuService;
-        this.level = 1;
-        this.submenuLevel = 0;
-        this.nodeConfiguration = null;
-        this.nodeExpandCollapseStatus = null;
-        this.listTemplate = null;
-        this.selectedItem = new EventEmitter();
-        this.isSelected = false;
-        this.expanded = false;
-        this.firstInitializer = false;
-        this.selectedListClasses = {
-            [CONSTANT.DEFAULT_LIST_CLASS_NAME]: true,
-            [CONSTANT.SELECTED_LIST_CLASS_NAME]: false,
-            [CONSTANT.ACTIVE_ITEM_CLASS_NAME]: false,
-        };
-    }
-    ngOnChanges() {
-        this.nodeChildren = this.node && this.node.items ? this.node.items.filter(n => !n.hidden) : [];
-        this.node.hasChildren = this.hasItems();
-        if (!CommonUtils.isNullOrUndefined(this.selectedNode)) {
-            this.setSelectedClass(this.multilevelMenuService.recursiveCheckId(this.node, this.selectedNode.id));
-        }
-        this.setExpandCollapseStatus();
-    }
-    ngOnInit() {
-        this.selectedListClasses[CONSTANT.DISABLED_ITEM_CLASS_NAME] = this.node.disabled;
-        if (!CommonUtils.isNullOrUndefined(this.node.faIcon) &&
-            this.node.faIcon.match(/\bfa\w(?!-)/) === null) {
-            this.node.faIcon = `fas ${this.node.faIcon}`;
-        }
-        this.selectedListClasses[`level-${this.level}-submenulevel-${this.submenuLevel}`] = true;
-        if (typeof this.node.expanded === 'boolean') {
-            this.expanded = this.node.expanded;
-        }
-        this.setClasses();
-    }
-    setSelectedClass(isFound) {
-        if (isFound) {
-            if (!this.firstInitializer) {
-                this.expanded = true;
-            }
-            this.isSelected = this.nodeConfiguration.highlightOnSelect || this.selectedNode.items === undefined;
-        }
-        else {
-            this.isSelected = false;
-            if (this.nodeConfiguration.collapseOnSelect) {
-                this.node.expanded = false;
-                this.expanded = false;
-            }
-        }
-        this.selectedListClasses = {
-            [CONSTANT.DEFAULT_LIST_CLASS_NAME]: true,
-            [CONSTANT.SELECTED_LIST_CLASS_NAME]: this.isSelected,
-            [CONSTANT.ACTIVE_ITEM_CLASS_NAME]: this.selectedNode.id === this.node.id,
-            [CONSTANT.DISABLED_ITEM_CLASS_NAME]: this.node.disabled,
-            [`level-${this.level}-submenulevel-${this.submenuLevel}`]: true,
-        };
-        this.node.isSelected = this.isSelected;
-        this.setClasses();
-    }
-    getPaddingAtStart() {
-        return this.nodeConfiguration.paddingAtStart;
-    }
-    getListStyle() {
-        const styles = {
-            background: CONSTANT.DEFAULT_LIST_BACKGROUND_COLOR,
-            color: CONSTANT.DEFAULT_LIST_FONT_COLOR
-        };
-        if (this.nodeConfiguration.listBackgroundColor !== null) {
-            styles.background = this.nodeConfiguration.listBackgroundColor;
-        }
-        if (this.isSelected) {
-            this.nodeConfiguration.selectedListFontColor !== null ?
-                styles.color = this.nodeConfiguration.selectedListFontColor : styles.color = CONSTANT.DEFAULT_SELECTED_FONT_COLOR;
-        }
-        else if (this.nodeConfiguration.fontColor !== null) {
-            styles.color = this.nodeConfiguration.fontColor;
-        }
-        return styles;
-    }
-    hasItems() {
-        return this.nodeChildren.length > 0;
-    }
-    isRtlLayout() {
-        return this.nodeConfiguration.rtlLayout;
-    }
-    setClasses() {
-        this.classes = {
-            [`level-${this.level + 1}`]: true,
-            [CONSTANT.SUBMENU_ITEM_CLASS_NAME]: this.hasItems() && this.getPaddingAtStart(),
-            [CONSTANT.HAS_SUBMENU_ITEM_CLASS_NAME]: this.hasItems()
-        };
-    }
-    setExpandCollapseStatus() {
-        if (!CommonUtils.isNullOrUndefined(this.nodeExpandCollapseStatus)) {
-            if (this.nodeExpandCollapseStatus === ExpandCollapseStatusEnum.expand) {
-                this.expanded = true;
-                if (this.nodeConfiguration.customTemplate) {
-                    this.node.expanded = true;
-                }
-            }
-            if (this.nodeExpandCollapseStatus === ExpandCollapseStatusEnum.collapse) {
-                this.expanded = false;
-                if (this.nodeConfiguration.customTemplate) {
-                    this.node.expanded = false;
-                }
-            }
-        }
-    }
-    expand(node) {
-        if (node.disabled) {
-            return;
-        }
-        this.nodeExpandCollapseStatus = ExpandCollapseStatusEnum.neutral;
-        this.expanded = !this.expanded;
-        this.node.expanded = this.expanded;
-        this.firstInitializer = true;
-        this.setClasses();
-        if (this.nodeConfiguration.interfaceWithRoute !== null
-            && this.nodeConfiguration.interfaceWithRoute
-            && node.link !== undefined
-            && node.link) {
-            this.router.navigate([node.link], node.navigationExtras).then();
-        }
-        else if (node.onSelected && typeof node.onSelected === 'function') {
-            node.onSelected(node);
-            this.selectedListItem(node);
-        }
-        else if (node.items === undefined || this.nodeConfiguration.collapseOnSelect) {
-            this.selectedListItem(node);
-        }
-    }
-    selectedListItem(node) {
-        this.selectedItem.emit(node);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemComponent, deps: [{ token: i1.Router }, { token: MultilevelMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListItemComponent, selector: "ng-list-item", inputs: { node: "node", level: "level", submenuLevel: "submenuLevel", selectedNode: "selectedNode", nodeConfiguration: "nodeConfiguration", nodeExpandCollapseStatus: "nodeExpandCollapseStatus", listTemplate: "listTemplate" }, outputs: { selectedItem: "selectedItem" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"amml-menu-container\">\r\n  <!-- Base Template rendering condition starts -->\r\n  <div *ngIf=\"nodeConfiguration.customTemplate && !node.hidden;else baseTemplate\"\r\n       [ngClass]=\"selectedListClasses\"\r\n       (click)=\"expand(node)\">\r\n    <ng-container [ngTemplateOutlet]=\"listTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item: node, configuration: nodeConfiguration}\">\r\n    </ng-container>\r\n  </div>\r\n  <!-- Base Template rendering condition ends -->\r\n\r\n  <!-- Recursive Template calls begins -->\r\n  <div *ngIf=\"hasItems() && expanded\" [@SlideInOut] [dir]=\"isRtlLayout() ? 'rtl' : 'ltr'\" [ngClass]=\"classes\">\r\n    <ng-list-item *ngFor=\"let singleNode of nodeChildren | keyvalue : multilevelMenuService.kvDummyComparerFn\"\r\n                  [nodeConfiguration]='nodeConfiguration'\r\n                  [node]=\"singleNode.value\"\r\n                  [level]=\"level + 1\"\r\n                  [submenuLevel]=\"singleNode.key\"\r\n                  [selectedNode]='selectedNode'\r\n                  [nodeExpandCollapseStatus]='nodeExpandCollapseStatus'\r\n                  (selectedItem)=\"selectedListItem($event)\"\r\n                  [listTemplate]=\"listTemplate\">\r\n    </ng-list-item>\r\n  </div>\r\n</div>\r\n<!-- Recursive Template calls ends -->\r\n\r\n<!-- Base Template starts from here -->\r\n<ng-template #baseTemplate>\r\n  <mat-list-item matRipple\r\n                 *ngIf=\"!node.hidden\"\r\n                 title=\"{{node.label}}\"\r\n                 [matRippleDisabled]=\"node.disabled\"\r\n                 [ngClass]=\"selectedListClasses\"\r\n                 (click)=\"expand(node)\">\r\n    <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\r\n  </mat-list-item>\r\n  <mat-divider *ngIf=\"nodeConfiguration.useDividers\"></mat-divider>\r\n</ng-template>\r\n\r\n<ng-template #linkTemplate>\r\n  <ng-list-item-content class=\"filled\" [node]=\"node\" [nodeConfiguration]=\"nodeConfiguration\" [isRtlLayout]=\"isRtlLayout()\" [listContentStyle]=\"getListStyle()\"></ng-list-item-content>\r\n</ng-template>\r\n", styles: [".filled{width:100%}div[dir=rtl].amml-submenu{margin-right:16px}div[dir=ltr].amml-submenu{margin-left:16px}.disabled-amml-item{opacity:.5;text-decoration:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: ListItemComponent, selector: "ng-list-item", inputs: ["node", "level", "submenuLevel", "selectedNode", "nodeConfiguration", "nodeExpandCollapseStatus", "listTemplate"], outputs: ["selectedItem"] }, { kind: "component", type: ListItemContentComponent, selector: "ng-list-item-content", inputs: ["node", "isRtlLayout", "listContentStyle", "nodeConfiguration"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }], animations: [SlideInOut] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-list-item', animations: [SlideInOut], template: "<div class=\"amml-menu-container\">\r\n  <!-- Base Template rendering condition starts -->\r\n  <div *ngIf=\"nodeConfiguration.customTemplate && !node.hidden;else baseTemplate\"\r\n       [ngClass]=\"selectedListClasses\"\r\n       (click)=\"expand(node)\">\r\n    <ng-container [ngTemplateOutlet]=\"listTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item: node, configuration: nodeConfiguration}\">\r\n    </ng-container>\r\n  </div>\r\n  <!-- Base Template rendering condition ends -->\r\n\r\n  <!-- Recursive Template calls begins -->\r\n  <div *ngIf=\"hasItems() && expanded\" [@SlideInOut] [dir]=\"isRtlLayout() ? 'rtl' : 'ltr'\" [ngClass]=\"classes\">\r\n    <ng-list-item *ngFor=\"let singleNode of nodeChildren | keyvalue : multilevelMenuService.kvDummyComparerFn\"\r\n                  [nodeConfiguration]='nodeConfiguration'\r\n                  [node]=\"singleNode.value\"\r\n                  [level]=\"level + 1\"\r\n                  [submenuLevel]=\"singleNode.key\"\r\n                  [selectedNode]='selectedNode'\r\n                  [nodeExpandCollapseStatus]='nodeExpandCollapseStatus'\r\n                  (selectedItem)=\"selectedListItem($event)\"\r\n                  [listTemplate]=\"listTemplate\">\r\n    </ng-list-item>\r\n  </div>\r\n</div>\r\n<!-- Recursive Template calls ends -->\r\n\r\n<!-- Base Template starts from here -->\r\n<ng-template #baseTemplate>\r\n  <mat-list-item matRipple\r\n                 *ngIf=\"!node.hidden\"\r\n                 title=\"{{node.label}}\"\r\n                 [matRippleDisabled]=\"node.disabled\"\r\n                 [ngClass]=\"selectedListClasses\"\r\n                 (click)=\"expand(node)\">\r\n    <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\r\n  </mat-list-item>\r\n  <mat-divider *ngIf=\"nodeConfiguration.useDividers\"></mat-divider>\r\n</ng-template>\r\n\r\n<ng-template #linkTemplate>\r\n  <ng-list-item-content class=\"filled\" [node]=\"node\" [nodeConfiguration]=\"nodeConfiguration\" [isRtlLayout]=\"isRtlLayout()\" [listContentStyle]=\"getListStyle()\"></ng-list-item-content>\r\n</ng-template>\r\n", styles: [".filled{width:100%}div[dir=rtl].amml-submenu{margin-right:16px}div[dir=ltr].amml-submenu{margin-left:16px}.disabled-amml-item{opacity:.5;text-decoration:none;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: MultilevelMenuService }], propDecorators: { node: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], submenuLevel: [{
-                type: Input
-            }], selectedNode: [{
-                type: Input
-            }], nodeConfiguration: [{
-                type: Input
-            }], nodeExpandCollapseStatus: [{
-                type: Input
-            }], listTemplate: [{
-                type: Input
-            }], selectedItem: [{
-                type: Output
-            }] } });
-
-class MaterialsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: MaterialsModule, imports: [MatIconModule,
-            MatListModule,
-            MatRippleModule], exports: [MatIconModule,
-            MatListModule,
-            MatRippleModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialsModule, imports: [MatIconModule,
-            MatListModule,
-            MatRippleModule, MatIconModule,
-            MatListModule,
-            MatRippleModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatIconModule,
-                        MatListModule,
-                        MatRippleModule,
-                    ],
-                    declarations: [],
-                    exports: [
-                        MatIconModule,
-                        MatListModule,
-                        MatRippleModule,
-                    ]
-                }]
-        }] });
-
 class NgMaterialMultilevelMenuComponent {
     constructor(router, multilevelMenuService) {
         this.router = router;
@@ -590,10 +353,10 @@ class NgMaterialMultilevelMenuComponent {
         this.expandCollapseStatusSubscription.unsubscribe();
         this.selectMenuByIDSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgMaterialMultilevelMenuComponent, deps: [{ token: i1.Router }, { token: MultilevelMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NgMaterialMultilevelMenuComponent, selector: "ng-material-multilevel-menu", inputs: { items: "items", configuration: "configuration" }, outputs: { selectedItem: "selectedItem", selectedLabel: "selectedLabel", menuIsReady: "menuIsReady" }, queries: [{ propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"getClassName()\" [ngStyle]=\"getGlobalStyle()\" *ngIf='!isInvalidData && items.length !== 0' [dir]=\"isRtlLayout() ? 'rtl' : 'ltr'\">\r\n  <mat-list>\r\n    <ng-list-item\r\n      *ngFor=\"let node of items | keyvalue: multilevelMenuService.kvDummyComparerFn\"\r\n      [nodeConfiguration]='nodeConfig'\r\n      [node]='node.value'\r\n      [level]=\"1\"\r\n      [submenuLevel]=\"node.key\"\r\n      [selectedNode]='currentNode'\r\n      [nodeExpandCollapseStatus]='nodeExpandCollapseStatus'\r\n      (selectedItem)=\"selectedListItem($event)\"\r\n      [listTemplate] = \"listTemplate\"\r\n    >\r\n    </ng-list-item>\r\n  </mat-list>\r\n</div>\r\n", styles: [".amml-container .mat-list-base{padding-top:unset}.amml-item{line-height:48px;display:flex;justify-content:space-between;position:relative}.anml-data{width:100%;text-transform:capitalize;display:flex;justify-content:flex-start}.amml-icon-fa{font-size:20px}.amml-icon{line-height:48px}.active{color:#1976d2}div[dir=ltr] .amml-icon{margin-right:15px}div[dir=ltr] .amml-submenu{margin-left:16px}div[dir=rtl] .amml-icon{margin-left:15px}div[dir=rtl] .amml-submenu{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: ListItemComponent, selector: "ng-list-item", inputs: ["node", "level", "submenuLevel", "selectedNode", "nodeConfiguration", "nodeExpandCollapseStatus", "listTemplate"], outputs: ["selectedItem"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgMaterialMultilevelMenuComponent, deps: [{ token: i1.Router }, { token: MultilevelMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: NgMaterialMultilevelMenuComponent, isStandalone: true, selector: "ng-material-multilevel-menu", inputs: { items: "items", configuration: "configuration" }, outputs: { selectedItem: "selectedItem", selectedLabel: "selectedLabel", menuIsReady: "menuIsReady" }, queries: [{ propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"getClassName()\" [ngStyle]=\"getGlobalStyle()\" *ngIf='!isInvalidData && items.length !== 0' [dir]=\"isRtlLayout() ? 'rtl' : 'ltr'\">\r\n  <mat-list>\r\n    <ng-list-item\r\n      *ngFor=\"let node of items | keyvalue: multilevelMenuService.kvDummyComparerFn\"\r\n      [nodeConfiguration]='nodeConfig'\r\n      [node]='node.value'\r\n      [level]=\"1\"\r\n      [submenuLevel]=\"node.key\"\r\n      [selectedNode]='currentNode'\r\n      [nodeExpandCollapseStatus]='nodeExpandCollapseStatus'\r\n      (selectedItem)=\"selectedListItem($event)\"\r\n      [listTemplate] = \"listTemplate\"\r\n    >\r\n    </ng-list-item>\r\n  </mat-list>\r\n</div>\r\n", styles: [".amml-container .mat-list-base{padding-top:unset}.amml-item{line-height:48px;display:flex;justify-content:space-between;position:relative}.anml-data{width:100%;text-transform:capitalize;display:flex;justify-content:flex-start}.amml-icon-fa{font-size:20px}.amml-icon{line-height:48px}.active{color:#1976d2}div[dir=ltr] .amml-icon{margin-right:15px}div[dir=ltr] .amml-submenu{margin-left:16px}div[dir=rtl] .amml-icon{margin-left:15px}div[dir=rtl] .amml-submenu{margin-right:16px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgMaterialMultilevelMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NgMaterialMultilevelMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-material-multilevel-menu', template: "<div [ngClass]=\"getClassName()\" [ngStyle]=\"getGlobalStyle()\" *ngIf='!isInvalidData && items.length !== 0' [dir]=\"isRtlLayout() ? 'rtl' : 'ltr'\">\r\n  <mat-list>\r\n    <ng-list-item\r\n      *ngFor=\"let node of items | keyvalue: multilevelMenuService.kvDummyComparerFn\"\r\n      [nodeConfiguration]='nodeConfig'\r\n      [node]='node.value'\r\n      [level]=\"1\"\r\n      [submenuLevel]=\"node.key\"\r\n      [selectedNode]='currentNode'\r\n      [nodeExpandCollapseStatus]='nodeExpandCollapseStatus'\r\n      (selectedItem)=\"selectedListItem($event)\"\r\n      [listTemplate] = \"listTemplate\"\r\n    >\r\n    </ng-list-item>\r\n  </mat-list>\r\n</div>\r\n", styles: [".amml-container .mat-list-base{padding-top:unset}.amml-item{line-height:48px;display:flex;justify-content:space-between;position:relative}.anml-data{width:100%;text-transform:capitalize;display:flex;justify-content:flex-start}.amml-icon-fa{font-size:20px}.amml-icon{line-height:48px}.active{color:#1976d2}div[dir=ltr] .amml-icon{margin-right:15px}div[dir=ltr] .amml-submenu{margin-left:16px}div[dir=rtl] .amml-icon{margin-left:15px}div[dir=rtl] .amml-submenu{margin-right:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: MultilevelMenuService }], propDecorators: { items: [{
@@ -611,33 +374,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['listTemplate', { static: true }]
             }] } });
 
-class NgMaterialMultilevelMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgMaterialMultilevelMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: NgMaterialMultilevelMenuModule, declarations: [NgMaterialMultilevelMenuComponent,
-            ListItemComponent,
-            ListItemContentComponent], imports: [CommonModule,
-            MaterialsModule,
-            RouterModule], exports: [NgMaterialMultilevelMenuComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgMaterialMultilevelMenuModule, imports: [CommonModule,
-            MaterialsModule,
-            RouterModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgMaterialMultilevelMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MaterialsModule,
-                        RouterModule,
-                    ],
-                    declarations: [
-                        NgMaterialMultilevelMenuComponent,
-                        ListItemComponent,
-                        ListItemContentComponent,
-                    ],
-                    exports: [NgMaterialMultilevelMenuComponent]
-                }]
-        }] });
+const SlideInOut = trigger('SlideInOut', [
+    state('in', style({ height: '*', opacity: 0 })),
+    transition(':leave', [
+        style({ height: '*', opacity: 0.2 }),
+        group([
+            animate(200, style({ height: 0 })),
+            animate('200ms ease-out', style({ opacity: 0 }))
+        ])
+    ]),
+    transition(':enter', [
+        style({ height: '0', opacity: 0 }),
+        group([
+            animate(200, style({ height: '*' })),
+            animate('400ms ease-out', style({ opacity: 1 }))
+        ])
+    ])
+]);
+const ExpandedLTR = trigger('ExpandedLTR', [
+    state('no', style({ transform: 'rotate(-90deg)' })),
+    state('yes', style({ transform: 'rotate(0deg)', })),
+    transition('no => yes', animate(200)),
+    transition('yes => no', animate(200))
+]);
+const ExpandedRTL = trigger('ExpandedRTL', [
+    state('no', style({ transform: 'rotate(90deg)' })),
+    state('yes', style({ transform: 'rotate(0deg)', })),
+    transition('no => yes', animate(200)),
+    transition('yes => no', animate(200))
+]);
 
 /*
  * Public API Surface of ng-material-multilevel-menu