feat(dropdown): implementa criação de subníveis

Implementa criação de subníveis.

Fixes: DTHFUI-12057

Author: arthur-polidorio

projects/ui/src/lib/components/po-dropdown/po-dropdown-action.interface.ts

@@ -8,4 +8,15 @@ import { PoPopupAction } from '../po-popup/po-popup-action.interface';
  *
  * @usedBy PoDropdownComponent
  */
-export interface PoDropdownAction extends PoPopupAction {}
+export interface PoDropdownAction extends PoPopupAction {
+  /**
+   * Array de ações (`PoDropdownAction`) usado para criar agrupadores de subitens.
+   *
+   * - Permite a criação de menus aninhados (submenus).
+   *
+   * > Boas práticas de desenvolvimento:
+   * Recomenda-se limitar a navegação a, no máximo, três níveis hierárquicos.
+   * Isso evita sobrecarga cognitiva, facilita a memorização da estrutura e garante uma melhor experiência de uso.
+   */
+  subItems?: Array<PoDropdownAction>;
+}

projects/ui/src/lib/components/po-dropdown/po-dropdown.component.html

@@ -26,5 +26,6 @@
   [p-custom-positions]="['bottom-left', 'top-left']"
   [p-size]="size"
   [p-target]="dropdownRef"
+  [p-listbox-subitems]="true"
 >
 </po-popup>

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

@@ -22,6 +22,11 @@ import { PoDropdownBaseComponent } from './po-dropdown-base.component';
  *  <file name="sample-po-dropdown-basic/sample-po-dropdown-basic.component.ts"> </file>
  * </example>
  *
+ * <example name="po-dropdown-subitems" title="PO Dropdown Subitems" >
+ *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.html"> </file>
+ *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.ts"> </file>
+ * </example>
+ *
  * <example name="po-dropdown-labs" title="PO Dropdown Labs" >
  *  <file name="sample-po-dropdown-labs/sample-po-dropdown-labs.component.html"> </file>
  *  <file name="sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts"> </file>
