feat(modal): adiciona suporte a ícone nas ações do modal

O componente po-modal não permitia exibir ícones nos botões de ação.
Adiciona a propriedade `icon` na interface `PoModalAction` e vincula
`[p-icon]` nos botões primário e secundário do template do modal.

Fixes DTHFUI-11656, DTHFUI-12113

Author: luiz-s-vasconcellos

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

@@ -95,11 +95,12 @@ export class PoButtonBaseComponent {
    * @description
    * Ícone exibido ao lado esquerdo do label do botão.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
+   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
    * ```
    * <po-button p-icon="an an-user" p-label="PO button"></po-button>
    * ```
-   * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
+   * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+   * esteja carregada no projeto:
    * ```
    * <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
    * ```

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

@@ -1,3 +1,5 @@
+import { TemplateRef } from '@angular/core';
+
 /**
  * @usedBy PoModalComponent
  *
@@ -19,6 +21,50 @@ export interface PoModalAction {
   /** Desabilita o botão impossibilitando que sua ação seja executada. */
   disabled?: boolean;
 
+  /**
+   * Ícone exibido ao lado esquerdo do label do botão.
+   *
+   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
+   * ```
+   * const modalAction: PoModalAction = {
+   *   action: () => {},
+   *   label: 'Botão com ícone PO',
+   *   icon: 'an an-user'
+   * };
+   * ```
+   * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+   * esteja carregada no projeto:
+   * ```
+   * const modalAction: PoModalAction = {
+   *   action: () => {},
+   *   label: 'Botão com ícone Font Awesome',
+   *   icon: 'fa fa-user'
+   * };
+   * ```
+   * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+   * ```
+   * // Template HTML
+   * <ng-template #customIcon>
+   *   <span class="fa fa-user"></span>
+   * </ng-template>
+   *
+   * // Componente TypeScript
+   * @ViewChild('customIcon', { static: true }) customIcon: TemplateRef<void>;
+   *
+   * const modalAction: PoModalAction = {
+   *   action: () => {},
+   *   label: 'Botão com ícone customizado',
+   * };
+   *
+   * // Atribuição do TemplateRef à propriedade icon após a inicialização da view
+   * ngAfterViewInit() {
+   *   this.modalAction.icon = this.customIcon;
+   * }
+   * ```
+   * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o.
+   */
+  icon?: string | TemplateRef<void>;
+
   /** Rótulo do botão. */
   label: string;
 

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

@@ -36,6 +36,7 @@
                   <po-button
                     [p-danger]="getSecondaryActionButtonDanger()"
                     [p-disabled]="secondaryAction.disabled"
+                    [p-icon]="secondaryAction.icon"
                     [p-label]="secondaryAction.label"
                     [p-loading]="secondaryAction.loading"
                     p-kind="secondary"
@@ -48,6 +49,7 @@
                   class="po-button-modal-first-action"
                   [p-danger]="primaryAction.danger"
                   [p-disabled]="primaryAction.disabled"
+                  [p-icon]="primaryAction.icon"
                   [p-label]="primaryAction.label"
                   [p-loading]="primaryAction.loading"
                   p-kind="primary"

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

@@ -27,7 +27,7 @@
       [p-options]="iconOptions"
     ></po-select>
 
-    <po-input class="po-md-6" name="Content" [(ngModel)]="content" p-clean p-label="Content" p-maxlength="200">
+    <po-input class="po-md-12 po-lg-6" name="Content" [(ngModel)]="content" p-clean p-label="Content" p-maxlength="200">
     </po-input>
 
     <po-input
@@ -40,8 +40,18 @@
     >
     </po-input>
 
+    <po-input
+      class="po-md-6 po-lg-3"
+      name="primaryActionIcon"
+      [(ngModel)]="primaryActionIcon"
+      p-clean
+      p-label="Primary action icon"
+      p-maxlength="30"
+    >
+    </po-input>
+
     <po-checkbox-group
-      class="po-md-12 po-lg-9"
+      class="po-md-12 po-lg-6"
       name="primaryActionProperties"
       [(ngModel)]="primaryActionProperties"
       p-columns="3"
@@ -60,8 +70,18 @@
     >
     </po-input>
 
+    <po-input
+      class="po-md-6 po-lg-3"
+      name="secondaryActionIcon"
+      [(ngModel)]="secondaryActionIcon"
+      p-clean
+      p-label="Secondary action icon"
+      p-maxlength="100"
+    >
+    </po-input>
+
     <po-checkbox-group
-      class="po-md-12 po-lg-9"
+      class="po-md-12 po-lg-6"
       name="secondaryActionProperties"
       [(ngModel)]="secondaryActionProperties"
       p-columns="3"

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

@@ -30,6 +30,7 @@ export class SamplePoModalLabsComponent implements OnInit {
   };
 
   primaryActionLabel: string;
+  primaryActionIcon: string;
   primaryActionProperties: Array<string>;
   primaryActionOptions: Array<PoCheckboxGroupOption> = [
     { value: 'danger', label: 'Danger' },
@@ -56,11 +57,12 @@ export class SamplePoModalLabsComponent implements OnInit {
   };
 
   secondaryActionLabel: string;
+  secondaryActionIcon: string;
   secondaryActionProperties: Array<string>;
   secondaryActionOptions: Array<PoCheckboxGroupOption> = [
+    { value: 'danger', label: 'Danger' },
     { value: 'disabled', label: 'Disabled' },
-    { value: 'loading', label: 'Loading' },
-    { value: 'danger', label: 'Danger' }
+    { value: 'loading', label: 'Loading' }
   ];
 
   propertiesOptions: Array<PoCheckboxGroupOption> = [
@@ -81,11 +83,13 @@ export class SamplePoModalLabsComponent implements OnInit {
   openModal() {
     this.primaryAction.disabled = this.primaryActionProperties.includes('disabled');
     this.primaryAction.label = this.primaryActionLabel;
+    this.primaryAction.icon = this.primaryActionIcon;
     this.primaryAction.loading = this.primaryActionProperties.includes('loading');
     this.primaryAction.danger = this.primaryActionProperties.includes('danger');
 
     this.secondaryAction.disabled = this.secondaryActionProperties.includes('disabled');
     this.secondaryAction.label = this.secondaryActionLabel;
+    this.secondaryAction.icon = this.secondaryActionIcon;
     this.secondaryAction.loading = this.secondaryActionProperties.includes('loading');
     this.secondaryAction.danger = this.secondaryActionProperties.includes('danger');
 
@@ -102,8 +106,10 @@ export class SamplePoModalLabsComponent implements OnInit {
     this.title = 'PO Modal';
     this.properties = [];
     this.primaryActionLabel = undefined;
+    this.primaryActionIcon = undefined;
     this.primaryActionProperties = [];
     this.secondaryActionLabel = undefined;
+    this.secondaryActionIcon = undefined;
     this.secondaryActionProperties = [];
     this.componentsSize = 'medium';
     this.icon = undefined;