feat(menu): permite habilitar o automatic toggle

permite habilitar o automatic toggle no componente `po-menu` Fixes DTHFUI-8037
po-ui · Jan 12, 2024 · 610f087 · 610f087
1 parent 6ca2dbd
commit 610f087
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
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
@@ -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
@@ -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
@@ -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/...menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.html b/...menu/samples/sample-po-menu-human-resources/sample-po-menu-human-resources.component.html
@@ -1,5 +1,11 @@
 <div class="po-wrapper">
-  <po-menu p-collapsed p-filter [p-menus]="menus" [p-service]="samplePoMenuHumanResourcesService">
+  <po-menu
+    p-collapsed
+    p-filter
+    [p-menus]="menus"
+    [p-service]="samplePoMenuHumanResourcesService"
+    [p-automatic-toggle]="true"
+  >
     <div *p-menu-header-template class="po-p-2 po-font-title sample-menu-header-text-color">
       <p>Welcome,</p>
       <p>

diff --git a/...i/src/lib/components/po-menu/samples/sample-po-menu-labs/sample-po-menu-labs.component.ts b/...i/src/lib/components/po-menu/samples/sample-po-menu-labs/sample-po-menu-labs.component.ts
@@ -1,12 +1,6 @@
 import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 
-import {
-  PoButtonGroupItem,
-  PoMenuComponent,
-  PoMenuItem,
-  PoRadioGroupOption,
-  PoSelectOption
-} from '@po-ui/ng-components';
+import { PoButtonGroupItem, PoMenuComponent, PoMenuItem, PoSelectOption } from '@po-ui/ng-components';
 
 @Component({
   selector: 'sample-po-menu-labs',