Skip to content

Commit 39369d4

Browse files
bruno-severinoanderson-gregorio-totvs
bruno-severino
authored and
anderson-gregorio-totvs
committed
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
1 parent e2006c8 commit 39369d4

30 files changed

+665
-207
lines changed

‎projects/ui/src/lib/components/components.module.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
22

33
import { PoAccordionModule } from './po-accordion/po-accordion.module';
44
import { PoAvatarModule } from './po-avatar/po-avatar.module';
5+
import { PoBadgeModule } from './po-badge/po-badge.module';
56
import { PoBreadcrumbModule } from './po-breadcrumb/po-breadcrumb.module';
67
import { PoButtonGroupModule } from './po-button-group/po-button-group.module';
78
import { PoButtonModule } from './po-button/po-button.module';
@@ -14,6 +15,7 @@ import { PoDividerModule } from './po-divider/po-divider.module';
1415
import { PoDropdownModule } from './po-dropdown/po-dropdown.module';
1516
import { PoDynamicModule } from './po-dynamic/po-dynamic.module';
1617
import { PoFieldModule } from './po-field/po-field.module';
18+
import { PoSwitchModule } from './po-field/po-switch/po-switch.module';
1719
import { PoGaugeModule } from './po-gauge/po-gauge.module';
1820
import { PoGridModule } from './po-grid/po-grid.module';
1921
import { PoIconModule } from './po-icon/po-icon.module';
@@ -30,12 +32,12 @@ import { PoMenuModule } from './po-menu/po-menu.module';
3032
import { PoModalModule } from './po-modal/po-modal.module';
3133
import { PoNavbarModule } from './po-navbar/po-navbar.module';
3234
import { PoOverlayModule } from './po-overlay/po-overlay.module';
33-
import { PoPageModule } from './po-page/po-page.module';
3435
import { PoPageSlideModule } from './po-page/po-page-slide/po-page-slide.module';
35-
import { PoSwitchModule } from './po-field/po-switch/po-switch.module';
36+
import { PoPageModule } from './po-page/po-page.module';
3637
import { PoPopoverModule } from './po-popover/po-popover.module';
3738
import { PoPopupModule } from './po-popup/po-popup.module';
3839
import { PoProgressModule } from './po-progress/po-progress.module';
40+
import { PoSearchModule } from './po-search';
3941
import { PoSlideModule } from './po-slide/po-slide.module';
4042
import { PoStepperModule } from './po-stepper/po-stepper.module';
4143
import { PoTableModule } from './po-table/po-table.module';
@@ -44,9 +46,7 @@ import { PoTagModule } from './po-tag/po-tag.module';
4446
import { PoToolbarModule } from './po-toolbar/po-toolbar.module';
4547
import { PoTreeViewModule } from './po-tree-view/po-tree-view.module';
4648
import { PoWidgetModule } from './po-widget/po-widget.module';
47-
import { PoSearchModule } from './po-search';
48-
import { PoBadgeModule } from './po-badge/po-badge.module';
49-
49+
import { PoToasterModule } from './po-toaster';
5050
@NgModule({
5151
imports: [
5252
PoAccordionModule,
@@ -94,7 +94,8 @@ import { PoBadgeModule } from './po-badge/po-badge.module';
9494
PoPageSlideModule,
9595
PoSwitchModule,
9696
PoSearchModule,
97-
PoBadgeModule
97+
PoBadgeModule,
98+
PoToasterModule
9899
],
99100
exports: [
100101
PoAccordionModule,
@@ -142,7 +143,8 @@ import { PoBadgeModule } from './po-badge/po-badge.module';
142143
PoPageSlideModule,
143144
PoSwitchModule,
144145
PoSearchModule,
145-
PoBadgeModule
146+
PoBadgeModule,
147+
PoToasterModule
146148
],
147149
providers: [],
148150
bootstrap: [],

‎projects/ui/src/lib/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,4 @@ export * from './po-toolbar/index';
4545
export * from './po-tree-view/index';
4646
export * from './po-widget/index';
4747
export * from './po-search/index';
48+
export * from './po-toaster/index';

‎projects/ui/src/lib/components/po-toaster/enum/po-toaster-mode.enum.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Define os modos usados no `PoToasterComponent`.
2+
export enum PoToasterMode {
3+
/** Modo Inline do componente, mostrado fixado no DOM */
4+
Inline = 'inline',
5+
6+
/** Modo Padrão do componente, mostrado como Alerta */
7+
Alert = 'alert'
8+
}

‎projects/ui/src/lib/services/po-notification/po-toaster/po-toaster-orientation.enum.ts‎ renamed to ‎projects/ui/src/lib/components/po-toaster/enum/po-toaster-orientation.enum.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
/**
2-
* @docsPrivate
3-
*
4-
* Enums para a orientação da notificação, do componente po-toaster-base.component.
5-
*/
1+
// Define as orientações possíveis para o `PoToasterComponent`.
62
export enum PoToasterOrientation {
73
/** Orientção do componente fica no rodapé */
84
Bottom,

‎projects/ui/src/lib/components/po-toaster/enum/po-toaster-type.enum.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @usedBy PoToasterComponent
3+
*
4+
* @description
5+
*
6+
* Define os tipos possíveis para o `PoToasterComponent`.
7+
*/
8+
export enum PoToasterType {
9+
/** Tipo de toaster para mensagens de erro. */
10+
Error = 'error',
11+
12+
/** Tipo de toaster para mensagens informativas. */
13+
Information = 'information',
14+
15+
/** Tipo de toaster para mensagens de sucesso. */
16+
Success = 'success',
17+
18+
/** Tipo de toaster para mensagens de atenção. */
19+
Warning = 'warning'
20+
}

‎projects/ui/src/lib/components/po-toaster/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export * from './enum/po-toaster-mode.enum';
2+
export * from './enum/po-toaster-orientation.enum';
3+
export * from './enum/po-toaster-type.enum';
4+
5+
export * from './interface/po-toaster.interface';
6+
7+
export * from './literals/po-toaster.literals';
8+
9+
export * from './po-toaster.component';
10+
export * from './po-toaster.module';

‎projects/ui/src/lib/components/po-toaster/interface/po-toaster.interface.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { PoNotification } from '../../../services/po-notification';
2+
import { PoToasterType } from '../enum/po-toaster-type.enum';
3+
4+
// Define as propriedades de um toaster.
5+
export interface PoToaster extends PoNotification {
6+
/** Referência do componente toaster. */
7+
componentRef?: any;
8+
9+
/** Posição onde a notificação aparecerá na tela. */
10+
position: number;
11+
12+
/** Tipo de notificação. */
13+
type: PoToasterType;
14+
}

‎projects/ui/src/lib/services/po-notification/po-toaster/po-toaster.literals.ts‎ renamed to ‎projects/ui/src/lib/components/po-toaster/literals/po-toaster.literals.ts‎

File renamed without changes.

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

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import { Directive, EventEmitter, Input, Output } from '@angular/core';
2+
import { PoToaster } from './interface/po-toaster.interface';
3+
import { convertToBoolean } from '../../utils/util';
4+
import { PoToasterMode } from './enum/po-toaster-mode.enum';
5+
import { PoToasterType } from './enum/po-toaster-type.enum';
6+
import { PoToasterOrientation } from './enum/po-toaster-orientation.enum';
7+
8+
/**
9+
*
10+
* @description
11+
*
12+
* 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.
13+
*
14+
* #### Acessibilidade tratada no componente
15+
*
16+
* 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:
17+
*
18+
* - Permitir a interação via teclado (2.1.1: Keyboard (A));
19+
* - Permitir que o usuário feche facilmente o toaster e não retirar o foco de onde está. (2.2.4: Interrupções (AAA));
20+
* - Preservar o foco visível na navegação via teclado. (2.4.7: Foco visível (A));
21+
* - Áreas de clique ou toque para elementos interativos devem ter pelo menos 44x44 pixels (2.5.5: Área de clique (AAA));
22+
*
23+
* #### Tokens customizáveis
24+
*
25+
* É possível alterar o estilo do componente usando os seguintes tokens (CSS):
26+
*
27+
* > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
28+
*
29+
* | Propriedade | Descrição | Valor Padrão |
30+
* |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
31+
* | **Default Values** | | |
32+
* | `--font-family` | Família tipográfica usada | `var(--font-family-theme)` |
33+
* | `--font-color` | Cor principal do texto | `var(--color-neutral-dark-90)` |
34+
* | `--font-color-support` | Cor principal do texto de supporte | `var(--color-neutral-dark-80)` |
35+
* | `--border-radius` | Contém o valor do raio dos cantos do elemento  | `var(--border-radius-md)` |
36+
* | **Type Success** | | |
37+
* | `--color-success` | Cor principal no tipo success | `var(--color-feedback-positive-base)` |
38+
* | `--background-success` | Cor de fundo principal no tipo success | `var(--color-feedback-positive-lightest)` |
39+
* | `--border-color-success` | Cor da borda principal tipo success | `var(--color-feedback-positive-lighter)` |
40+
* | **Type Error** | | |
41+
* | `--color-error` | Cor principal no tipo error | `var(--color-feedback-negative-base)` |
42+
* | `--background-error` | Cor de fundo principal no tipo error | `var(--color-feedback-negative-lightest)` |
43+
* | `--border-color-error` | Cor da borda principal tipo error | `var(--color-feedback-negative-lighter)` |
44+
* | **Type Warning** | | |
45+
* | `--color-icon-warning` | Cor principal do icone no tipo warning | `var(--color-neutral-dark-90)` |
46+
* | `--color-warning` | Cor principal no tipo warning | `var(--color-feedback-warning-base)` |
47+
* | `--background-warning` | Cor de fundo principal no tipo warning | `var(--color-feedback-warning-lightest)` |
48+
* | `--border-color-warning` | Cor da borda principal tipo warning | `var(--color-feedback-warning-lighter)` |
49+
* | **Type Info** | | |
50+
* | `--color-info` | Cor principal no tipo info | `var(--color-feedback-info-base)` |
51+
* | `--background-info` | Cor de fundo principal no tipo info | `var(--color-feedback-info-lightest)` |
52+
* | `--border-color-info` | Cor da borda principal tipo info | `var(--color-feedback-info-lighter)` |
53+
*
54+
*/
55+
@Directive()
56+
export abstract class PoToasterBaseComponent {
57+
private _isHide: boolean;
58+
59+
/**
60+
* @optional
61+
*
62+
* @description
63+
*
64+
* Ação para a notificação.
65+
*/
66+
@Input('p-action') action: Function;
67+
68+
/**
69+
* @optional
70+
*
71+
* @description
72+
*
73+
* Label do botão quando houver uma ação definida.
74+
*/
75+
@Input('p-action-label') actionLabel: string;
76+
77+
/**
78+
* @optional
79+
*
80+
* @description
81+
*
82+
* Mensagem a ser exibida na notificação.
83+
*/
84+
@Input('p-message') message: string;
85+
86+
/**
87+
* @optional
88+
*
89+
* @description
90+
*
91+
* Define se o Toaster esta invisivel.
92+
*
93+
* @default `false`
94+
*/
95+
@Input({ alias: 'p-hide', transform: convertToBoolean }) isHide: boolean = false;
96+
97+
/**
98+
* @optional
99+
*
100+
* @description
101+
*
102+
* Evento emitido quando o valor de `isHide` é alterado.
103+
*
104+
*/
105+
@Output('p-hide-change') isHideChange = new EventEmitter<boolean>();
106+
107+
/**
108+
* @optional
109+
*
110+
* @description
111+
*
112+
* Exibe botão de fechar no toaster modo inline.
113+
*
114+
* @default `true`
115+
*/
116+
@Input({ alias: 'p-show-close', transform: convertToBoolean }) showClose: boolean = true;
117+
118+
/**
119+
* @optional
120+
*
121+
* @description
122+
*
123+
* Mensagem de suporte a ser exibida na notificação.
124+
*/
125+
@Input('p-support-message') supportMessage?: string;
126+
127+
/**
128+
* @optional
129+
*
130+
* @description
131+
*
132+
* Determina o tipo de notificação.
133+
*
134+
* Valores aceitos: `error`, `information`, `success` e `warning`.
135+
* @see PoToasterType
136+
*
137+
* @default `PoToasterType.Information`
138+
*/
139+
@Input('p-type') type: PoToasterType = PoToasterType.Information;
140+
141+
// Determina o modo do Toaster
142+
@Input('p-mode') mode: PoToasterMode = PoToasterMode.Inline;
143+
144+
// Orientação da notificação, a mesma pode ser exibida na parte superior ou inferior da página.
145+
orientation: PoToasterOrientation = PoToasterOrientation.Bottom;
146+
147+
// ComponentRef
148+
componentRef: any;
149+
150+
// Posição para notificação aparecer na tela.
151+
position: number;
152+
153+
// Fecha a notificação.
154+
abstract close(): void;
155+
156+
// Altera a posição da notificação.
157+
abstract changePosition(value: number): void;
158+
159+
// Configura o componente po-toaster de acordo com as definições do usuário.
160+
abstract configToaster(poToaster: PoToaster): void;
161+
}

‎projects/ui/src/lib/components/po-toaster/po-toaster.component.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<div
2+
#toaster
3+
class="
4+
po-toaster
5+
{{ getToasterType() }}
6+
{{ getToasterPosition() }}
7+
"
8+
[class.po-toaster-inline]="isInline()"
9+
[hidden]="isHide"
10+
>
11+
<div class="po-toaster-icon" [ngClass]="isAlert() ? 'po-toaster-icon-default' : 'po-toaster-decoration'">
12+
<po-icon *ngIf="isAlert()" [p-icon]="getIcon()"></po-icon>
13+
</div>
14+
15+
<po-icon class="po-toaster-inline-icon" *ngIf="isInline()" [p-icon]="getIcon()"></po-icon>
16+
17+
<div class="po-toaster-actions">
18+
<div class="po-toaster-message">
19+
{{ message }}
20+
<div *ngIf="supportMessage" class="po-toaster-support-message">{{ supportMessage }}</div>
21+
</div>
22+
23+
<div class="po-toaster-action">
24+
<po-button
25+
*ngIf="action && actionLabel"
26+
(p-click)="poToasterAction($event)"
27+
[p-label]="actionLabel"
28+
p-kind="tertiary"
29+
></po-button>
30+
</div>
31+
</div>
32+
33+
<div *ngIf="hasClose()" class="po-toaster-close">
34+
<div class="po-toaster-divider"></div>
35+
<po-button
36+
#buttonClose
37+
class="po-toaster-button-close"
38+
(p-click)="onButtonClose($event)"
39+
p-icon="ICON_CLOSE"
40+
p-kind="tertiary"
41+
></po-button>
42+
</div>
43+
</div>

0 commit comments

Comments
 (0)