diff --git a/projects/ui/src/lib/components/po-menu/po-menu-base.component.ts b/projects/ui/src/lib/components/po-menu/po-menu-base.component.ts index e6e26795b..44b0966b7 100644 --- a/projects/ui/src/lib/components/po-menu/po-menu-base.component.ts +++ b/projects/ui/src/lib/components/po-menu/po-menu-base.component.ts @@ -62,6 +62,17 @@ export abstract class PoMenuBaseComponent { private _params: any; private _service: string | PoMenuFilter; + /** + * @optional + * + * @description + * + * Expande e Colapsa (retrai) o menu automaticamente. + * + * @default `false` + */ + @Input({ alias: 'p-automatic-toggle', transform: convertToBoolean }) automaticToggle: boolean = false; + /** * @optional * diff --git a/projects/ui/src/lib/components/po-menu/po-menu.component.spec.ts b/projects/ui/src/lib/components/po-menu/po-menu.component.spec.ts index 71ee5752e..4d9d86a98 100644 --- a/projects/ui/src/lib/components/po-menu/po-menu.component.spec.ts +++ b/projects/ui/src/lib/components/po-menu/po-menu.component.spec.ts @@ -936,6 +936,7 @@ describe('PoMenuComponent:', () => { it('should set "collapsed" to false and "allowCollapseHover" to true when onMouseEnter is called and the component is collapsed', () => { component.collapsed = true; component.allowCollapseHover = false; + component.automaticToggle = true; component.onMouseEnter(); @@ -946,6 +947,7 @@ describe('PoMenuComponent:', () => { it('should not modify the "collapsed" or "allowCollapseHover" state when onMouseEnter is called and the component is not collapsed', () => { component.collapsed = false; component.allowCollapseHover = true; + component.automaticToggle = true; component.onMouseEnter(); @@ -956,6 +958,7 @@ describe('PoMenuComponent:', () => { it('should set "collapsed" to true when onMouseLeave is called and the component is not collapsed and allowCollapseHover is true', () => { component.collapsed = false; component.allowCollapseHover = true; + component.automaticToggle = true; component.onMouseLeave(); @@ -965,6 +968,7 @@ describe('PoMenuComponent:', () => { it('should not modify the "collapsed" state when onMouseLeave is called and the component is already collapsed', () => { component.collapsed = true; component.allowCollapseHover = true; + component.automaticToggle = true; component.onMouseLeave(); @@ -974,6 +978,7 @@ describe('PoMenuComponent:', () => { it('should not modify the "collapsed" state when onMouseLeave is called and allowCollapseHover is false', () => { component.collapsed = false; component.allowCollapseHover = false; + component.automaticToggle = true; component.onMouseLeave(); diff --git a/projects/ui/src/lib/components/po-menu/po-menu.component.ts b/projects/ui/src/lib/components/po-menu/po-menu.component.ts index 637fc6887..d5727adc3 100644 --- a/projects/ui/src/lib/components/po-menu/po-menu.component.ts +++ b/projects/ui/src/lib/components/po-menu/po-menu.component.ts @@ -298,14 +298,14 @@ export class PoMenuComponent extends PoMenuBaseComponent implements AfterViewIni } onMouseEnter(): void { - if (this.collapsed) { + if (this.collapsed && this.automaticToggle) { this.collapsed = false; this.allowCollapseHover = true; } } onMouseLeave(): void { - if (!this.collapsed && this.allowCollapseHover) { + if (!this.collapsed && this.allowCollapseHover && this.automaticToggle) { this.collapsed = true; } } diff --git a/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.html b/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.html index 86bc782cf..26d0df04b 100644 --- a/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.html +++ b/projects/ui/src/lib/components/po-menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.html @@ -1,5 +1,11 @@