feat(toaster): criação do componente po-toaster

Criar componente po-toaster e modo `inline` para mostrar componente diretamente no DOM. Componente também é utilizado pelo po-notification com o modo `alert` fixes DTHFUI-8864
po-ui · Jun 24, 2024 · 39369d4 · 39369d4
1 parent e2006c8
commit 39369d4
Show file tree

Hide file tree

Showing 30 changed files with 665 additions and 207 deletions.
diff --git a/projects/ui/src/lib/components/components.module.ts b/projects/ui/src/lib/components/components.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 
 import { PoAccordionModule } from './po-accordion/po-accordion.module';
 import { PoAvatarModule } from './po-avatar/po-avatar.module';
+import { PoBadgeModule } from './po-badge/po-badge.module';
 import { PoBreadcrumbModule } from './po-breadcrumb/po-breadcrumb.module';
 import { PoButtonGroupModule } from './po-button-group/po-button-group.module';
 import { PoButtonModule } from './po-button/po-button.module';
@@ -14,6 +15,7 @@ import { PoDividerModule } from './po-divider/po-divider.module';
 import { PoDropdownModule } from './po-dropdown/po-dropdown.module';
 import { PoDynamicModule } from './po-dynamic/po-dynamic.module';
 import { PoFieldModule } from './po-field/po-field.module';
+import { PoSwitchModule } from './po-field/po-switch/po-switch.module';
 import { PoGaugeModule } from './po-gauge/po-gauge.module';
 import { PoGridModule } from './po-grid/po-grid.module';
 import { PoIconModule } from './po-icon/po-icon.module';
@@ -30,12 +32,12 @@ import { PoMenuModule } from './po-menu/po-menu.module';
 import { PoModalModule } from './po-modal/po-modal.module';
 import { PoNavbarModule } from './po-navbar/po-navbar.module';
 import { PoOverlayModule } from './po-overlay/po-overlay.module';
-import { PoPageModule } from './po-page/po-page.module';
 import { PoPageSlideModule } from './po-page/po-page-slide/po-page-slide.module';
-import { PoSwitchModule } from './po-field/po-switch/po-switch.module';
+import { PoPageModule } from './po-page/po-page.module';
 import { PoPopoverModule } from './po-popover/po-popover.module';
 import { PoPopupModule } from './po-popup/po-popup.module';
 import { PoProgressModule } from './po-progress/po-progress.module';
+import { PoSearchModule } from './po-search';
 import { PoSlideModule } from './po-slide/po-slide.module';
 import { PoStepperModule } from './po-stepper/po-stepper.module';
 import { PoTableModule } from './po-table/po-table.module';
@@ -44,9 +46,7 @@ import { PoTagModule } from './po-tag/po-tag.module';
 import { PoToolbarModule } from './po-toolbar/po-toolbar.module';
 import { PoTreeViewModule } from './po-tree-view/po-tree-view.module';
 import { PoWidgetModule } from './po-widget/po-widget.module';
