Skip to content

Commit 79d15f2

Browse files
CSimoesJrrafaellmarques
CSimoesJr
authored and
rafaellmarques
committed
feat(accordion): implementa definições do AnimaliaDS
Implementa definições do AnimaliaDS no Accordion fixes DTHFUI-7691
1 parent c2772ce commit 79d15f2

19 files changed

+807
-63
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './interfaces/po-accordion-literals.interface';
12
export * from './po-accordion-item/po-accordion-item.component';
23
export * from './po-accordion.component';
34

‎projects/ui/src/lib/components/po-accordion/interfaces/po-accordion-literals.interface.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* @usedBy PoAccordionComponent
3+
*
4+
* @description
5+
*
6+
* Interface para definição das literais usadas no `po-accordion`.
7+
*/
8+
export interface PoAccordionLiterals {
9+
/** Label do gerenciador de Accordion para expandir todos os itens. */
10+
expandAllItems?: string;
11+
12+
/** Label do gerenciador de Accordion para colapsar todos os itens */
13+
closeAllItems?: string;
14+
}

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

Lines changed: 99 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,104 @@
1-
import { PoAccordionBaseComponent } from './po-accordion-base.component';
1+
import { poLocaleDefault } from '../../services';
2+
import { PoLanguageService } from '../../services/po-language/po-language.service';
3+
import { expectPropertiesValues } from '../../util-test/util-expect.spec';
4+
import { convertToBoolean } from '../../utils/util';
5+
import { PoAccordionBaseComponent, poAccordionLiteralsDefault } from './po-accordion-base.component';
26

