feat(multiselect): implementa as definições do AnimaliaDS

Implementar as definições do handoff do multiselect no PoMultiselect.
Implementa propriedade literals na tag.
Implementa tooltip na tag removable.

Fixes DTHFUI-7684

projects/ui/src/lib/components/po-field/po-field.module.ts

@@ -27,7 +27,6 @@ import { PoListBoxModule } from '../po-listbox/po-listbox.module';
 import { PoComboComponent } from './po-combo/po-combo.component';
 import { PoComboOptionTemplateDirective } from './po-combo/po-combo-option-template/po-combo-option-template.directive';
 import { PoMultiselectOptionTemplateDirective } from './po-multiselect/po-multiselect-option-template/po-multiselect-option-template.directive';
-import { PoDatepickerComponent } from './po-datepicker/po-datepicker.component';
 import { PoDatepickerRangeComponent } from './po-datepicker-range/po-datepicker-range.component';
 import { PoDecimalComponent } from './po-decimal/po-decimal.component';
 import { PoEmailComponent } from './po-email/po-email.component';
@@ -36,7 +35,6 @@ import { PoLookupComponent } from './po-lookup/po-lookup.component';
 import { PoLookupModalComponent } from './po-lookup/po-lookup-modal/po-lookup-modal.component';
 import { PoMultiselectDropdownComponent } from './po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component';
 import { PoMultiselectComponent } from './po-multiselect/po-multiselect.component';
-import { PoMultiselectSearchComponent } from './po-multiselect/po-multiselect-search/po-multiselect-search.component';
 import { PoRichTextBodyComponent } from './po-rich-text/po-rich-text-body/po-rich-text-body.component';
 import { PoRichTextComponent } from './po-rich-text/po-rich-text.component';
 import { PoRichTextImageModalComponent } from './po-rich-text/po-rich-text-image-modal/po-rich-text-image-modal.component';
@@ -57,6 +55,7 @@ import { PoUrlComponent } from './po-url/po-url.component';
 import { PoCheckboxModule } from './po-checkbox/po-checkbox.module';
 import { PoSwitchModule } from './po-switch/po-switch.module';
 import { PoLabelModule } from '../po-label';
+import { PoTagModule } from '../po-tag';
 
 /**
  * @description
@@ -98,7 +97,8 @@ import { PoLabelModule } from '../po-label';
     PoRadioModule,
     PoLabelModule,
     PoListBoxModule,
-    PoSwitchModule
+    PoSwitchModule,
+    PoTagModule
   ],
   exports: [
     PoCheckboxGroupModule,
@@ -127,7 +127,8 @@ import { PoLabelModule } from '../po-label';
     PoCheckboxModule,
     PoRadioModule,
     PoLabelModule,
-    PoSwitchModule
+    PoSwitchModule,
+    PoTagModule
   ],
   declarations: [
     PoComboComponent,
@@ -142,7 +143,6 @@ import { PoLabelModule } from '../po-label';
     PoLookupModalComponent,
     PoMultiselectComponent,
     PoMultiselectDropdownComponent,
-    PoMultiselectSearchComponent,
     PoNumberComponent,
     PoPasswordComponent,
     PoRichTextBodyComponent,

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

@@ -29,22 +29,26 @@ export const poMultiselectLiteralsDefault = {
   en: <PoMultiselectLiterals>{
     noData: 'No data found',
     placeholderSearch: 'Search',
-    selectAll: 'Select all'
+    selectAll: 'Select all',
+    selectItem: 'Select items'
   },
   es: <PoMultiselectLiterals>{
     noData: 'Datos no encontrados',
     placeholderSearch: 'Busca',
-    selectAll: 'Seleccionar todo'
+    selectAll: 'Seleccionar todo',
+    selectItem: 'Seleccionar items'
   },
   pt: <PoMultiselectLiterals>{
     noData: 'Nenhum dado encontrado',
     placeholderSearch: 'Buscar',
-    selectAll: 'Selecionar todos'
+    selectAll: 'Selecionar todos',
+    selectItem: 'Selecionar itens'
   },
   ru: <PoMultiselectLiterals>{
     noData: 'Данные не найдены',
     placeholderSearch: 'искать',
-    selectAll: 'Выбрать все'
+    selectAll: 'Выбрать все',
+    selectItem: 'Выбрать элементы'
   }
 };
 
@@ -61,6 +65,23 @@ export const poMultiselectLiteralsDefault = {
  * po-select, po-combo ou po-radio-group.
  *
  * Com ele também é possível definir uma lista à partir da requisição de um serviço definido em `p-filter-service`.
+ *
+ * #### Boas práticas
+ *
+ * - Caso a lista apresente menos de 5 itens, considere utilizar outro componente;
+ * - Não utilize o multiselect caso o usuário possa selecionar apenas uma opção. Para esse caso, opte por utilizar po-radio ou po-select;
+ * - Sempre que possível, agrupe as opções e use labels curtas para descrever o conteúdo. Exemplo: em uma combinação de alimentos,
+ * as opções podem ser agrupadas por Vegetais, Frutas, etc;
+ *
+ * #### Acessibilidade tratada no componente
+ *
+ * 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:
+ *
+ * - Quando em foco, o multiselect abre o listbox usando as teclas de Espaço ou Enter do teclado.
+ * - Utilize as teclas Arrow Up [seta para cima] ou Arrow Down [seta para baixo] do teclado para navegar entre os itens do listbox.
+ * - Utilize a tecla Esc do teclado para fechar o listbox.
+ * - Quando um item estiver em foco, utilize as teclas Arrow Right [seta para direita] ou Arrow Left [seta para esquerda] do teclado para navegar entre eles.
+ * - Quando em foco e havendo um item ou mais já selecionado, utilize a tecla Arrow Down [seta para baixo] do teclado para abrir o listbox.
  */
 @Directive()
 export abstract class PoMultiselectBaseComponent implements ControlValueAccessor, OnInit, Validator {
@@ -151,7 +172,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
 
   selectedOptions: Array<PoMultiselectOption | any> = [];
   visibleOptionsDropdown: Array<PoMultiselectOption | any> = [];
-  visibleDisclaimers = [];
+  visibleTags = [];
   isServerSearching = false;
   isFirstFilter: boolean = true;
   filterSubject = new Subject();
@@ -276,7 +297,9 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
    * ```
    *  const customLiterals: PoMultiselectLiterals = {
    *    noData: 'Nenhum dado encontrado',
-   *    placeholderSearch: 'Buscar'
+   *    placeholderSearch: 'Buscar',
+   *    selectAll: 'Select all',
+   *    selectItem: 'Select items'
    *  };
    * ```
    *
@@ -310,6 +333,7 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
       this._literals = poMultiselectLiteralsDefault[this.language];
     }
   }
