@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/fesm2015/pepperi-addons-ngx-lib-menu.js

@@ -8,330 +8,330 @@ import { PepScreenSizeType, PepLayoutService, PepNgxLibModule } from '@pepperi-a
 import { pepIconSystemMenu, pepIconArrowRight, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
-class PepMenuItemParent {
-    constructor(data) {
-        this.parent = null;
-        this.key = data.key;
-        this.parent = data.parent;
-    }
-}
-class PepMenuItem {
-    constructor(data) {
-        this.disabled = false;
-        this.hidden = false;
-        this.iconName = null;
-        this.type = 'regular';
-        this.children = null;
-        this.parent = null;
-        Object.assign(this, data);
-    }
+class PepMenuItemParent {
+    constructor(data) {
+        this.parent = null;
+        this.key = data.key;
+        this.parent = data.parent;
+    }
+}
+class PepMenuItem {
+    constructor(data) {
+        this.disabled = false;
+        this.hidden = false;
+        this.iconName = null;
+        this.type = 'regular';
+        this.children = null;
+        this.parent = null;
+        Object.assign(this, data);
+    }
 }
 
-class PepMenuComponent {
-    constructor(layoutService) {
-        this.layoutService = layoutService;
-        this.text = null;
-        /**
-         * The icon name to show on the menu. look in (@link icon -> All icons)
-         *
-         * @type {PepIconType} See {@link PepIconType}
-         * @memberof PepMenuComponent
-         */
-        this.iconName = pepIconSystemMenu.name;
-        this.type = 'action';
-        this.styleType = 'weak';
-        this.sizeType = 'md';
-        this.classNames = '';
-        this.xPosition = 'after';
-        this.hideOnEmptyItems = false;
-        this._items = null;
-        this.selectedItem = null;
-        this.disabled = false;
-        this.stateChange = new EventEmitter();
-        this.menuItemClick = new EventEmitter();
-        this.menuClick = new EventEmitter();
-        this.state = 'hidden';
-        this.PepScreenSizeType = PepScreenSizeType;
-        this.displayText = null;
-        this.layoutService.onResize$.subscribe((size) => {
-            this.screenSize = size;
-        });
-    }
-    set items(items) {
-        this.setItemsParent(items);
-        this._items = items;
-    }
-    get items() {
-        return this._items;
-    }
-    setChildrenParent(item, parent) {
-        item.parent = parent;
-        if (item.children && item.children.length > 0) {
-            item.children.forEach((child) => {
-                this.setChildrenParent(child, new PepMenuItemParent(item));
-            });
-        }
-    }
-    setItemsParent(items) {
-        if (items) {
-            items.forEach((item) => {
-                item.parent = null;
-                if (item.children && item.children.length > 0) {
-                    item.children.forEach((child) => {
-                        this.setChildrenParent(child, new PepMenuItemParent(item));
-                    });
-                }
-            });
-        }
-    }
-    updateText() {
-        if (this.type === 'select' || this.type === 'action-select') {
-            this.displayText = this.selectedItem
-                ? this.selectedItem.text
-                : this.text;
-        }
-        else {
-            this.displayText = this.text;
-        }
-    }
-    ngOnChanges(changes) {
-        if (this.hideOnEmptyItems) {
-            this.state =
-                !this.disabled &&
-                    this.items &&
-                    this.items.filter((item) => !item.disabled).length > 0
-                    ? 'visible'
-                    : 'hidden';
-        }
-        else {
-            this.state = 'visible';
-        }
-        if (this.type === 'select') {
-            if (this.selectedItem === null &&
-                this.items &&
-                this.items.length > 0) {
-                this.selectedItem = this.items[0];
-            }
-        }
-        this.updateText();
-    }
-    ngOnDestroy() {
-        // if (this.menuItemClick) {
-        //     this.menuItemClick.unsubscribe();
-        // }
-    }
-    onMenuClicked(event) {
-        this.menuClick.emit();
-    }
-    // private manipulateData(menuItem: PepMenuItem) {
-    //     menuItem.children = null;
-    //     if (menuItem.parent) {
-    //         menuItem.parent = new PepMenuItem(menuItem.parent);
-    //         this.manipulateData(menuItem.parent);
-    //     }
-    // }
-    onMenuItemClicked(click) {
-        this.selectedItem = click.source;
-        this.updateText();
-        // Manipulate click data because the data is dupplicate in parent.children
-        // const tmp = new PepMenuItem(click.source);
-        // this.manipulateData(tmp);
-        // click.source = tmp;
-        this.menuItemClick.emit(click);
-    }
-    animationDone() {
-        if (this.state === 'hidden') {
-            setTimeout(() => {
-                this.stateChange.emit({ state: this.state });
-            }, 500);
-        }
-    }
-    animationStart() {
-        if (this.state === 'visible') {
-            this.stateChange.emit({ state: this.state });
-        }
-    }
-}
-PepMenuComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-menu',
-                template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n    <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n    </ng-container>\n    <ng-template #animationTemplate>\n        <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS  }\"\n            pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n            (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n            [matMenuTriggerFor]=\"menu.childMenu\">\n            <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n            </ng-container>\n        </button>\n        <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n            (menuItemClick)=\"onMenuItemClicked($event)\">\n        </pep-menu-item>\n    </ng-template>\n    <ng-template #regularTemplate>\n        <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n        <ng-template #menuTemplate>\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n                pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\"\n                [matMenuTriggerFor]=\"menu.childMenu\">\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n                </ng-container>\n            </button>\n            <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n                (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu-item>\n        </ng-template>\n        <ng-template #buttonTemplate>\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n                pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n                </ng-container>\n            </button>\n        </ng-template>\n    </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n    <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName }\" [title]=\"displayText\">\n        {{ displayText }}\n    </span>\n    <mat-icon *ngIf=\"iconName\">\n        <pep-icon name=\"{{ iconName }}\"></pep-icon>\n    </mat-icon>\n</ng-template>",
-                animations: [
-                    trigger('slideInOut', [
-                        state('hidden', style({
-                            width: '0px',
-                            padding: '0',
-                            margin: '0',
-                            minWidth: '0px',
-                            opacity: 0,
-                        })),
-                        state('visible', style({
-                            width: 'inherit',
-                            opacity: 1,
-                        })),
-                        transition('close => open', animate('500ms ease-in')),
-                        transition('open => close', animate('500ms ease-out')),
-                    ]),
-                ],
-                styles: [".menu-container .pep-button{display:flex;align-items:center;justify-content:center}"]
-            },] }
-];
-PepMenuComponent.ctorParameters = () => [
-    { type: PepLayoutService }
-];
-PepMenuComponent.propDecorators = {
-    text: [{ type: Input }],
-    iconName: [{ type: Input }],
-    type: [{ type: Input }],
-    styleType: [{ type: Input }],
-    sizeType: [{ type: Input }],
-    classNames: [{ type: Input }],
-    xPosition: [{ type: Input }],
-    hideOnEmptyItems: [{ type: Input }],
-    items: [{ type: Input }],
-    selectedItem: [{ type: Input }],
-    disabled: [{ type: Input }],
-    stateChange: [{ type: Output }],
-    menuItemClick: [{ type: Output }],
-    menuClick: [{ type: Output }]
+class PepMenuComponent {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this.text = null;
+        /**
+         * The icon name to show on the menu. look in (@link icon -> All icons)
+         *
+         * @type {PepIconType} See {@link PepIconType}
+         * @memberof PepMenuComponent
+         */
+        this.iconName = pepIconSystemMenu.name;
+        this.type = 'action';
+        this.styleType = 'weak';
+        this.sizeType = 'md';
+        this.classNames = '';
+        this.xPosition = 'after';
+        this.hideOnEmptyItems = false;
+        this._items = null;
+        this.selectedItem = null;
+        this.disabled = false;
+        this.stateChange = new EventEmitter();
+        this.menuItemClick = new EventEmitter();
+        this.menuClick = new EventEmitter();
+        this.state = 'hidden';
+        this.PepScreenSizeType = PepScreenSizeType;
+        this.displayText = null;
+        this.layoutService.onResize$.subscribe((size) => {
+            this.screenSize = size;
+        });
+    }
+    set items(items) {
+        this.setItemsParent(items);
+        this._items = items;
+    }
+    get items() {
+        return this._items;
+    }
+    setChildrenParent(item, parent) {
+        item.parent = parent;
+        if (item.children && item.children.length > 0) {
+            item.children.forEach((child) => {
+                this.setChildrenParent(child, new PepMenuItemParent(item));
+            });
+        }
+    }
+    setItemsParent(items) {
+        if (items) {
+            items.forEach((item) => {
+                item.parent = null;
+                if (item.children && item.children.length > 0) {
+                    item.children.forEach((child) => {
+                        this.setChildrenParent(child, new PepMenuItemParent(item));
+                    });
+                }
+            });
+        }
+    }
+    updateText() {
+        if (this.type === 'select' || this.type === 'action-select') {
+            this.displayText = this.selectedItem
+                ? this.selectedItem.text
+                : this.text;
+        }
+        else {
+            this.displayText = this.text;
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.hideOnEmptyItems) {
+            this.state =
+                !this.disabled &&
+                    this.items &&
+                    this.items.filter((item) => !item.disabled).length > 0
+                    ? 'visible'
+                    : 'hidden';
+        }
+        else {
+            this.state = 'visible';
+        }
+        if (this.type === 'select') {
+            if (this.selectedItem === null &&
+                this.items &&
+                this.items.length > 0) {
+                this.selectedItem = this.items[0];
+            }
+        }
+        this.updateText();
+    }
+    ngOnDestroy() {
+        // if (this.menuItemClick) {
+        //     this.menuItemClick.unsubscribe();
+        // }
+    }
+    onMenuClicked(event) {
+        this.menuClick.emit();
+    }
+    // private manipulateData(menuItem: PepMenuItem) {
+    //     menuItem.children = null;
+    //     if (menuItem.parent) {
+    //         menuItem.parent = new PepMenuItem(menuItem.parent);
+    //         this.manipulateData(menuItem.parent);
+    //     }
+    // }
+    onMenuItemClicked(click) {
+        this.selectedItem = click.source;
+        this.updateText();
+        // Manipulate click data because the data is dupplicate in parent.children
+        // const tmp = new PepMenuItem(click.source);
+        // this.manipulateData(tmp);
+        // click.source = tmp;
+        this.menuItemClick.emit(click);
+    }
+    animationDone() {
+        if (this.state === 'hidden') {
+            setTimeout(() => {
+                this.stateChange.emit({ state: this.state });
+            }, 500);
+        }
+    }
+    animationStart() {
+        if (this.state === 'visible') {
+            this.stateChange.emit({ state: this.state });
+        }
+    }
+}
+PepMenuComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-menu',
+                template: "<div class=\"menu-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n\n    <ng-container *ngIf=\"hideOnEmptyItems then animationTemplate else regularTemplate\">\n    </ng-container>\n    <ng-template #animationTemplate>\n        <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n            [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS  }\"\n            pepRtlDirection pepMenuBlur (click)=\"onMenuClicked($event)\" [@slideInOut]=\"state\"\n            (@slideInOut.done)=\"animationDone()\" (@slideInOut.start)=\"animationStart()\"\n            [matMenuTriggerFor]=\"menu.childMenu\">\n            <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n            </ng-container>\n        </button>\n        <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n            (menuItemClick)=\"onMenuItemClicked($event)\">\n        </pep-menu-item>\n    </ng-template>\n    <ng-template #regularTemplate>\n        <ng-container *ngIf=\"items then menuTemplate else buttonTemplate\"></ng-container>\n        <ng-template #menuTemplate>\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n                pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\"\n                [matMenuTriggerFor]=\"menu.childMenu\">\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n                </ng-container>\n            </button>\n            <pep-menu-item #menu [type]=\"type\" [items]=\"items\" [selectedItem]=\"selectedItem\" [xPosition]=\"xPosition\"\n                (menuItemClick)=\"onMenuItemClicked($event)\"></pep-menu-item>\n        </ng-template>\n        <ng-template #buttonTemplate>\n            <button mat-button class=\"pep-button {{ sizeType }} {{ styleType }} {{ classNames }}\"\n                [ngClass]=\"{ 'icon-button': !displayText || screenSize > PepScreenSizeType.SM, 'pep-button-limited-width': screenSize < PepScreenSizeType.XS, disabled: disabled }\"\n                pepRtlDirection pepMenuBlur (menuClick)=\"onMenuClicked($event)\" [disabled]=\"disabled\">\n                <ng-container *ngTemplateOutlet=\"triggerTemplate\">\n                </ng-container>\n            </button>\n        </ng-template>\n    </ng-template>\n</div>\n\n<ng-template #triggerTemplate>\n    <span *ngIf=\"displayText && screenSize <= PepScreenSizeType.SM\" class=\"ellipsis\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName }\" [title]=\"displayText\">\n        {{ displayText }}\n    </span>\n    <mat-icon *ngIf=\"iconName\">\n        <pep-icon name=\"{{ iconName }}\"></pep-icon>\n    </mat-icon>\n</ng-template>",
+                animations: [
+                    trigger('slideInOut', [
+                        state('hidden', style({
+                            width: '0px',
+                            padding: '0',
+                            margin: '0',
+                            minWidth: '0px',
+                            opacity: 0,
+                        })),
+                        state('visible', style({
+                            width: 'inherit',
+                            opacity: 1,
+                        })),
+                        transition('close => open', animate('500ms ease-in')),
+                        transition('open => close', animate('500ms ease-out')),
+                    ]),
+                ],
+                styles: [".menu-container .pep-button{display:flex;align-items:center;justify-content:center}"]
+            },] }
+];
+PepMenuComponent.ctorParameters = () => [
+    { type: PepLayoutService }
+];
+PepMenuComponent.propDecorators = {
+    text: [{ type: Input }],
+    iconName: [{ type: Input }],
+    type: [{ type: Input }],
+    styleType: [{ type: Input }],
+    sizeType: [{ type: Input }],
+    classNames: [{ type: Input }],
+    xPosition: [{ type: Input }],
+    hideOnEmptyItems: [{ type: Input }],
+    items: [{ type: Input }],
+    selectedItem: [{ type: Input }],
+    disabled: [{ type: Input }],
+    stateChange: [{ type: Output }],
+    menuItemClick: [{ type: Output }],
+    menuClick: [{ type: Output }]
 };
 