37
describe('PoAccordionBaseComponent:', () => {
4-
const component = new PoAccordionBaseComponent();
8+
const languageService: PoLanguageService = new PoLanguageService();
9+
let component: PoAccordionBaseComponent;
510

6-
it('should be created', () => {
7-
expect(component instanceof PoAccordionBaseComponent).toBeTruthy();
11+
beforeEach(() => {
12+
component = new PoAccordionBaseComponent(languageService);
13+
});
14+
15+
describe('Properties:', () => {
16+
it('should be created', () => {
17+
expect(component instanceof PoAccordionBaseComponent).toBeTruthy();
18+
});
19+
20+
it('p-literals: should be in portuguese if browser is setted with an unsupported language', () => {
21+
component['language'] = 'zw';
22+
23+
component.literals = {};
24+
25+
expect(component.literals).toEqual(poAccordionLiteralsDefault[poLocaleDefault]);
26+
});
27+
28+
it('p-literals: should be in portuguese if browser is setted with `pt`', () => {
29+
component['language'] = 'pt';
30+
31+
component.literals = {};
32+
33+
expect(component.literals).toEqual(poAccordionLiteralsDefault.pt);
34+
});
35+
36+
it('p-literals: should be in english if browser is setted with `en`', () => {
37+
component['language'] = 'en';
38+
39+
component.literals = {};
40+
41+
expect(component.literals).toEqual(poAccordionLiteralsDefault.en);
42+
});
43+
44+
it('p-literals: should be in spanish if browser is setted with `es`', () => {
45+
component['language'] = 'es';
46+
47+
component.literals = {};
48+
49+
expect(component.literals).toEqual(poAccordionLiteralsDefault.es);
50+
});
51+
52+
it('p-literals: should be in russian if browser is setted with `ru`', () => {
53+
component['language'] = 'ru';
54+
55+
component['_literals'] = undefined;
56+
57+
expect(component.literals).toEqual(poAccordionLiteralsDefault.ru);
58+
});
59+
60+
it('p-literals: should accept custom literals', () => {
61+
component['language'] = poLocaleDefault;
62+
63+
const customLiterals = Object.assign({}, poAccordionLiteralsDefault[poLocaleDefault]);
64+
65+
customLiterals.closeAllItems = 'Close';
66+
67+
component.literals = customLiterals;
68+
69+
expect(component.literals).toEqual(customLiterals);
70+
});
71+
72+
it('p-literals: should update property with default literals if is setted with invalid values', () => {
73+
const invalidValues = [null, undefined, false, true, '', 'literals', 0, 10, [], [1, 2], () => {}];
74+
75+
component['language'] = poLocaleDefault;
76+
77+
expectPropertiesValues(component, 'literals', invalidValues, poAccordionLiteralsDefault[poLocaleDefault]);
78+
});
79+
80+
it('showManagerAccordion: should set property `p-show-manager-accordion` to `false` if invalid value', () => {
81+
component.showManagerAccordion = convertToBoolean(3);
82+
83+
expect(component.showManagerAccordion).toBe(false);
84+
});
85+
86+
it('hideRemoveAllDisclaimer: should update property `p-show-manager-accordion` to `true` with valid values', () => {
87+
component.showManagerAccordion = convertToBoolean(1);
88+
89+
expect(component.showManagerAccordion).toBe(true);
90+
});
91+
92+
it('allowExpandItems: should set property `p-allow-expand-all-items` to `false` if invalid value', () => {
93+
component.allowExpandItems = convertToBoolean(3);
94+
95+
expect(component.allowExpandItems).toBe(false);
96+
});
97+
98+
it('hideRemoveAllDisclaimer: should update property `p-allow-expand-all-items` to `true` with valid values', () => {
99+
component.allowExpandItems = convertToBoolean(1);
100+
101+
expect(component.allowExpandItems).toBe(true);
102+
});
8103
});
9104
});

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

Lines changed: 140 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
import { Directive, EventEmitter, Input, Output } from '@angular/core';
2+
import { poLocaleDefault } from '../../services/po-language/po-language.constant';
3+
import { PoLanguageService } from '../../services/po-language/po-language.service';
4+
import { convertToBoolean } from '../../utils/util';
5+
import { PoAccordionLiterals } from './interfaces/po-accordion-literals.interface';
6+
7+
export const poAccordionLiteralsDefault = {
8+
en: <PoAccordionLiterals>{
9+
closeAllItems: 'Close all items',
10+
expandAllItems: 'Open all items'
11+
},
12+
es: <PoAccordionLiterals>{
13+
closeAllItems: 'Cerrar todos los elementos',
14+
expandAllItems: 'Abrir todos los elementos'
15+
},
16+
pt: <PoAccordionLiterals>{
17+
closeAllItems: 'Fechar todos os itens',
18+
expandAllItems: 'Abrir todos os itens'
19+
},
20+
ru: <PoAccordionLiterals>{
21+
closeAllItems: 'Закрыть все элементы',
22+
expandAllItems: 'Открыть все элементы'
23+
}
24+
};
25+
126
/**
227
* @description
328
*
@@ -8,7 +33,7 @@
833
* como no exemplo abaixo:
934
*
1035
* ```
11-
* <po-accordion>
36+
* <po-accordion #accordion [p-show-manager-accordion]="true">
1237
* <po-accordion-item p-label="PO Accordion 1">
1338
* Accordion 1
1439
* </po-accordion-item>
@@ -19,9 +44,122 @@
1944
* </po-accordion>
2045
* ```
2146
*
47+
* e no typescript pode-se utilizar o `@ViewChild`:
48+
*
49+
* ```
50+
* @ViewChild(PoAccordionComponent, { static: true }) accordion: PoAccordionComponent;
51+
*
52+
* ngAfterContentInit() {
53+
* // ou utilizar o método collapseAllItems();
54+
* this.accordion.expandAllItems();
55+
* }
56+
* ```
57+
*
2258
* O componente já faz o controle de abertura e fechamento dos itens automaticamente.
2359
*
2460
* Caso houver a necessidade de abrir algum dos `po-accordion-item` via Typescript
2561
* acesse a [documentação do PoAccordionItem](/documentation/po-accordion-item).
2662
*/
27-
export class PoAccordionBaseComponent {}
63+
@Directive()
64+
export class PoAccordionBaseComponent {
65+
private language: string = poLocaleDefault;
66+
private _literals;
67+
68+
/**
69+
* @optional
70+
*
71+
* @description
72+
*
73+
* Objeto com as literais usadas no `po-accordion`.
74+
*
75+
* Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis:
76+
*
77+
* ```
78+
* const customLiterals: PoAccordionLiterals = {
79+
* closeAllItems: 'Fechar todos os itens',
80+
* expandAllItems: 'Expandir todos os itens'
81+
* };
82+
* ```
83+
*
84+
* Ou passando apenas as literais que deseja customizar:
85+
*
86+
* ```
87+
* const customLiterals: PoAccordionLiterals = {
88+
* expandAllItems: 'Expandir todos os itens'
89+
* };
90+
* ```
91+
*
92+
* E para carregar as literais customizadas, basta apenas passar o objeto para o componente.
93+
*
94+
* ```
95+
* <po-accordion
96+
* [p-literals]="customLiterals">
97+
* </po-accordion>
98+
* ```
99+
*
100+
* > O objeto padrão de literais será traduzido de acordo com o idioma do
101+
* [`PoI18nService`](/documentation/po-i18n) ou do browser.
102+
*/
103+
@Input('p-literals') set literals(value: PoAccordionLiterals) {
104+
if (value instanceof Object && !(value instanceof Array)) {
105+
this._literals = {
106+
...poAccordionLiteralsDefault[poLocaleDefault],
107+
...poAccordionLiteralsDefault[this.language],
108+
...value
109+
};
110+
} else {
111+
this._literals = poAccordionLiteralsDefault[this.language];
112+
}
113+
}
114+
115+
get literals() {
116+
return this._literals || poAccordionLiteralsDefault[this.language];
117+
}
118+
119+
/**
120+
* @optional
121+
*
122+
* @description
123+
*
124+
* Exibe o Gerenciador de Accordion.
125+
*
126+
* @default `false`
127+
*/
128+
@Input({ alias: 'p-show-manager-accordion', transform: convertToBoolean }) showManagerAccordion: boolean = false;
129+
130+
/**
131+
* @optional
132+
*
133+
* @description
134+
*
135+
* Permite expandir mais de um `<po-accordion-item></po-accordion-item>` ao mesmo tempo.
136+
* Sempre habilitada caso a propriedade `p-show-manager-accordion` esteja como `true`.
137+
*
138+
* @default `false`
139+
*/
140+
@Input({ alias: 'p-allow-expand-all-items', transform: convertToBoolean }) allowExpandItems: boolean = false;
141+
142+
/**
143+
* @optional
144+
*
145+
* @description
146+
*
147+
* Evento disparado ao expandir o gerenciador de accordion, seja manualmente ou programaticamente.
148+
*
149+
*/
150+
@Output('p-expand-all') expandAllEvent = new EventEmitter<void>();
151+
152+
/**
153+
* @optional
154+
*
155+
* @description
156+
*
157+
* Evento disparado ao retrair o gerenciador de accordion, seja manualmente ou programaticamente.
158+
*
159+
*/
160+
@Output('p-collapse-all') collapseAllEvent = new EventEmitter<void>();
161+
162+
constructor(languageService: PoLanguageService) {
163+
this.language = languageService.getShortLanguage();
164+
}
165+
}

‎projects/ui/src/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1-
<header class="po-accordion-item-header">
2-
<button class="po-accordion-item-header-button po-clickable" (click)="onClick()">
3-
<div class="po-text-ellipsis po-accordion-item-header-title">{{ label }}</div>
4-
<span #icon class="po-icon po-accordion-item-header-icon po-icon-arrow-down"> </span>
1+
<div class="po-accordion-item-header">
2+
<button
3+
[disabled]="disabledItem"
4+
[attr.aria-label]="label"
5+
[attr.aria-expanded]="expanded || false"
6+
class="po-accordion-item-header-button po-clickable"
7+
(click)="onClick()"
8+
>
9+
<div class="po-accordion-item-header-button-content">
10+
<div class="po-text-ellipsis po-accordion-item-header-title">{{ label }}</div>
11+
<po-tag *ngIf="labelTag" class="po-accordion-item-header-tag" [p-value]="labelTag" [p-type]="typeTag"> </po-tag>
12+
</div>
13+
<po-icon p-icon="po-icon-arrow-down" class="po-icon po-accordion-item-header-icon"></po-icon>
514
</button>
6-
</header>
15+
</div>

‎projects/ui/src/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.spec.ts‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,13 @@ describe('PoAccordionItemHeaderComponent:', () => {
4343
describe('Templates:', () => {
4444
let header;
4545
let button;
46-
let span;
46+
let icon;
4747

4848
beforeEach(() => {
49-
header = nativeElement.querySelector('header');
49+
component.disabledItem = false;
50+
header = nativeElement.querySelector('div');
5051
button = header.querySelector('button');
51-
span = button.querySelector('span');
52+
icon = button.querySelector('po-icon');
5253
});
5354

5455
it('should have a header with po-accordion-item-header class', () => {
@@ -68,22 +69,22 @@ describe('PoAccordionItemHeaderComponent:', () => {
6869
expect(button.classList.contains('po-clickable')).toBeTruthy();
6970
});
7071

71-
it('should have a button with span (icon)', () => {
72-
expect(button.querySelector('span')).toBeTruthy();
72+
it('should have a button with icon (icon)', () => {
73+
expect(button.querySelector('po-icon')).toBeTruthy();
7374
});
7475

75-
it('should have a span with class po-icon', () => {
76-
expect(span.classList.contains('po-icon')).toBeTruthy();
76+
it('should have a icon with class po-icon', () => {
77+
expect(icon.classList.contains('po-icon')).toBeTruthy();
7778
});
7879

79-
it('should have a span with class po-accordion-item-header-icon', () => {
80-
expect(span.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
80+
it('should have a icon with class po-accordion-item-header-icon', () => {
81+
expect(icon.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
8182
});
8283

83-
it('should have a span with class po-icon-arrow-down by default', () => {
84+
it('should have a icon with class po-accordion-item-header-icon by default', () => {
8485
fixture.detectChanges();
8586

86-
expect(span.classList.contains('po-icon-arrow-down')).toBeTruthy();
87+
expect(icon.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
8788
});
8889

8990
it(`shouldn't have text in button if label is empty`, () => {

‎projects/ui/src/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,31 @@
1-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
2+
import { PoLanguageService } from '../../../services/po-language';
3+
import { poLocaleDefault } from '../../../services/po-language/po-language.constant';
24

35
@Component({
46
selector: 'po-accordion-item-header',
57
templateUrl: 'po-accordion-item-header.component.html',
68
changeDetection: ChangeDetectionStrategy.OnPush
79
})
810
export class PoAccordionItemHeaderComponent {
11+
private language: string = poLocaleDefault;
12+
913
@Input('p-expanded') expanded: boolean = false;
1014

1115
@Input('p-label') label: string;
1216

17+
@Input('p-label-tag') labelTag: string;
18+
19+
@Input('p-type-tag') typeTag: string;
20+
21+
@Input('p-disabled') disabledItem: boolean;
22+
1323
@Output('p-toggle') toggle = new EventEmitter<boolean>();
1424

25+
constructor(languageService: PoLanguageService) {
26+
this.language = languageService.getShortLanguage();
27+
}
28+
1529
onClick() {
1630
this.expanded = !this.expanded;
1731

0 commit comments

Comments
 (0)