-import { PoSearchModule } from './po-search';
-import { PoBadgeModule } from './po-badge/po-badge.module';
-
+import { PoToasterModule } from './po-toaster';
 @NgModule({
   imports: [
     PoAccordionModule,
@@ -94,7 +94,8 @@ import { PoBadgeModule } from './po-badge/po-badge.module';
     PoPageSlideModule,
     PoSwitchModule,
     PoSearchModule,
-    PoBadgeModule
+    PoBadgeModule,
+    PoToasterModule
   ],
   exports: [
     PoAccordionModule,
@@ -142,7 +143,8 @@ import { PoBadgeModule } from './po-badge/po-badge.module';
     PoPageSlideModule,
     PoSwitchModule,
     PoSearchModule,
-    PoBadgeModule
+    PoBadgeModule,
+    PoToasterModule
   ],
   providers: [],
   bootstrap: [],

diff --git a/projects/ui/src/lib/components/index.ts b/projects/ui/src/lib/components/index.ts
@@ -45,3 +45,4 @@ export * from './po-toolbar/index';
 export * from './po-tree-view/index';
 export * from './po-widget/index';
 export * from './po-search/index';
+export * from './po-toaster/index';
diff --git a/projects/ui/src/lib/components/po-toaster/enum/po-toaster-mode.enum.ts b/projects/ui/src/lib/components/po-toaster/enum/po-toaster-mode.enum.ts
@@ -0,0 +1,8 @@
+// Define os modos usados no `PoToasterComponent`.
+export enum PoToasterMode {
+  /** Modo Inline do componente, mostrado fixado no DOM */
+  Inline = 'inline',
+
+  /** Modo Padrão do componente, mostrado como Alerta */
+  Alert = 'alert'
+}
diff --git a/...po-toaster/po-toaster-orientation.enum.ts → ...aster/enum/po-toaster-orientation.enum.ts b/...po-toaster/po-toaster-orientation.enum.ts → ...aster/enum/po-toaster-orientation.enum.ts
@@ -1,8 +1,4 @@
-/**
- * @docsPrivate
- *
- * Enums para a orientação da notificação, do componente po-toaster-base.component.
- */
+// Define as orientações possíveis para o `PoToasterComponent`.
 export enum PoToasterOrientation {
   /** Orientção do componente fica no rodapé */
   Bottom,

diff --git a/projects/ui/src/lib/components/po-toaster/enum/po-toaster-type.enum.ts b/projects/ui/src/lib/components/po-toaster/enum/po-toaster-type.enum.ts
@@ -0,0 +1,20 @@
+/**
+ * @usedBy PoToasterComponent
+ *
+ * @description
+ *
+ * Define os tipos possíveis para o `PoToasterComponent`.
+ */
+export enum PoToasterType {
+  /** Tipo de toaster para mensagens de erro. */
+  Error = 'error',
+
+  /** Tipo de toaster para mensagens informativas. */
+  Information = 'information',
+
+  /** Tipo de toaster para mensagens de sucesso. */
+  Success = 'success',
+
+  /** Tipo de toaster para mensagens de atenção. */
+  Warning = 'warning'
+}
diff --git a/projects/ui/src/lib/components/po-toaster/index.ts b/projects/ui/src/lib/components/po-toaster/index.ts
@@ -0,0 +1,10 @@
+export * from './enum/po-toaster-mode.enum';
+export * from './enum/po-toaster-orientation.enum';
+export * from './enum/po-toaster-type.enum';
+
+export * from './interface/po-toaster.interface';
+
+export * from './literals/po-toaster.literals';
+
+export * from './po-toaster.component';
+export * from './po-toaster.module';
diff --git a/projects/ui/src/lib/components/po-toaster/interface/po-toaster.interface.ts b/projects/ui/src/lib/components/po-toaster/interface/po-toaster.interface.ts
@@ -0,0 +1,14 @@
+import { PoNotification } from '../../../services/po-notification';
+import { PoToasterType } from '../enum/po-toaster-type.enum';
+
+// Define as propriedades de um toaster.
+export interface PoToaster extends PoNotification {
+  /** Referência do componente toaster. */
+  componentRef?: any;
+
+  /** Posição onde a notificação aparecerá na tela. */
+  position: number;
+
+  /** Tipo de notificação. */
+  type: PoToasterType;
+}
diff --git a/...ication/po-toaster/po-toaster.literals.ts → ...o-toaster/literals/po-toaster.literals.ts b/...ication/po-toaster/po-toaster.literals.ts → ...o-toaster/literals/po-toaster.literals.ts
diff --git a/projects/ui/src/lib/components/po-toaster/po-toaster-base.component.ts b/projects/ui/src/lib/components/po-toaster/po-toaster-base.component.ts
@@ -0,0 +1,161 @@
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { PoToaster } from './interface/po-toaster.interface';
+import { convertToBoolean } from '../../utils/util';
+import { PoToasterMode } from './enum/po-toaster-mode.enum';
+import { PoToasterType } from './enum/po-toaster-type.enum';
+import { PoToasterOrientation } from './enum/po-toaster-orientation.enum';
+
+/**
+ *
+ * @description
+ *
+ * O Toaster serve para exibir uma mensagem temporária em linha na  interface, podendo ou não ser removida pelos usuários a depender do uso especificado.
+ *
+ * #### Acessibilidade tratada no componente
+ *
+ * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
+ *
+ * - Permitir a interação via teclado (2.1.1: Keyboard (A));
+ * - Permitir que o usuário feche facilmente o toaster e não retirar o foco de onde está. (2.2.4: Interrupções (AAA));
+ * - Preservar o foco visível na navegação via teclado. (2.4.7: Foco visível (A));
+ * - Áreas de clique ou toque para elementos interativos devem ter pelo menos 44x44 pixels (2.5.5: Área de clique (AAA));
+ *
+ * #### Tokens customizáveis
+ *
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade                             | Descrição                                            | Valor Padrão                                      |
+ * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | **Default Values**                     |                                                       |                                                   |
+ * | `--font-family`                        | Família tipográfica usada                             | `var(--font-family-theme)`                        |
+ * | `--font-color`                         | Cor principal do texto                                | `var(--color-neutral-dark-90)`                    |
+ * | `--font-color-support`                 | Cor principal do texto de supporte                    | `var(--color-neutral-dark-80)`                    |
+ * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento&nbsp;   | `var(--border-radius-md)`                         |
+ * | **Type Success**                       |                                                       |                                                   |
+ * | `--color-success`                      | Cor principal no tipo success                         | `var(--color-feedback-positive-base)`             |
+ * | `--background-success`                 | Cor de fundo principal no tipo success                | `var(--color-feedback-positive-lightest)`         |
+ * | `--border-color-success`               | Cor da borda principal tipo success                   | `var(--color-feedback-positive-lighter)`          |
+ * | **Type Error**                         |                                                       |                                                   |
+ * | `--color-error`                        | Cor principal no tipo error                           | `var(--color-feedback-negative-base)`             |
+ * | `--background-error`                   | Cor de fundo principal no tipo error                  | `var(--color-feedback-negative-lightest)`         |
+ * | `--border-color-error`                 | Cor da borda principal tipo error                     | `var(--color-feedback-negative-lighter)`          |
+ * | **Type Warning**                       |                                                       |                                                   |
+ * | `--color-icon-warning`                 | Cor principal do icone no tipo warning                | `var(--color-neutral-dark-90)`                    |
+ * | `--color-warning`                      | Cor principal no tipo warning                         | `var(--color-feedback-warning-base)`              |
+ * | `--background-warning`                 | Cor de fundo principal no tipo warning                | `var(--color-feedback-warning-lightest)`          |
+ * | `--border-color-warning`               | Cor da borda principal tipo warning                   | `var(--color-feedback-warning-lighter)`           |
+ * | **Type Info**                          |                                                       |                                                   |
+ * | `--color-info`                         | Cor principal no tipo info                            | `var(--color-feedback-info-base)`                 |
+ * | `--background-info`                    | Cor de fundo principal no tipo info                   | `var(--color-feedback-info-lightest)`             |
+ * | `--border-color-info`                  | Cor da borda principal tipo info                      | `var(--color-feedback-info-lighter)`              |
+ *
+ */
+@Directive()
+export abstract class PoToasterBaseComponent {
+  private _isHide: boolean;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Ação para a notificação.
+   */
+  @Input('p-action') action: Function;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Label do botão quando houver uma ação definida.
+   */
+  @Input('p-action-label') actionLabel: string;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Mensagem a ser exibida na notificação.
+   */
+  @Input('p-message') message: string;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define se o Toaster esta invisivel.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-hide', transform: convertToBoolean }) isHide: boolean = false;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Evento emitido quando o valor de `isHide` é alterado.
+   *
+   */
+  @Output('p-hide-change') isHideChange = new EventEmitter<boolean>();
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Exibe botão de fechar no toaster modo inline.
+   *
+   * @default `true`
+   */
+  @Input({ alias: 'p-show-close', transform: convertToBoolean }) showClose: boolean = true;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Mensagem de suporte a ser exibida na notificação.
+   */
+  @Input('p-support-message') supportMessage?: string;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Determina o tipo de notificação.
+   *
+   * Valores aceitos: `error`, `information`, `success` e `warning`.
+   * @see PoToasterType
+   *
+   * @default `PoToasterType.Information`
+   */
+  @Input('p-type') type: PoToasterType = PoToasterType.Information;
+
+  // Determina o modo do Toaster
+  @Input('p-mode') mode: PoToasterMode = PoToasterMode.Inline;
+
+  // Orientação da notificação, a mesma pode ser exibida na parte superior ou inferior da página.
+  orientation: PoToasterOrientation = PoToasterOrientation.Bottom;
+
+  // ComponentRef
+  componentRef: any;
+
+  // Posição para notificação aparecer na tela.
+  position: number;
+
+  // Fecha a notificação.
+  abstract close(): void;
+
+  // Altera a posição da notificação.
+  abstract changePosition(value: number): void;
+
+  // Configura o componente po-toaster de acordo com as definições do usuário.
+  abstract configToaster(poToaster: PoToaster): void;
+}
diff --git a/projects/ui/src/lib/components/po-toaster/po-toaster.component.html b/projects/ui/src/lib/components/po-toaster/po-toaster.component.html
@@ -0,0 +1,43 @@
+<div
+  #toaster
+  class="
+    po-toaster 
+    {{ getToasterType() }} 
+    {{ getToasterPosition() }}
+  "
+  [class.po-toaster-inline]="isInline()"
+  [hidden]="isHide"
+>
+  <div class="po-toaster-icon" [ngClass]="isAlert() ? 'po-toaster-icon-default' : 'po-toaster-decoration'">
+    <po-icon *ngIf="isAlert()" [p-icon]="getIcon()"></po-icon>
+  </div>
+
+  <po-icon class="po-toaster-inline-icon" *ngIf="isInline()" [p-icon]="getIcon()"></po-icon>
+
+  <div class="po-toaster-actions">
+    <div class="po-toaster-message">
+      {{ message }}
+      <div *ngIf="supportMessage" class="po-toaster-support-message">{{ supportMessage }}</div>
+    </div>
+
+    <div class="po-toaster-action">
+      <po-button
+        *ngIf="action && actionLabel"
+        (p-click)="poToasterAction($event)"
+        [p-label]="actionLabel"
+        p-kind="tertiary"
+      ></po-button>
+    </div>
+  </div>
+
+  <div *ngIf="hasClose()" class="po-toaster-close">
+    <div class="po-toaster-divider"></div>
+    <po-button
+      #buttonClose
+      class="po-toaster-button-close"
+      (p-click)="onButtonClose($event)"
+      p-icon="ICON_CLOSE"
+      p-kind="tertiary"
+    ></po-button>
+  </div>
+</div>