feat(accordion): implementa definições do AnimaliaDS

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

@@ -1,3 +1,4 @@
+export * from './interfaces/po-accordion-literals.interface';
 export * from './po-accordion-item/po-accordion-item.component';
 export * from './po-accordion.component';
 

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

@@ -0,0 +1,14 @@
+/**
+ * @usedBy PoAccordionComponent
+ *
+ * @description
+ *
+ * Interface para definição das literais usadas no `po-accordion`.
+ */
+export interface PoAccordionLiterals {
+  /** Label do gerenciador de Accordion para expandir todos os itens. */
+  expandAllItems?: string;
+
+  /** Label do gerenciador de Accordion para colapsar todos os itens */
+  closeAllItems?: string;
+}

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

@@ -1,9 +1,104 @@
-import { PoAccordionBaseComponent } from './po-accordion-base.component';
+import { poLocaleDefault } from '../../services';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { expectPropertiesValues } from '../../util-test/util-expect.spec';
+import { convertToBoolean } from '../../utils/util';
+import { PoAccordionBaseComponent, poAccordionLiteralsDefault } from './po-accordion-base.component';
 
 describe('PoAccordionBaseComponent:', () => {
-  const component = new PoAccordionBaseComponent();
+  const languageService: PoLanguageService = new PoLanguageService();
+  let component: PoAccordionBaseComponent;
 
-  it('should be created', () => {
-    expect(component instanceof PoAccordionBaseComponent).toBeTruthy();
+  beforeEach(() => {
+    component = new PoAccordionBaseComponent(languageService);
+  });
+
+  describe('Properties:', () => {
+    it('should be created', () => {
+      expect(component instanceof PoAccordionBaseComponent).toBeTruthy();
+    });
+
+    it('p-literals: should be in portuguese if browser is setted with an unsupported language', () => {
+      component['language'] = 'zw';
+
+      component.literals = {};
+
+      expect(component.literals).toEqual(poAccordionLiteralsDefault[poLocaleDefault]);
+    });
+
+    it('p-literals: should be in portuguese if browser is setted with `pt`', () => {
+      component['language'] = 'pt';
+
+      component.literals = {};
+
+      expect(component.literals).toEqual(poAccordionLiteralsDefault.pt);
+    });
+
+    it('p-literals: should be in english if browser is setted with `en`', () => {
+      component['language'] = 'en';
+
+      component.literals = {};
+
+      expect(component.literals).toEqual(poAccordionLiteralsDefault.en);
+    });
+
+    it('p-literals: should be in spanish if browser is setted with `es`', () => {
+      component['language'] = 'es';
+
+      component.literals = {};
+
+      expect(component.literals).toEqual(poAccordionLiteralsDefault.es);
+    });
+
+    it('p-literals: should be in russian if browser is setted with `ru`', () => {
+      component['language'] = 'ru';
+
+      component['_literals'] = undefined;
+
+      expect(component.literals).toEqual(poAccordionLiteralsDefault.ru);
+    });
+
+    it('p-literals: should accept custom literals', () => {
+      component['language'] = poLocaleDefault;
+
+      const customLiterals = Object.assign({}, poAccordionLiteralsDefault[poLocaleDefault]);
+
+      customLiterals.closeAllItems = 'Close';
+
+      component.literals = customLiterals;
+
+      expect(component.literals).toEqual(customLiterals);
+    });
+
+    it('p-literals: should update property with default literals if is setted with invalid values', () => {
+      const invalidValues = [null, undefined, false, true, '', 'literals', 0, 10, [], [1, 2], () => {}];
+
+      component['language'] = poLocaleDefault;
+
+      expectPropertiesValues(component, 'literals', invalidValues, poAccordionLiteralsDefault[poLocaleDefault]);
+    });
+
+    it('showManagerAccordion: should set property `p-show-manager-accordion` to `false` if invalid value', () => {
+      component.showManagerAccordion = convertToBoolean(3);
+
+      expect(component.showManagerAccordion).toBe(false);
+    });
+
+    it('hideRemoveAllDisclaimer: should update property `p-show-manager-accordion` to `true` with valid values', () => {
+      component.showManagerAccordion = convertToBoolean(1);
+
+      expect(component.showManagerAccordion).toBe(true);
+    });
+
+    it('allowExpandItems: should set property `p-allow-expand-all-items` to `false` if invalid value', () => {
+      component.allowExpandItems = convertToBoolean(3);
+
+      expect(component.allowExpandItems).toBe(false);
+    });
+
+    it('hideRemoveAllDisclaimer: should update property `p-allow-expand-all-items` to `true` with valid values', () => {
+      component.allowExpandItems = convertToBoolean(1);
+
+      expect(component.allowExpandItems).toBe(true);
+    });
   });
 });

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

@@ -1,3 +1,28 @@
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { poLocaleDefault } from '../../services/po-language/po-language.constant';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { convertToBoolean } from '../../utils/util';
+import { PoAccordionLiterals } from './interfaces/po-accordion-literals.interface';
+
+export const poAccordionLiteralsDefault = {
+  en: <PoAccordionLiterals>{
+    closeAllItems: 'Close all items',
+    expandAllItems: 'Open all items'
+  },
+  es: <PoAccordionLiterals>{
+    closeAllItems: 'Cerrar todos los elementos',
+    expandAllItems: 'Abrir todos los elementos'
+  },
+  pt: <PoAccordionLiterals>{
+    closeAllItems: 'Fechar todos os itens',
+    expandAllItems: 'Abrir todos os itens'
+  },
+  ru: <PoAccordionLiterals>{
+    closeAllItems: 'Закрыть все элементы',
+    expandAllItems: 'Открыть все элементы'
+  }
+};
+
 /**
  * @description
  *
@@ -8,7 +33,7 @@
  * como no exemplo abaixo:
  *
  * ```
- * <po-accordion>
+ * <po-accordion #accordion [p-show-manager-accordion]="true">
  *   <po-accordion-item p-label="PO Accordion 1">
  *      Accordion 1
  *   </po-accordion-item>
@@ -19,9 +44,122 @@
  * </po-accordion>
  * ```
  *
+ * e no typescript pode-se utilizar o `@ViewChild`:
+ *
+ * ```
+ *  @ViewChild(PoAccordionComponent, { static: true }) accordion: PoAccordionComponent;
+ *
+ *  ngAfterContentInit() {
+ *    // ou utilizar o método collapseAllItems();
+ *    this.accordion.expandAllItems();
+ *  }
+ * ```
+ *
  * O componente já faz o controle de abertura e fechamento dos itens automaticamente.
  *
  * Caso houver a necessidade de abrir algum dos `po-accordion-item` via Typescript
  * acesse a [documentação do PoAccordionItem](/documentation/po-accordion-item).
  */
-export class PoAccordionBaseComponent {}
+@Directive()
+export class PoAccordionBaseComponent {
+  private language: string = poLocaleDefault;
+  private _literals;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Objeto com as literais usadas no `po-accordion`.
+   *
+   * Existem duas maneiras de customizar o componente, passando um objeto com todas as literais disponíveis:
+   *
+   * ```
+   *  const customLiterals: PoAccordionLiterals = {
+   *    closeAllItems: 'Fechar todos os itens',
+   *    expandAllItems: 'Expandir todos os itens'
+   *  };
+   * ```
+   *
+   * Ou passando apenas as literais que deseja customizar:
+   *
+   * ```
+   *  const customLiterals: PoAccordionLiterals = {
+   *    expandAllItems: 'Expandir todos os itens'
+   *  };
+   * ```
+   *
+   * E para carregar as literais customizadas, basta apenas passar o objeto para o componente.
+   *
+   * ```
+   * <po-accordion
+   *   [p-literals]="customLiterals">
+   * </po-accordion>
+   * ```
+   *
+   * > O objeto padrão de literais será traduzido de acordo com o idioma do
+   * [`PoI18nService`](/documentation/po-i18n) ou do browser.
+   */
+  @Input('p-literals') set literals(value: PoAccordionLiterals) {
+    if (value instanceof Object && !(value instanceof Array)) {
+      this._literals = {
+        ...poAccordionLiteralsDefault[poLocaleDefault],
+        ...poAccordionLiteralsDefault[this.language],
+        ...value
+      };
+    } else {
+      this._literals = poAccordionLiteralsDefault[this.language];
+    }
+  }
+
+  get literals() {
+    return this._literals || poAccordionLiteralsDefault[this.language];
+  }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Exibe o Gerenciador de Accordion.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-show-manager-accordion', transform: convertToBoolean }) showManagerAccordion: boolean = false;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Permite expandir mais de um `<po-accordion-item></po-accordion-item>` ao mesmo tempo.
+   * Sempre habilitada caso a propriedade `p-show-manager-accordion` esteja como `true`.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-allow-expand-all-items', transform: convertToBoolean }) allowExpandItems: boolean = false;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Evento disparado ao expandir o gerenciador de accordion, seja manualmente ou programaticamente.
+   *
+   */
+  @Output('p-expand-all') expandAllEvent = new EventEmitter<void>();
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Evento disparado ao retrair o gerenciador de accordion, seja manualmente ou programaticamente.
+   *
+   */
+  @Output('p-collapse-all') collapseAllEvent = new EventEmitter<void>();
+
+  constructor(languageService: PoLanguageService) {
+    this.language = languageService.getShortLanguage();
+  }
+}

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

@@ -1,6 +1,15 @@
-<header class="po-accordion-item-header">
-  <button class="po-accordion-item-header-button po-clickable" (click)="onClick()">
-    <div class="po-text-ellipsis po-accordion-item-header-title">{{ label }}</div>
-    <span #icon class="po-icon po-accordion-item-header-icon po-icon-arrow-down"> </span>
+<div class="po-accordion-item-header">
+  <button
+    [disabled]="disabledItem"
+    [attr.aria-label]="label"
+    [attr.aria-expanded]="expanded || false"
+    class="po-accordion-item-header-button po-clickable"
+    (click)="onClick()"
+  >
+    <div class="po-accordion-item-header-button-content">
+      <div class="po-text-ellipsis po-accordion-item-header-title">{{ label }}</div>
+      <po-tag *ngIf="labelTag" class="po-accordion-item-header-tag" [p-value]="labelTag" [p-type]="typeTag"> </po-tag>
+    </div>
+    <po-icon p-icon="po-icon-arrow-down" class="po-icon po-accordion-item-header-icon"></po-icon>
   </button>
-</header>
+</div>

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

@@ -43,12 +43,13 @@ describe('PoAccordionItemHeaderComponent:', () => {
   describe('Templates:', () => {
     let header;
     let button;
-    let span;
+    let icon;
 
     beforeEach(() => {
-      header = nativeElement.querySelector('header');
+      component.disabledItem = false;
+      header = nativeElement.querySelector('div');
       button = header.querySelector('button');
-      span = button.querySelector('span');
+      icon = button.querySelector('po-icon');
     });
 
     it('should have a header with po-accordion-item-header class', () => {
@@ -68,22 +69,22 @@ describe('PoAccordionItemHeaderComponent:', () => {
       expect(button.classList.contains('po-clickable')).toBeTruthy();
     });
 
-    it('should have a button with span (icon)', () => {
-      expect(button.querySelector('span')).toBeTruthy();
+    it('should have a button with icon (icon)', () => {
+      expect(button.querySelector('po-icon')).toBeTruthy();
     });
 
-    it('should have a span with class po-icon', () => {
-      expect(span.classList.contains('po-icon')).toBeTruthy();
+    it('should have a icon with class po-icon', () => {
+      expect(icon.classList.contains('po-icon')).toBeTruthy();
     });
 
-    it('should have a span with class po-accordion-item-header-icon', () => {
-      expect(span.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
+    it('should have a icon with class po-accordion-item-header-icon', () => {
+      expect(icon.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
     });
 
-    it('should have a span with class po-icon-arrow-down by default', () => {
+    it('should have a icon with class po-accordion-item-header-icon by default', () => {
       fixture.detectChanges();
 
-      expect(span.classList.contains('po-icon-arrow-down')).toBeTruthy();
+      expect(icon.classList.contains('po-accordion-item-header-icon')).toBeTruthy();
     });
 
     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

@@ -1,17 +1,31 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { PoLanguageService } from '../../../services/po-language';
+import { poLocaleDefault } from '../../../services/po-language/po-language.constant';
 
 @Component({
   selector: 'po-accordion-item-header',
   templateUrl: 'po-accordion-item-header.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PoAccordionItemHeaderComponent {
+  private language: string = poLocaleDefault;
+
   @Input('p-expanded') expanded: boolean = false;
 
   @Input('p-label') label: string;
 
+  @Input('p-label-tag') labelTag: string;
+
+  @Input('p-type-tag') typeTag: string;
+
+  @Input('p-disabled') disabledItem: boolean;
+
   @Output('p-toggle') toggle = new EventEmitter<boolean>();
 
+  constructor(languageService: PoLanguageService) {
+    this.language = languageService.getShortLanguage();
+  }
+
   onClick() {
     this.expanded = !this.expanded;