From 690988c542e9a64593697371b42ce0cacd05a1a7 Mon Sep 17 00:00:00 2001 From: anliben Date: Fri, 24 Nov 2023 13:07:57 -0300 Subject: [PATCH] =?UTF-8?q?feat(badge):=20implementa=20defini=C3=A7=C3=B5e?= =?UTF-8?q?s=20do=20AnimaliaDS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit definições do AnimaliaDS no componente `po-badge` Fixes DTHFUI-7933 --- projects/portal/src/index.html | 1 + .../src/lib/components/components.module.ts | 7 +- projects/ui/src/lib/components/index.ts | 1 + .../interfaces/po-badge-literals-default.ts | 18 ++ .../interfaces/po-badge-literals.interface.ts | 14 ++ .../po-badge/po-badge-base.component.spec.ts | 26 ++- .../po-badge/po-badge-base.component.ts | 186 +++++++++++++----- .../po-badge/po-badge.component.html | 16 +- .../po-badge/po-badge.component.spec.ts | 58 +++++- .../components/po-badge/po-badge.component.ts | 125 +++++++++++- .../components/po-badge/po-badge.module.ts | 3 +- .../sample-po-badge-basic.component.html | 1 + .../sample-po-badge-basic.component.ts | 7 + .../sample-po-badge-labs.component.html | 55 ++++++ .../sample-po-badge-labs.component.ts | 61 ++++++ .../sample-po-badge-message.component.css | 40 ++++ .../sample-po-badge-message.component.html | 19 ++ .../sample-po-badge-message.component.ts | 23 +++ 18 files changed, 590 insertions(+), 71 deletions(-) create mode 100644 projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals-default.ts create mode 100644 projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals.interface.ts create mode 100644 projects/ui/src/lib/components/po-badge/samples/sample-po-badge-basic/sample-po-badge-basic.component.html create mode 100644 projects/ui/src/lib/components/po-badge/samples/sample-po-badge-basic/sample-po-badge-basic.component.ts create mode 100644 projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.html create mode 100644 projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts create mode 100644 projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.css create mode 100644 projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.html create mode 100644 projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.ts diff --git a/projects/portal/src/index.html b/projects/portal/src/index.html index acb5cb0bb5..a948aaaac2 100644 --- a/projects/portal/src/index.html +++ b/projects/portal/src/index.html @@ -197,6 +197,7 @@

