-
Notifications
You must be signed in to change notification settings - Fork 212
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(badge): implementa definições do AnimaliaDS
implementa definições do AnimaliaDS no componente `po-badge` Fixes DTHFUI-7933
- Loading branch information
Showing
17 changed files
with
709 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals-default.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| export const PoBadgeLiteralsDefault = { | ||
| en: { | ||
| notification: 'new notification', | ||
| notifications: 'new notifications' | ||
| }, | ||
| es: { | ||
| notification: 'nueva notificación', | ||
| notifications: 'nuevas notificaciones' | ||
| }, | ||
| pt: { | ||
| notification: 'nova notificação', | ||
| notifications: 'nova notificaçoes' | ||
| }, | ||
| ru: { | ||
| notification: 'новое уведомление', | ||
| notifications: 'новые уведомления' | ||
| } | ||
| }; |
14 changes: 14 additions & 0 deletions
14
projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals.interface.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * @usedBy PoBadgeComponent | ||
| * | ||
| * @description | ||
| * | ||
| * Interface para definição das literais usadas no `po-badge`. | ||
| */ | ||
| export interface PoBadgeLiterals { | ||
| /** Texto exibido na propriedade `aria-label` do `po-badge` ao ter somente uma notificação. */ | ||
| notification: string; | ||
|
|
||
| /** Texto exibido na propriedade `aria-label` do `po-badge` ao ter mais de uma notificação. */ | ||
| notifications: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
177 changes: 125 additions & 52 deletions
177
projects/ui/src/lib/components/po-badge/po-badge-base.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,94 +1,167 @@ | ||
| import { Input, Directive } from '@angular/core'; | ||
| import { Input, Directive, TemplateRef, HostBinding } from '@angular/core'; | ||
|
|
||
| import { convertToInt } from '../../utils/util'; | ||
| import { convertToBoolean, convertToInt } from '../../utils/util'; | ||
| import { PoColorPaletteEnum } from '../../enums/po-color-palette.enum'; | ||
|
|
||
| const PO_BADGE_COLORS = [ | ||
| 'color-01', | ||
| 'color-02', | ||
| 'color-03', | ||
| 'color-04', | ||
| 'color-05', | ||
| 'color-06', | ||
| 'color-07', | ||
| 'color-08', | ||
| 'color-09', | ||
| 'color-10', | ||
| 'color-11', | ||
| 'color-12' | ||
| ]; | ||
| const poBadgeColors = (<any>Object).values(PoColorPaletteEnum); | ||
| const PO_BADGE_COLOR_DEFAULT = 'color-07'; | ||
| export type PoBadgeStatus = 'disabled' | 'negative' | 'positive' | 'warning'; | ||
| export type PoBadgeSize = 'small' | 'medium' | 'large'; | ||
| export type PoBadgeIcon = string | boolean | TemplateRef<void>; | ||
|
|
||
| /** | ||
| * @description | ||
| * | ||
| * @docsPrivate | ||
| * | ||
| * Componente utilizado no `po-menu` para exibir por exemplo a quantidade de tarefas pendentes. | ||
| * Utilizado para exibir a quantidade de notificações. | ||
| */ | ||
| @Directive() | ||
| export class PoBadgeBaseComponent { | ||
| badgeValue: string; | ||
| customColor: string; | ||
|
|
||
| private _color: string; | ||
| private _color: string = PO_BADGE_COLOR_DEFAULT; | ||
| private _value: number; | ||
| private _status?: PoBadgeStatus; | ||
| private _areaLabel: string; | ||
|
|
||
| /** | ||
| * @optional | ||
| * | ||
| * @description | ||
| * | ||
| * Define a cor de fundo do componente e aceita os valores: | ||
| * | ||
| * <span class="dot po-color-01"></span> `color-01` | ||
| * Define um `aria-label` para o `po-badge` | ||
| */ | ||
| @Input('p-area-label') set areaLabel(value: string) { | ||
| if (value === undefined) { | ||
| this._areaLabel = ''; | ||
| } | ||
| this._areaLabel = value; | ||
| } | ||
|
|
||
| get areaLabel(): string { | ||
| return this._areaLabel; | ||
| } | ||
|
|
||
| /** | ||
| * @optional | ||
| * | ||
| * <span class="dot po-color-02"></span> `color-02` | ||
| * @description | ||
| * | ||
| * <span class="dot po-color-03"></span> `color-03` | ||
| * Determina a cor do `po-badge`. As maneiras de customizar as cores são: | ||
| * - Hexadeximal, por exemplo `#c64840`; | ||
| * - RGB, como `rgb(0, 0, 165)`; | ||
| * - O nome da cor, por exemplo `blue`; | ||
| * - Usando uma das cores do tema do PO: | ||
| * Valores válidos: | ||
| * - <span class="dot po-color-01"></span> `color-01` | ||
| * - <span class="dot po-color-02"></span> `color-02` | ||
| * - <span class="dot po-color-03"></span> `color-03` | ||
| * - <span class="dot po-color-04"></span> `color-04` | ||
| * - <span class="dot po-color-05"></span> `color-05` | ||
| * - <span class="dot po-color-06"></span> `color-06` | ||
| * - <span class="dot po-color-07"></span> `color-07` | ||
| * - <span class="dot po-color-08"></span> `color-08` | ||
| * - <span class="dot po-color-09"></span> `color-09` | ||
| * - <span class="dot po-color-10"></span> `color-10` | ||
| * - <span class="dot po-color-11"></span> `color-11` | ||
| * - <span class="dot po-color-12"></span> `color-12` | ||
| * | ||
| * <span class="dot po-color-04"></span> `color-04` | ||
| * @default `color-07` | ||
| */ | ||
| @Input('p-color') set color(value: string) { | ||
| if (value !== undefined && value.includes('color')) { | ||
| this._color = poBadgeColors.includes(value) ? value : PO_BADGE_COLOR_DEFAULT; | ||
| } else { | ||
| CSS.supports('background-color', value) ? (this.customColor = value) : (this.customColor = undefined); | ||
| } | ||
| } | ||
|
|
||
| get color(): string { | ||
| return this._color; | ||
| } | ||
|
|
||
| /** | ||
| * @optional | ||
| * | ||
| * <span class="dot po-color-05"></span> `color-05` | ||
| * @description | ||
| * Ícone exibido no `po-badge`. | ||
| * | ||
| * Para exibir icone do status atual declare a propriedade `p-icon`. conforme exemplo abaixo: | ||
| * ``` | ||
| * <po-badge p-icon="true"></po-badge> | ||
| * ``` | ||
| * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo: | ||
| * ``` | ||
| * <po-badge p-icon="po-icon-user"></po-badge> | ||
| * ``` | ||
| * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: | ||
| * ``` | ||
| * <po-badge p-icon="fa fa-podcast"></po-badge> | ||
| * ``` | ||
| * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: | ||
| * ``` | ||
| * <po-badge [p-icon]="template"></po-badge> | ||
| * | ||
| * <ng-template #template> | ||
| * <ion-icon style="font-size: inherit" name="heart"></ion-icon> | ||
| * </ng-template> | ||
| * ``` | ||
| */ | ||
| @Input('p-icon') icon: PoBadgeIcon; | ||
|
|
||
| /** | ||
| * @description | ||
| * | ||
| * <span class="dot po-color-06"></span> `color-06` | ||
| * Define o estado do `po-badge` | ||
| * | ||
| * <span class="dot po-color-07"></span> `color-07` | ||
| * Valores válidos: | ||
| * - `positive`: Define a cor do `po-badge` com a cor de feedback positivo.; | ||
| * - `negative`: Define a cor do `po-badge` com a cor de feedback negative.; | ||
| * - `warning`: Define a cor do `po-badge` com a cor de feedback warning.; | ||
| * - `disabled`: Define a cor do `po-badge` com a cor de feedback disabled; | ||
| * | ||
| * <span class="dot po-color-08"></span> `color-08` | ||
| */ | ||
| @HostBinding('attr.p-status') | ||
| @Input('p-status') | ||
| set status(value: PoBadgeStatus) { | ||
| this._status = ['positive', 'negative', 'warning', 'disabled'].includes(value) ? value : undefined; | ||
| } | ||
|
|
||
| get status(): PoBadgeStatus { | ||
| return this._status; | ||
| } | ||
|
|
||
| /** | ||
| * @description | ||
| * | ||
| * <span class="dot po-color-09"></span> `color-09` | ||
| * Define o tamanho do `po-badge` | ||
| * | ||
| * <span class="dot po-color-10"></span> `color-10` | ||
| * Valores válidos: | ||
| * - `small`: o `po-badge` fica do tamanho padrão, com 8px de altura.; | ||
| * - `medium`: o `po-badge` fica do tamanho padrão, com 16px de altura.; | ||
| * - `large`: o `po-badge` fica do tamanho padrão, com 24px de altura.; | ||
| * | ||
| * <span class="dot po-color-11"></span> `color-11` | ||
| * @default `medium` | ||
| */ | ||
| @Input('p-size') size: PoBadgeSize = 'medium'; | ||
|
|
||
| /** | ||
| * @description | ||
| * | ||
| * <span class="dot po-color-12"></span> `color-12` | ||
| * Exibe uma borda para o `po-badge` | ||
| * | ||
| * @default `color-07` | ||
| * > Pode personalizar cor da bordar com a propriedade `p-color-border` | ||
| */ | ||
| @Input('p-color') set color(value: string) { | ||
| this._color = PO_BADGE_COLORS.includes(value) ? value : PO_BADGE_COLOR_DEFAULT; | ||
| } | ||
|
|
||
| get color(): string { | ||
| return this._color; | ||
| } | ||
| @Input({ alias: 'p-show-border', transform: convertToBoolean }) showBorder: boolean = false; | ||
|
|
||
| /** | ||
| * @description | ||
| * | ||
| * Número exibido no componente, caso o mesmo seja maior que 99 o valor exibido será 99+. | ||
| * Número exibido no componente, caso o mesmo seja maior que 9 o valor exibido será 9+. | ||
| */ | ||
| @Input('p-value') set value(value: number) { | ||
| this._value = convertToInt(value); | ||
| this.setBadgeValue(this._value); | ||
| this._value = value <= 0 ? 0 : convertToInt(value); | ||
| } | ||
|
|
||
| get value(): number { | ||
| return this._value; | ||
| } | ||
|
|
||
| private setBadgeValue(value: number) { | ||
| const validRangeValue = (value || value === 0) && value >= 0 && value < 100; | ||
| this.badgeValue = validRangeValue ? value.toString() : value > 99 ? '99+' : undefined; | ||
| } | ||
| } |
Oops, something went wrong.