+
   get literals() {
     return this._literals || poMultiselectLiteralsDefault[this.language];
   }

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component.html

@@ -20,6 +20,7 @@
         (p-change)="clickItem($event)"
         (p-change-all)="onClickSelectAll()"
         (p-change-search)="callChangeSearch($event)"
+        (p-close)="closeDropdown.emit()"
       >
       </po-listbox>
     </ng-container>

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component.spec.ts

@@ -5,15 +5,14 @@ import { configureTestSuite } from './../../../../util-test/util-expect.spec';
 
 import { PoMultiselectDropdownComponent } from './po-multiselect-dropdown.component';
 import { poMultiselectLiteralsDefault } from '../po-multiselect-base.component';
-import { PoMultiselectSearchComponent } from './../po-multiselect-search/po-multiselect-search.component';
 
 describe('PoMultiselectDropdownComponent:', () => {
   let component: PoMultiselectDropdownComponent;
   let fixture: ComponentFixture<PoMultiselectDropdownComponent>;
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
-      declarations: [PoMultiselectDropdownComponent, PoMultiselectSearchComponent]
+      declarations: [PoMultiselectDropdownComponent]
     });
   });
 
@@ -292,13 +291,5 @@ describe('PoMultiselectDropdownComponent:', () => {
 
       expect(fixture.nativeElement.querySelector('.po-listbox-container-no-data')).toBeNull();
     });
-
-    it('shouldn`t show `po-multiselect-search` if `hideSearch` is `true`', () => {
-      component.hideSearch = true;
-
-      fixture.detectChanges();
-
-      expect(fixture.debugElement.query(By.css('po-multiselect-search'))).toEqual(null);
-    });
   });
 });

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-dropdown/po-multiselect-dropdown.component.ts

@@ -4,7 +4,6 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  HostListener,
   Input,
   Output,
   ViewChild,
@@ -13,7 +12,6 @@ import {
 
 import { PoMultiselectLiterals } from '../../index';
 import { PoMultiselectOption } from '../po-multiselect-option.interface';
-import { PoMultiselectSearchComponent } from './../po-multiselect-search/po-multiselect-search.component';
 import { PoListBoxComponent } from './../../../po-listbox/po-listbox.component';
 
 /**

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-literals.interface.ts

@@ -14,4 +14,7 @@ export interface PoMultiselectLiterals {
 
   /** Texto exibido no botão de selecionar todos. */
   selectAll?: string;
+
+  /** Texto exibido na propriedade placeholder. */
+  selectItem?: string;
 }