-class PepInternalMenuItem extends PepMenuItem {
-    constructor() {
-        super(...arguments);
-        this.selected = false;
-    }
-}
-class PepMenuItemComponent {
-    constructor() {
-        this.type = 'action';
-        this.parent = null;
-        this.items = [];
-        this._selectedItem = null;
-        this.xPosition = 'after';
-        this.subMenuIconName = pepIconArrowRight.name;
-        this.menuItemClick = new EventEmitter();
-    }
-    set selectedItem(selectedItem) {
-        this.updateSelectedItem(selectedItem);
-    }
-    get selectedItem() {
-        return this._selectedItem;
-    }
-    ngOnDestroy() {
-        // if (this.menuItemClick) {
-        //     this.menuItemClick.unsubscribe();
-        // }
-    }
-    clearSelectedItem(selectedItem) {
-        if (this.items) {
-            this.items.forEach((item) => {
-                item.selected = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) === item.key;
-                if (item.children) {
-                    item.children.forEach((child) => {
-                        this.clearSelectedChildren(child, selectedItem);
-                    });
-                }
-            });
-        }
-    }
-    clearSelectedChildren(item, selectedItem) {
-        item.selected = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) === item.key;
-        if (item.children) {
-            item.children.forEach((child) => {
-                this.clearSelectedChildren(child, selectedItem);
-            });
-        }
-    }
-    selectParentAndChildren(items, parentsKeys) {
-        if (parentsKeys.length > 0) {
-            const key = parentsKeys.pop();
-            const selectedParent = items.find((item) => item.key === key);
-            if (selectedParent) {
-                selectedParent.selected = true;
-                this.selectParentAndChildren(selectedParent.children, parentsKeys);
-            }
-        }
-    }
-    updateSelectedParent(parentItem, parentsKeys) {
-        parentsKeys.push(parentItem.key);
-        if (parentItem.parent) {
-            this.updateSelectedParent(parentItem.parent, parentsKeys);
-        }
-        else {
-            this.selectParentAndChildren(this.items, parentsKeys);
-        }
-    }
-    updateSelectedItem(selectedItem) {
-        this.clearSelectedItem(selectedItem);
-        this._selectedItem = selectedItem;
-        if (selectedItem && selectedItem.parent) {
-            this.updateSelectedParent(selectedItem.parent, []);
-        }
-    }
-    onChildClicked(click) {
-        // click.source.selected = true;
-        this.menuItemClick.emit(click);
-    }
-    onMenuItemClicked(item) {
-        // item.selected = true;
-        this.menuItemClick.emit({ source: item });
-    }
-}
-PepMenuItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-menu-item',
-                template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n    <ng-container *ngFor=\"let menuItem of items\">\n        <ng-container *ngIf=\"!menuItem.hidden\">\n            <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n            <ng-template #splitterBlock>\n                <div mat-menu-item class=\"splitter\"></div>\n            </ng-template>\n\n            <ng-template #buttonBlock>\n                <ng-container\n                    *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n                </ng-container>\n                <ng-template #childrenBlock>\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n                        title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n                        [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n                            itemIconName: menuItem.iconName,\n                            itemText: menuItem.text,\n                            itemType: menuItem.type,\n                            hasChildren: true\n                        }\"></ng-container>\n                    </button>\n                    <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n                        (menuItemClick)=\"onChildClicked($event)\">\n                    </pep-menu-item>\n                </ng-template>\n                <ng-template #regularBlock>\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n                        pepRtlDirection [disabled]=\"menuItem.disabled\"\n                        [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n                            itemIconName: menuItem.iconName,\n                            itemText: menuItem.text,\n                            itemType: menuItem.type,\n                            hasChildren: false\n                        }\"></ng-container>\n                    </button>\n                </ng-template>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n    let-hasChildren=\"hasChildren\">\n    <ng-container>\n        <mat-icon *ngIf=\"itemIconName\" class=\"pull-left flip\">\n            <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n        </mat-icon>\n        <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n            [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n            [title]=\"itemText\">\n            {{ itemText }}\n        </span>\n        <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n            [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n            <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n        </mat-icon>\n    </ng-container>\n</ng-template>",
-                styles: [".mat-menu-item-submenu-trigger:after{display:none}.mat-menu-item .title{margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}.mat-menu-item .title.spacing-from-icon{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}.mat-menu-item .title.spacing-from-submenu-trigger{-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-end:var(--pep-spacing-lg,1rem);padding-inline-end:var(--pep-spacing-lg,1rem)}.mat-menu-item .mat-icon{margin:0}.mat-menu-item .submenu-trigger{position:absolute;right:.5rem;right:var(--pep-spacing-sm,.5rem);width:1rem}.mat-menu-item .submenu-trigger.rotate{transform:rotate(180deg)}.mat-menu-item.splitter{height:1px!important;margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}.mat-menu-item[dir=rtl] .submenu-trigger{right:unset;left:.5rem;left:var(--pep-spacing-sm,.5rem);transform:rotate(180deg)}.mat-menu-item[dir=rtl] .submenu-trigger.rotate{transform:rotate(0deg)}.mat-menu-item-submenu-trigger:after{width:unset;height:unset;transform:unset}"]
-            },] }
-];
-PepMenuItemComponent.propDecorators = {
-    type: [{ type: Input }],
-    parent: [{ type: Input }],
-    items: [{ type: Input }],
-    selectedItem: [{ type: Input }],
-    xPosition: [{ type: Input }],
-    subMenuIconName: [{ type: Input }],
-    childMenu: [{ type: ViewChild, args: ['childMenu', { static: true },] }],
-    menuItemClick: [{ type: Output }]
+class PepInternalMenuItem extends PepMenuItem {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+    }
+}
+class PepMenuItemComponent {
+    constructor() {
+        this.type = 'action';
+        this.parent = null;
+        this.items = [];
+        this._selectedItem = null;
+        this.xPosition = 'after';
+        this.subMenuIconName = pepIconArrowRight.name;
+        this.menuItemClick = new EventEmitter();
+    }
+    set selectedItem(selectedItem) {
+        this.updateSelectedItem(selectedItem);
+    }
+    get selectedItem() {
+        return this._selectedItem;
+    }
+    ngOnDestroy() {
+        // if (this.menuItemClick) {
+        //     this.menuItemClick.unsubscribe();
+        // }
+    }
+    clearSelectedItem(selectedItem) {
+        if (this.items) {
+            this.items.forEach((item) => {
+                item.selected = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) === item.key;
+                if (item.children) {
+                    item.children.forEach((child) => {
+                        this.clearSelectedChildren(child, selectedItem);
+                    });
+                }
+            });
+        }
+    }
+    clearSelectedChildren(item, selectedItem) {
+        item.selected = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) === item.key;
+        if (item.children) {
+            item.children.forEach((child) => {
+                this.clearSelectedChildren(child, selectedItem);
+            });
+        }
+    }
+    selectParentAndChildren(items, parentsKeys) {
+        if (parentsKeys.length > 0) {
+            const key = parentsKeys.pop();
+            const selectedParent = items.find((item) => item.key === key);
+            if (selectedParent) {
+                selectedParent.selected = true;
+                this.selectParentAndChildren(selectedParent.children, parentsKeys);
+            }
+        }
+    }
+    updateSelectedParent(parentItem, parentsKeys) {
+        parentsKeys.push(parentItem.key);
+        if (parentItem.parent) {
+            this.updateSelectedParent(parentItem.parent, parentsKeys);
+        }
+        else {
+            this.selectParentAndChildren(this.items, parentsKeys);
+        }
+    }
+    updateSelectedItem(selectedItem) {
+        this.clearSelectedItem(selectedItem);
+        this._selectedItem = selectedItem;
+        if (selectedItem && selectedItem.parent) {
+            this.updateSelectedParent(selectedItem.parent, []);
+        }
+    }
+    onChildClicked(click) {
+        // click.source.selected = true;
+        this.menuItemClick.emit(click);
+    }
+    onMenuItemClicked(item) {
+        // item.selected = true;
+        this.menuItemClick.emit({ source: item });
+    }
+}
+PepMenuItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-menu-item',
+                template: "<mat-menu #childMenu=\"matMenu\" xPosition=\"{{ xPosition }}\" class=\"pep-{{type}}-menu\">\n    <ng-container *ngFor=\"let menuItem of items\">\n        <ng-container *ngIf=\"!menuItem.hidden\">\n            <ng-container *ngIf=\"menuItem.type === 'splitter'; then splitterBlock; else buttonBlock\"></ng-container>\n            <ng-template #splitterBlock>\n                <div mat-menu-item class=\"splitter\"></div>\n            </ng-template>\n\n            <ng-template #buttonBlock>\n                <ng-container\n                    *ngIf=\"type !== 'select' && menuItem.children?.length > 0; then childrenBlock; else regularBlock\">\n                </ng-container>\n                <ng-template #childrenBlock>\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" [matMenuTriggerFor]=\"menu.childMenu\"\n                        title=\"{{ menuItem.text }}\" pepRtlDirection [disabled]=\"menuItem.disabled\"\n                        [ngClass]=\"{ selected: type === 'action-select' && menuItem.selected, disabled: menuItem.disabled }\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n                            itemIconName: menuItem.iconName,\n                            itemText: menuItem.text,\n                            itemType: menuItem.type,\n                            hasChildren: true\n                        }\"></ng-container>\n                    </button>\n                    <pep-menu-item #menu [type]=\"type\" [items]=\"menuItem.children\" [parent]=\"menuItem\"\n                        (menuItemClick)=\"onChildClicked($event)\">\n                    </pep-menu-item>\n                </ng-template>\n                <ng-template #regularBlock>\n                    <button mat-menu-item (click)=\"onMenuItemClicked(menuItem)\" title=\"{{ menuItem.text }}\"\n                        pepRtlDirection [disabled]=\"menuItem.disabled\"\n                        [ngClass]=\"{ selected: (type === 'select' || type === 'action-select') && menuItem.selected, disabled: menuItem.disabled }\">\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: {\n                            itemIconName: menuItem.iconName,\n                            itemText: menuItem.text,\n                            itemType: menuItem.type,\n                            hasChildren: false\n                        }\"></ng-container>\n                    </button>\n                </ng-template>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<ng-template #itemTemplate let-itemIconName=\"itemIconName\" let-itemText=\"itemText\" let-itemType=\"itemType\"\n    let-hasChildren=\"hasChildren\">\n    <ng-container>\n        <mat-icon *ngIf=\"itemIconName\" class=\"pull-left flip\">\n            <pep-icon name=\"{{itemIconName}}\"></pep-icon>\n        </mat-icon>\n        <span *ngIf=\"itemText\" class=\"pull-left flip title ellipsis\"\n            [ngClass]=\"{ 'spacing-from-icon': itemIconName, 'spacing-from-submenu-trigger': hasChildren }\"\n            [title]=\"itemText\">\n            {{ itemText }}\n        </span>\n        <mat-icon *ngIf=\"hasChildren\" class=\"pull-left flip submenu-trigger\"\n            [ngClass]=\"{ 'rotate': xPosition === 'before' }\">\n            <pep-icon name=\"{{ subMenuIconName }}\"></pep-icon>\n        </mat-icon>\n    </ng-container>\n</ng-template>",
+                styles: [".mat-menu-item-submenu-trigger:after{display:none}.mat-menu-item .title{margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}.mat-menu-item .title.spacing-from-icon{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}.mat-menu-item .title.spacing-from-submenu-trigger{-webkit-padding-end:1rem;padding-inline-end:1rem;-webkit-padding-end:var(--pep-spacing-lg,1rem);padding-inline-end:var(--pep-spacing-lg,1rem)}.mat-menu-item .mat-icon{margin:0}.mat-menu-item .submenu-trigger{position:absolute;right:.5rem;right:var(--pep-spacing-sm,.5rem);width:1rem}.mat-menu-item .submenu-trigger.rotate{transform:rotate(180deg)}.mat-menu-item.splitter{height:1px!important;margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}.mat-menu-item[dir=rtl] .submenu-trigger{right:unset;left:.5rem;left:var(--pep-spacing-sm,.5rem);transform:rotate(180deg)}.mat-menu-item[dir=rtl] .submenu-trigger.rotate{transform:rotate(0deg)}.mat-menu-item-submenu-trigger:after{width:unset;height:unset;transform:unset}"]
+            },] }
+];
+PepMenuItemComponent.propDecorators = {
+    type: [{ type: Input }],
+    parent: [{ type: Input }],
+    items: [{ type: Input }],
+    selectedItem: [{ type: Input }],
+    xPosition: [{ type: Input }],
+    subMenuIconName: [{ type: Input }],
+    childMenu: [{ type: ViewChild, args: ['childMenu', { static: true },] }],
+    menuItemClick: [{ type: Output }]
 };
 