@@ -59,7 +64,7 @@ export class PoDropdownComponent extends PoDropdownBaseComponent {
   }
 
   private checkClickArea(event: MouseEvent) {
-    return this.dropdownRef && this.dropdownRef.nativeElement.contains(event.target);
+    return this.dropdownRef?.nativeElement.contains(event.target);
   }
 
   private hideDropdown() {

projects/ui/src/lib/components/po-dropdown/samples/sample-po-dropdown-labs/sample-po-dropdown-labs.component.html

@@ -12,18 +12,28 @@
 <po-divider />
 
 <form #formAction="ngForm">
-  <po-input class="po-md-6 po-lg-4" name="actionAction" [(ngModel)]="action.action" p-clean p-label="Action">
+  <po-input class="po-md-6 po-lg-4" name="actionLabel" [(ngModel)]="action.label" p-label="Label" p-required>
   </po-input>
 
-  <po-input class="po-md-6 po-lg-4" name="actionLabel" [(ngModel)]="action.label" p-label="Label" p-required>
+  <po-input class="po-md-6 po-lg-4" name="actionAction" [(ngModel)]="action.action" p-clean p-label="Action">
   </po-input>
 
   <po-input class="po-md-6 po-lg-4" name="actionURL" [(ngModel)]="action.url" p-label="URL"> </po-input>
 
-  <po-select class="po-md-6 po-lg-3" name="type" [(ngModel)]="action.type" p-label="Type" [p-options]="typeOptions">
+  <po-select class="po-md-6 po-lg-4" name="type" [(ngModel)]="action.type" p-label="Type" [p-options]="typeOptions">
   </po-select>
 
-  <po-select class="po-md-6 po-lg-3" name="icon" [(ngModel)]="action.icon" p-label="Icon" [p-options]="iconOptions">
+  <po-select class="po-md-6 po-lg-4" name="icon" [(ngModel)]="action.icon" p-label="Icon" [p-options]="iconOptions">
+  </po-select>
+
+  <po-select
+    class="po-md-6 po-lg-4"
+    name="parent"
+    [(ngModel)]="action.parent"
+    p-label="Subitems"
+    p-placeholder="Add subitems"
+    [p-options]="parentList"
+  >
   </po-select>
 
   <po-checkbox-group

projects/ui/src/lib/components/po-dropdown/samples/sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts

@@ -16,8 +16,9 @@ import {
 export class SamplePoDropdownLabsComponent implements OnInit {
   private poNotification = inject(PoNotificationService);
 
-  action: PoDropdownAction;
+  action: PoDropdownAction & { parent?: string };
   actions: Array<PoDropdownAction>;
+  parentList: Array<PoSelectOption>;
   label: string;
   properties: Array<string>;
   size: string;
@@ -52,16 +53,72 @@ export class SamplePoDropdownLabsComponent implements OnInit {
     this.restore();
   }
 
-  addAction(action: PoDropdownAction) {
-    const newAction = Object.assign({}, action);
+  addAction(action: PoDropdownAction & { parent?: string }) {
+    const newAction: PoDropdownAction = { ...action };
     newAction.action = newAction.action ? this.showAction.bind(this, newAction.action) : undefined;
-    this.actions.push(newAction);
+
+    if (!action.parent) {
+      this.actions = [...this.actions, newAction];
+    } else {
+      const parentNode = this.getActionNode(this.actions, action.parent);
+      if (parentNode) {
+        parentNode.subItems = [...(parentNode.subItems || []), newAction];
+      } else {
+        this.actions = [...this.actions, newAction];
+      }
+    }
+
+    this.actions = [].concat(this.actions);
+    this.parentList = this.updateParentList(this.actions);
 
     this.restoreActionForm();
   }
 
+  private getActionNode(items: Array<PoDropdownAction>, value: string): PoDropdownAction | undefined {
+    if (!items || !Array.isArray(items) || !value) {
+      return undefined;
+    }
+
+    for (const item of items) {
+      if (item.label === value || (item as any).value === value) {
+        return item;
+      }
+
+      if (item.subItems && Array.isArray(item.subItems)) {
+        const found = this.getActionNode(item.subItems, value);
+        if (found) {
+          return found;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  private updateParentList(
+    items: Array<PoDropdownAction>,
+    level = 0,
+    parentList: Array<PoSelectOption> = []
+  ): Array<PoSelectOption> {
+    if (!items || !Array.isArray(items)) {
+      return parentList;
+    }
+
+    items.forEach(item => {
+      const { label } = item;
+      parentList.push({ label: `${'-'.repeat(level)} ${label}`, value: label });
+
+      if (item.subItems && Array.isArray(item.subItems)) {
+        this.updateParentList(item.subItems, level + 1, parentList);
+      }
+    });
+
+    return parentList;
+  }
+
   restore() {
     this.actions = [];
+    this.parentList = [];
     this.label = 'PO Dropdown';
     this.size = 'medium';
     this.properties = [];
@@ -71,8 +128,9 @@ export class SamplePoDropdownLabsComponent implements OnInit {
   restoreActionForm() {
     this.action = {
       label: undefined,
-      visible: null
-    };
+      visible: null,
+      parent: undefined
+    } as any;
   }
 
   showAction(label: string): void {

projects/ui/src/lib/components/po-dropdown/samples/sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.html

@@ -0,0 +1 @@
+<po-dropdown p-label="PO Dropdown" [p-actions]="actions"> </po-dropdown>

projects/ui/src/lib/components/po-dropdown/samples/sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { PoDropdownAction } from '@po-ui/ng-components';
+
+@Component({
+  selector: 'sample-po-dropdown-subitems',
+  templateUrl: './sample-po-dropdown-subitems.component.html',
+  standalone: false
+})
+export class SamplePoDropdownSubitemsComponent {
+  actions: Array<PoDropdownAction> = [
+    { label: 'New Sale', action: () => console.log('New Sale') },
+    { label: 'New Cancellation', action: () => console.log('New Cancellation'), type: 'danger' },
+    {
+      label: 'Reports',
+      subItems: [
+        { label: 'Monthly Sales', action: () => console.log('Monthly Sales'), icon: 'an an-chart-line-up' },
+        { label: 'Annual Sales', action: () => console.log('Annual Sales'), icon: 'an an-chart-line-up' }
+      ]
+    },
+    {
+      label: 'Settings',
+      subItems: [
+        { label: 'Users', action: () => console.log('Users') },
+        {
+          label: 'System',
+          subItems: [
+            { label: 'Backup', action: () => console.log('Backup') },
+            { label: 'Logs', action: () => console.log('Logs') }
+          ]
+        }
+      ]
+    }
+  ];
+}

projects/ui/src/lib/components/po-listbox/interfaces/po-listbox-literals.interface.ts

@@ -6,6 +6,9 @@
  * Interface para definição de literais utilizadas no `po-listbox`
  */
 export interface PoListBoxLiterals {
+  /** Texto do botão para voltar ao agrupador anterior. */
+  backToPreviousGroup?: string;
+
   /** Texto exibido quando não houver itens na lista */
   noItems?: string;
 

projects/ui/src/lib/components/po-listbox/po-item-list/po-item-list-base.component.ts

@@ -58,7 +58,9 @@ export class PoItemListBaseComponent {
   @Input('p-label') label: string;
 
   /** Tamanho do texto exibido. */
-  @Input('p-size') size: string;
+  @HostBinding('attr.p-size')
+  @Input('p-size')
+  size: string;
 
   /** Valor do item. */
   @Input('p-value') value: string;
@@ -118,6 +120,9 @@ export class PoItemListBaseComponent {
    */
   @Input('p-icon') icon: string | TemplateRef<void>;
 
+  // Define a posição do ícone: 'left' (padrão) ou 'right'.
+  @Input('p-icon-position') iconPosition: 'left' | 'right' = 'left';
+
   /**
    * @optional
    *

projects/ui/src/lib/components/po-listbox/po-item-list/po-item-list.component.html

@@ -12,10 +12,18 @@
         [class.po-item-list__danger]="danger"
         class="po-item-list po-item-list__action"
       >
-        @if (icon) {
-          <po-icon class="po-popup-icon-item" [p-icon]="icon"></po-icon>
+        @if (icon && iconPosition === 'left') {
+          <po-icon
+            class="po-popup-icon-item po-field-icon"
+            [class.po-field-icon-aa]="size === 'small'"
+            [p-icon]="icon"
+          ></po-icon>
         }
         <span class="po-item-list-label">{{ label }}</span>
+
+        @if (icon && iconPosition === 'right') {
+          <po-icon class="po-popup-icon-item-right po-field-icon" [p-icon]="icon"></po-icon>
+        }
       </div>
     }
     @case ('option') {