feat(menu): adiciona evento p-expanded

Author: anderson-gregorio-totvs

projects/ui/src/lib/components/po-menu/po-menu-base.component.spec.ts

@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
-import { fakeAsync, tick } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { of } from 'rxjs';
 
 import { expectPropertiesValues } from './../../util-test/util-expect.spec';
@@ -8,7 +8,10 @@ import { PoThemeA11yEnum } from '../../services';
 import { PoMenuBaseComponent } from './po-menu-base.component';
 import { PoMenuFilter } from './po-menu-filter/po-menu-filter.interface';
 
-@Directive()
+@Component({
+  template: '',
+  standalone: true
+})
 export class PoMenuComponent extends PoMenuBaseComponent {
   protected validateCollapseClass() {}
   protected checkActiveMenuByUrl() {}
@@ -33,8 +36,19 @@ describe('PoMenuBaseComponent:', () => {
     getFilteredData: () => {}
   };
 
-  beforeEach(() => {
-    component = new PoMenuComponent(menuGlobalService, menuService, languageService);
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PoMenuComponent],
+      providers: [
+        { provide: 'PoMenuGlobalService', useValue: menuGlobalService },
+        { provide: 'PoMenuService', useValue: menuService },
+        { provide: 'PoLanguageService', useValue: languageService }
+      ]
+    }).compileComponents();
+
+    component = TestBed.runInInjectionContext(
+      () => new PoMenuComponent(menuGlobalService, menuService, languageService)
+    );
     component.menus = [
       {
         label: 'Level 1.1',

projects/ui/src/lib/components/po-menu/po-menu-base.component.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+import { Directive, HostBinding, HostListener, Input, output } from '@angular/core';
 
 import {
   convertToBoolean,
@@ -129,6 +129,19 @@ export abstract class PoMenuBaseComponent {
    */
   @Input({ alias: 'p-automatic-toggle', transform: convertToBoolean }) automaticToggle: boolean = false;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Evento emitido toda vez que o estado do menu muda, enviando `true` quando expandido e `false` quando colapsado.
+   *
+   * ```html
+   * <po-menu (p-toggle)="onMenuToggle($event)"></po-menu>
+   * ```
+   */
+  toggleChange = output<boolean>({ alias: 'p-toggle' });
+
   /**
    * @optional
    *

projects/ui/src/lib/components/po-menu/po-menu.component.spec.ts

@@ -1029,7 +1029,10 @@ describe('PoMenuComponent:', () => {
         menuItemsService: {
           sendToChildMenuClicked: () => {}
         },
-        updateMenu: () => {}
+        updateMenu: () => {},
+        setCollapsed: value => {
+          fakeThis.collapsed = value;
+        }
       };
 
       component['toggleMenuCollapse'].call(fakeThis, false);
@@ -1048,7 +1051,8 @@ describe('PoMenuComponent:', () => {
         menuItemsService: {
           sendToChildMenuClicked: () => {}
         },
-        updateMenu: () => {}
+        updateMenu: () => {},
+        setCollapsed: () => {}
       };
 
       spyOn(fakeThis, 'updateMenu');
@@ -1071,7 +1075,8 @@ describe('PoMenuComponent:', () => {
         menuItemsService: {
           sendToChildMenuClicked: () => {}
         },
-        updateMenu: () => {}
+        updateMenu: () => {},
+        setCollapsed: () => {}
       };
 
       spyOn(fakeThis, 'toggleGroupedMenuItem');
@@ -1096,7 +1101,8 @@ describe('PoMenuComponent:', () => {
         menuItemsService: {
           sendToChildMenuClicked: () => {}
         },
-        updateMenu: () => {}
+        updateMenu: () => {},
+        setCollapsed: () => {}
       };
 
       spyOn(fakeThis, 'toggleGroupedMenuItem');
@@ -1117,7 +1123,8 @@ describe('PoMenuComponent:', () => {
         getActiveMenuParent: () => {},
         toggleGroupedMenuItem: () => {},
         activeMenuItem: undefined,
-        updateMenu: () => {}
+        updateMenu: () => {},
+        setCollapsed: () => {}
       };
 
       spyOn(fakeThis, 'toggleGroupedMenuItem');
@@ -1138,7 +1145,8 @@ describe('PoMenuComponent:', () => {
         getActiveMenuParent: () => {},
         toggleGroupedMenuItem: () => {},
         activeMenuItem: undefined,
-        updateMenu: () => {}
+        updateMenu: () => {},
+        setCollapsed: () => {}
       };
 
       spyOn(fakeThis, 'toggleGroupedMenuItem');
@@ -1160,7 +1168,8 @@ describe('PoMenuComponent:', () => {
         menuItemsService: {
           sendToChildMenuClicked: arg => {}
         },
-        updateMenu: () => {}
+        updateMenu: () => {},
+        setCollapsed: () => {}
       };
 
       spyOn(fakeThis, 'activateCollapseSubMenuItem');
@@ -1187,7 +1196,8 @@ describe('PoMenuComponent:', () => {
         menuItemsService: {
           sendToChildMenuClicked: () => {}
         },
-        updateMenu: () => {}
+        updateMenu: () => {},
+        setCollapsed: () => {}
       };
 
       spyOn(fakeThis, 'activateCollapseSubMenuItem');

projects/ui/src/lib/components/po-menu/po-menu.component.ts

@@ -319,14 +319,14 @@ export class PoMenuComponent
 
   onMouseEnter(): void {
     if (this.collapsed && this.automaticToggle) {
-      this.collapsed = false;
+      this.setCollapsed(false);
       this.allowCollapseHover = true;
     }
   }
 
   onMouseLeave(): void {
     if (!this.collapsed && this.allowCollapseHover && this.automaticToggle) {
-      this.collapsed = true;
+      this.setCollapsed(true);
     }
   }
 
@@ -585,7 +585,7 @@ export class PoMenuComponent
   }
 
   private toggleMenuCollapse(collapsed: boolean = false) {
-    this.collapsed = collapsed;
+    this.setCollapsed(collapsed);
 
     if (this.groupedMenuItem && this.activeMenuItem) {
       this.groupedMenuItem =
@@ -628,4 +628,9 @@ export class PoMenuComponent
     this.menuPrevious = this.stringify(this.menus);
     this.validateMenus(this.menus);
   }
+
+  private setCollapsed(value: boolean) {
+    this.collapsed = value;
+    this.toggleChange.emit(!value);
+  }
 }