-class PepMenuModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconSystemMenu,
-            pepIconArrowRight,
-        ]);
-    }
-}
-PepMenuModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    // Material modules,
-                    MatCommonModule,
-                    MatFormFieldModule,
-                    MatMenuModule,
-                    MatIconModule,
-                    // ngx-lib modules
-                    PepNgxLibModule,
-                    PepIconModule,
-                ],
-                exports: [PepMenuComponent],
-                declarations: [PepMenuComponent, PepMenuItemComponent],
-            },] }
-];
-PepMenuModule.ctorParameters = () => [
-    { type: PepIconRegistry }
+class PepMenuModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemMenu,
+            pepIconArrowRight,
+        ]);
+    }
+}
+PepMenuModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    // Material modules,
+                    MatCommonModule,
+                    MatFormFieldModule,
+                    MatMenuModule,
+                    MatIconModule,
+                    // ngx-lib modules
+                    PepNgxLibModule,
+                    PepIconModule,
+                ],
+                exports: [PepMenuComponent],
+                declarations: [PepMenuComponent, PepMenuItemComponent],
+            },] }
+];
+PepMenuModule.ctorParameters = () => [
+    { type: PepIconRegistry }
 ];
 
-/*
- * Public API Surface of ngx-lib/menu
+/*
+ * Public API Surface of ngx-lib/menu
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepMenuComponent, PepMenuItem, PepMenuItemParent, PepMenuModule, PepMenuItemComponent as ɵa };