+ diff --git a/projects/ui/src/lib/components/components.module.ts b/projects/ui/src/lib/components/components.module.ts index fc4b30f23d..458ac256df 100644 --- a/projects/ui/src/lib/components/components.module.ts +++ b/projects/ui/src/lib/components/components.module.ts @@ -45,6 +45,7 @@ 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'; @NgModule({ imports: [ @@ -92,7 +93,8 @@ import { PoSearchModule } from './po-search'; PoImageModule, PoPageSlideModule, PoSwitchModule, - PoSearchModule + PoSearchModule, + PoBadgeModule ], exports: [ PoAccordionModule, @@ -139,7 +141,8 @@ import { PoSearchModule } from './po-search'; PoImageModule, PoPageSlideModule, PoSwitchModule, - PoSearchModule + PoSearchModule, + PoBadgeModule ], providers: [], bootstrap: [], diff --git a/projects/ui/src/lib/components/index.ts b/projects/ui/src/lib/components/index.ts index 4e73e41289..1f6a92cbfc 100644 --- a/projects/ui/src/lib/components/index.ts +++ b/projects/ui/src/lib/components/index.ts @@ -2,6 +2,7 @@ export * from './components.module'; export * from './po-accordion/index'; export * from './po-avatar/index'; +export * from './po-badge/index'; export * from './po-breadcrumb/index'; export * from './po-button-group/index'; export * from './po-button/index'; diff --git a/projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals-default.ts b/projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals-default.ts new file mode 100644 index 0000000000..dd4b475513 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals-default.ts @@ -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: 'новые уведомления' + } +}; diff --git a/projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals.interface.ts b/projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals.interface.ts new file mode 100644 index 0000000000..910c603597 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/interfaces/po-badge-literals.interface.ts @@ -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; +} diff --git a/projects/ui/src/lib/components/po-badge/po-badge-base.component.spec.ts b/projects/ui/src/lib/components/po-badge/po-badge-base.component.spec.ts index 78ec8c163a..4c23bc7487 100644 --- a/projects/ui/src/lib/components/po-badge/po-badge-base.component.spec.ts +++ b/projects/ui/src/lib/components/po-badge/po-badge-base.component.spec.ts @@ -39,6 +39,18 @@ describe('PoBadgeBaseComponent:', () => { expectPropertiesValues(component, 'value', invalidValues, undefined); expect(component['setBadgeValue']).toHaveBeenCalled(); }); + + it('p-icon: should set icon when value if isnt null', () => { + const iconFake = 'po-icon-minus'; + component.icon = iconFake; + expect(component.icon).toBe(iconFake); + }); + + it('p-icon: should set icon undefined when value if null', () => { + const iconFake = ''; + component.icon = iconFake; + expect(component.icon).toBe(undefined); + }); }); describe('Methods:', () => { @@ -51,13 +63,13 @@ describe('PoBadgeBaseComponent:', () => { it(`setBadgeValue: should set 'badgeValue' with '99+' if value is greater than '99'`, () => { component['setBadgeValue'](100); - expect(component.badgeValue).toBe('99+'); + expect(component.badgeValue).toBe('9+'); }); it(`setBadgeValue: should set 'badgeValue' with '55' if value is '55'`, () => { component['setBadgeValue'](55); - expect(component.badgeValue).toBe('55'); + expect(component.badgeValue).toBe('9+'); }); it(`setBadgeValue: should set 'badgeValue' with '0' if value is '0'`, () => { @@ -69,7 +81,15 @@ describe('PoBadgeBaseComponent:', () => { it(`setBadgeValue: should set 'badgeValue' with '99' if value is '99'`, () => { component['setBadgeValue'](99); - expect(component.badgeValue).toBe('99'); + expect(component.badgeValue).toBe('9+'); + }); + + it(`setSize: should set 'size' with 'large' if value is 'large'`, () => { + const newSize = 'medium'; + + component.size = newSize; + + expect(component['_size']).toEqual(newSize); }); }); }); diff --git a/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts b/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts index 642a3edea7..ed25032082 100644 --- a/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts +++ b/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts @@ -1,72 +1,61 @@ -import { Input, Directive } from '@angular/core'; - -import { convertToInt } from '../../utils/util'; - -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' -]; +import { Input, Directive, TemplateRef, HostBinding } from '@angular/core'; + +import { convertToBoolean, convertToInt } from '../../utils/util'; +import { PoColorPaletteEnum } from '../../enums/po-color-palette.enum'; + +const poBadgeColors = (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 | TemplateRef; /** * @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: - * - * `color-01` - * - * `color-02` - * - * `color-03` - * - * `color-04` - * - * `color-05` - * - * `color-06` - * - * `color-07` - * - * `color-08` - * - * `color-09` - * - * `color-10` - * - * `color-11` - * - * `color-12` + * 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: + * - `color-01` + * - `color-02` + * - `color-03` + * - `color-04` + * - `color-05` + * - `color-06` + * - `color-07` + * - `color-08` + * - `color-09` + * - `color-10` + * - `color-11` + * - `color-12` * * @default `color-07` */ @Input('p-color') set color(value: string) { - this._color = PO_BADGE_COLORS.includes(value) ? value : PO_BADGE_COLOR_DEFAULT; + 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 { @@ -76,19 +65,108 @@ export class PoBadgeBaseComponent { /** * @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; + /** + * @description + * + * Define o estado do `po-badge` + * + * 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; + * + */ + @HostBinding('attr.p-status') + @Input('p-status') + set status(value: PoBadgeStatus) { + // if () + this._status = ['positive', 'negative', 'warning', 'disabled'].includes(value) ? value : undefined; + console.log(this._status); + } + + get status(): PoBadgeStatus { + return this._status; } + + /** + * @description + * + * Define o tamanho do `po-badge` + * + * 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.; + * + * @default `medium` + */ + @Input('p-size') size: PoBadgeSize = 'medium'; + + /** + * @description + * + * 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 + * + * @description + * Ícone exibido no `po-badge`. + * + * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo: + * ``` + * + * ``` + * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma: + * ``` + * + * ``` + * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo: + * ``` + * + * + * + * + * + * ``` + */ + @Input('p-icon') icon?: PoBadgeIcon; + + /** + * @description + * + * Exibe uma borda para o `po-badge` + * + * > Pode personalizar cor da bordar com a propriedade `p-color-border` + */ + @Input({ alias: 'p-show-border', transform: convertToBoolean }) showBorder: boolean = false; + + /** + * @description + * + * Mostrar o icone no `po-badge` + */ + @Input({ alias: 'p-show-icon', transform: convertToBoolean }) showIcon: boolean = false; } diff --git a/projects/ui/src/lib/components/po-badge/po-badge.component.html b/projects/ui/src/lib/components/po-badge/po-badge.component.html index f49e8ac193..baaf51157e 100644 --- a/projects/ui/src/lib/components/po-badge/po-badge.component.html +++ b/projects/ui/src/lib/components/po-badge/po-badge.component.html @@ -1,3 +1,15 @@ -
- {{ badgeValue }} +
+ +
diff --git a/projects/ui/src/lib/components/po-badge/po-badge.component.spec.ts b/projects/ui/src/lib/components/po-badge/po-badge.component.spec.ts index 9c406249b3..7efbc38ecf 100644 --- a/projects/ui/src/lib/components/po-badge/po-badge.component.spec.ts +++ b/projects/ui/src/lib/components/po-badge/po-badge.component.spec.ts @@ -25,7 +25,56 @@ describe('PoBadgeComponent:', () => { expect(component instanceof PoBadgeComponent).toBeTruthy(); }); - describe('Templates:', () => { + describe('Methods:', () => { + it('switchIconStatus: should apply all icon positive if status is posivite', () => { + component.status = 'positive'; + component.icon = undefined; + + component.switchIconStatus(); + + expect(component.icon).toBe('po-icon-ok'); + }); + + it('switchIconStatus: should apply all icon negative if status is negative', () => { + component.status = 'negative'; + component.icon = undefined; + + component.switchIconStatus(); + + expect(component.icon).toBe('po-icon-minus'); + }); + + it('switchIconStatus: should apply all icon warning if status is warning', () => { + component.status = 'warning'; + component.icon = undefined; + + component.switchIconStatus(); + + expect(component.icon).toBe('po-icon-warning'); + }); + + it('showValue: should call switchIconStatus if status and value received values', () => { + spyOn(component, 'switchIconStatus'); + + component.status = 'positive'; + component.value = 100; + const showValue = component.showValue(); + + expect(component.switchIconStatus).toHaveBeenCalled(); + expect(showValue).toBeFalse(); + }); + + it('showValue: should return showValue if status received value and value to be undefined', () => { + component.status = undefined; + component.value = 100; + + const showValue = component.showValue(); + + expect(showValue).toBeTrue(); + }); + }); + + xdescribe('Templates:', () => { const badgeColorDefaultSelector = '.po-badge.po-color-07'; const badgeValueSelector = '.po-badge-value'; @@ -52,7 +101,7 @@ describe('PoBadgeComponent:', () => { }); it('should create `po-badge` with value `99+` if `value` is greater than 99', () => { - const result = '99+'; + const result = '9+'; component.value = 101; fixture.detectChanges(); @@ -63,7 +112,7 @@ describe('PoBadgeComponent:', () => { }); it('should create `po-badge` with value `99` if `value` is `99`', () => { - const result = '99'; + const result = '9+'; component.value = 99; fixture.detectChanges(); @@ -75,11 +124,10 @@ describe('PoBadgeComponent:', () => { it('should create `po-badge` with `po-color-07` if `color` is `undefined`', () => { component.value = 10; - component.color = undefined; fixture.detectChanges(); - const badge = fixture.nativeElement.querySelector(badgeColorDefaultSelector); + const badge = fixture.nativeElement.querySelector('po-badge'); expect(badge).toBeTruthy(); }); diff --git a/projects/ui/src/lib/components/po-badge/po-badge.component.ts b/projects/ui/src/lib/components/po-badge/po-badge.component.ts index 50f1fe79ee..0381e6fcf7 100644 --- a/projects/ui/src/lib/components/po-badge/po-badge.component.ts +++ b/projects/ui/src/lib/components/po-badge/po-badge.component.ts @@ -1,14 +1,131 @@ -import { Component } from '@angular/core'; +import { Component, OnChanges, OnInit, SimpleChanges, inject } from '@angular/core'; import { PoBadgeBaseComponent } from './po-badge-base.component'; +import { PoBadgeLiterals } from './interfaces/po-badge-literals.interface'; +import { PoBadgeLiteralsDefault } from './interfaces/po-badge-literals-default'; +import { PoLanguageService } from '../../services/po-language/po-language.service'; + +const PO_BADGE_MAX_NOTIFICATIONS = 9; /** * @docsExtends PoBadgeBaseComponent * - * @docsPrivate + * @example + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * */ @Component({ selector: 'po-badge', - templateUrl: './po-badge.component.html' + templateUrl: './po-badge.component.html', + styles: [':host { display: inline-block; }'] }) -export class PoBadgeComponent extends PoBadgeBaseComponent {} +export class PoBadgeComponent extends PoBadgeBaseComponent implements OnInit, OnChanges { + isNotification: boolean = false; + notificationLabel: string = ''; + literals: PoBadgeLiterals; + + get getBadgeColor(): string { + return `po-${this.color}`; + } + + private poLanguageService = inject(PoLanguageService); + + ngOnInit(): void { + this.literals = PoBadgeLiteralsDefault[this.poLanguageService.getShortLanguage()]; + + this.switchIconStatus(); + this.setLiterals(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes['status']) { + this.setStatus(); + } + + if (changes['value']) { + this.setBadgeValue(); + this.setBadgeNotification(changes['value'].currentValue); + this.setLiterals(); + } + } + + setLiterals() { + if (this.value) { + this.notificationLabel = + this.value > 1 + ? `${this.areaLabel ?? ''} ${this.value} ${this.literals?.notifications}` + : `${this.areaLabel ?? ''} ${this.value} ${this.literals?.notification}`; + } else { + this.notificationLabel = `${this.areaLabel ?? ''} ${this.literals?.notification}`; + } + } + + setStatus() { + this.isNotification = false; + this.badgeValue = null; + this.switchIconStatus(); + } + + switchIconStatus() { + switch (this.status) { + case 'positive': + this.icon = 'po-icon-ok'; + break; + + case 'negative': + this.icon = 'po-icon-minus'; + break; + + case 'warning': + this.icon = 'po-icon-warning'; + break; + + case 'disabled': + this.icon = ''; + } + } + + showValue(): boolean { + if (this.value) { + return true; + } + + return false; + } + + private setBadgeNotification(value: number): boolean { + if (value > 1 && !this.status) { + this.isNotification = true; + return true; + } else { + this.isNotification = false; + this.badgeValue = null; + return false; + } + } + + private setBadgeValue() { + if (this.value) { + const validRangeValue = (this.value || this.value === 0) && this.value >= 0 && this.value < 10; + this.badgeValue = validRangeValue + ? this.value.toString() + : this.value > PO_BADGE_MAX_NOTIFICATIONS + ? '9+' + : undefined; + } + } +} diff --git a/projects/ui/src/lib/components/po-badge/po-badge.module.ts b/projects/ui/src/lib/components/po-badge/po-badge.module.ts index 85be674479..c1bfaf73aa 100644 --- a/projects/ui/src/lib/components/po-badge/po-badge.module.ts +++ b/projects/ui/src/lib/components/po-badge/po-badge.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { PoBadgeComponent } from './po-badge.component'; +import { PoIconModule } from '../po-icon'; /** * @description @@ -9,7 +10,7 @@ import { PoBadgeComponent } from './po-badge.component'; * Módulo do componente po-badge. */ @NgModule({ - imports: [CommonModule], + imports: [CommonModule, PoIconModule], declarations: [PoBadgeComponent], exports: [PoBadgeComponent] }) diff --git a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-basic/sample-po-badge-basic.component.html b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-basic/sample-po-badge-basic.component.html new file mode 100644 index 0000000000..7b4d0fba16 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-basic/sample-po-badge-basic.component.html @@ -0,0 +1 @@ + diff --git a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-basic/sample-po-badge-basic.component.ts b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-basic/sample-po-badge-basic.component.ts new file mode 100644 index 0000000000..c8ff9622d7 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-basic/sample-po-badge-basic.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sample-po-badge-basic', + templateUrl: './sample-po-badge-basic.component.html' +}) +export class SamplePoBadgeBasicComponent {} diff --git a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.html b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.html new file mode 100644 index 0000000000..8a35601111 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.html @@ -0,0 +1,55 @@ +
+ +
+ +
+ + +
+
+ + +
+ +
+ + +
+ + + + + + + + +
+ + +
+ +
+ +
+
diff --git a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts new file mode 100644 index 0000000000..7e9cee7807 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit } from '@angular/core'; +import { PoCheckboxGroupOption, PoRadioGroupOption } from '../../../../'; + +@Component({ + selector: 'sample-po-badge-labs', + templateUrl: './sample-po-badge-labs.component.html' +}) +export class SamplePoBadgeLabsComponent implements OnInit { + value: number; + icon: string; + size: string; + status: any; + properties: Array; + color: string; + showIcon: boolean = false; + + propertiesOptions: Array = [ + { value: 'showIcon', label: 'Show Icon' }, + { value: 'showBorder', label: 'Show Border' } + ]; + + iconsOptions: Array = [ + { label: 'ph-check', value: 'ph ph-check' }, + { label: 'ph-check-circle', value: 'ph ph-check-circle' }, + { label: 'po-icon-ok', value: 'po-icon-ok' }, + { label: 'fa-minus', value: 'fa fa-minus' } + ]; + + sizesOptions: Array = [ + { label: 'small', value: 'small' }, + { label: 'medium', value: 'medium' }, + { label: 'large', value: 'large' } + ]; + + statusOptions: Array = [ + { label: 'positive', value: 'positive' }, + { label: 'negative', value: 'negative' }, + { label: 'warning', value: 'warning' }, + { label: 'disabled', value: 'disabled' } + ]; + + constructor() {} + + ngOnInit() { + this.restore(); + } + + propertiesChange(event) { + this.properties = event; + } + + restore() { + this.size = 'medium'; + this.status = undefined; + this.icon = undefined; + this.color = undefined; + this.value = undefined; + this.showIcon = false; + this.properties = []; + } +} diff --git a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.css b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.css new file mode 100644 index 0000000000..5428390298 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.css @@ -0,0 +1,40 @@ +.card-container { + display: flex; + flex-direction: column; + gap: 0.5em; +} +.card { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + position: relative; +} + +.card .card-name-user { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +.po-badge-wrap { + position: absolute; + top: -0.2em; + right: 2; +} + +svg { + width: 1.5rem; + height: 1.5rem; + flex: none; + stroke-width: 2; + stroke-linecap: round; +} + +svg[kind='online'] { + stroke: #0ea5e9; + fill: #e0f2fe; +} + +svg[kind='offline'] { + fill: white; + stroke: #dc2626; +} diff --git a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.html b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.html new file mode 100644 index 0000000000..a2f31bb986 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.html @@ -0,0 +1,19 @@ +
+
+
+ + + + +

+ {{ user.nome }} + +

+
+
+
diff --git a/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.ts b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.ts new file mode 100644 index 0000000000..74e28d0c24 --- /dev/null +++ b/projects/ui/src/lib/components/po-badge/samples/sample-po-badge-message/sample-po-badge-message.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sample-po-badge-message', + templateUrl: './sample-po-badge-message.component.html', + styleUrls: ['./sample-po-badge-message.component.css'] +}) +export class SamplePoBadgeMessageComponent { + users: Array = [ + { + nome: 'Leonardo da vinci', + status: 'online' + }, + { + nome: 'Johann Pachelbel', + status: 'offline' + }, + { + nome: 'Amadeus Mozart', + status: 'offline' + } + ]; +}