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

Implementa definições do AnimaliaDS no Breadcrumb

fixes DTHFUI-7500

Author: jcorrea97

projects/ui/src/lib/components/po-field/po-combo/interfaces/po-combo-literals-default.interface.ts

@@ -3,18 +3,22 @@ import { PoComboLiterals } from './po-combo-literals.interface';
 export const poComboLiteralsDefault = {
   en: <PoComboLiterals>{
     noData: 'No data found',
-    chooseOption: 'Choose an option'
+    chooseOption: 'Choose an option',
+    clear: 'Clear'
   },
   es: <PoComboLiterals>{
     noData: 'Datos no encontrados',
-    chooseOption: 'Elija una opción'
+    chooseOption: 'Elija una opción',
+    clear: 'limpia'
   },
   pt: <PoComboLiterals>{
     noData: 'Nenhum dado encontrado',
-    chooseOption: 'Escolha uma opção'
+    chooseOption: 'Escolha uma opção',
+    clear: 'Apagar'
   },
   ru: <PoComboLiterals>{
     noData: 'Данные не найдены',
-    chooseOption: 'Выберите опцию'
+    chooseOption: 'Выберите опцию',
+    clear: 'чистый'
   }
 };

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

@@ -11,4 +11,7 @@ export interface PoComboLiterals {
 
   /** Texto exibido quando o combo estiver vazio. */
   chooseOption?: string;
+
+  /** Texto do aria-label do botão de limpar */
+  clean?: string;
 }

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

@@ -6,14 +6,14 @@
   [p-required]="required"
   [p-show-required]="showRequired"
 >
-  <div cdkOverlayOrigin #trigger="cdkOverlayOrigin" class="po-field-container-content">
+  <div cdkOverlayOrigin #trigger="cdkOverlayOrigin" class="po-field-container-content po-combo-container-content">
     <div *ngIf="icon" class="po-field-icon-container-left">
       <po-icon class="po-field-icon po-icon-input" [class.po-field-icon-disabled]="disabled" [p-icon]="icon"></po-icon>
     </div>
 
     <input
       #inp
-      class="po-input po-combo-input"
+      class="po-combo-input"
       [ngClass]="clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'"
       [class.po-input-icon-left]="icon"
       autocomplete="off"
@@ -26,24 +26,35 @@
       (click)="toggleComboVisibility()"
       (keyup)="onKeyUp($event)"
       (blur)="onBlur()"
-      (keyup.enter)="searchOnEnter($event.target.value)"
+      (keyup)="searchOnEnterOrArrow($event, $event.target.value)"
       (keydown)="onKeyDown($event)"
     />
 
     <div class="po-field-icon-container-right">
-      <po-clean
-        class="po-icon-input"
-        *ngIf="clean && !disabled"
-        (p-change-event)="clear($event)"
-        [p-element-ref]="inputEl"
+      <div
+        tabindex="0"
+        role="button"
+        [attr.aria-label]="literals.clean"
+        *ngIf="clean && !disabled && inp.value"
+        class="po-combo-clean"
+        (click)="clear(null); $event.preventDefault()"
+        (keydown.enter)="clearAndFocus(); $event.preventDefault()"
       >
-      </po-clean>
+        <span
+          [class.po-border-focused]="!disabled && comboOpen"
+          class="po-icon po-field-icon po-icon-clear-content"
+        ></span>
+      </div>
       <span
         #iconArrow
-        class="po-icon po-field-icon {{ comboIcon }} po-icon-input"
+        class="po-icon po-field-icon po-icon-input"
         [class.po-field-icon-disabled]="disabled"
+        [class.po-icon-arrow-up]="comboOpen"
+        [class.po-icon-arrow-down]="!comboOpen"
         [class.po-field-icon]="!disabled"
-        (click)="toggleComboVisibility()"
+        [class.po-combo-default-border]="!disabled && inp.value"
+        [class.po-combo-background-arrow-up]="!disabled && comboOpen"
+        (click)="toggleComboVisibility(true)"
       >
       </span>
     </div>

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

@@ -92,7 +92,7 @@ describe('PoComboComponent:', () => {
     component.isProcessingValueByTab = false;
     spyOn(component, 'applyFilter');
     component.controlApplyFilter('valor');
-    expect(component.applyFilter).toHaveBeenCalledWith('valor', true);
+    expect(component.applyFilter).toHaveBeenCalledWith('valor', true, undefined);
   });
 
   it('shouldn`t call apply filter when is processing "getObjectByValue"', () => {
@@ -208,9 +208,9 @@ describe('PoComboComponent:', () => {
     spyOn(component, 'controlComboVisibility');
     component.comboOpen = true;
     component.disabled = false;
-
-    component.toggleComboVisibility();
-    expect(component.controlComboVisibility).toHaveBeenCalledWith(false);
+    fixture.detectChanges();
+    component.toggleComboVisibility(false);
+    expect(component.controlComboVisibility).toHaveBeenCalledWith(false, false, false);
   });
 
   it('should call applyFilterInFirstClick', () => {
@@ -571,12 +571,8 @@ describe('PoComboComponent:', () => {
             focus: () => {}
           }
         };
-        component.poListbox = {
-          setFocus: () => {}
-        } as any;
 
         spyOn(component.contentElement.nativeElement, 'focus');
-        spyOn(component.poListbox, 'setFocus');
         component.visibleOptions = [{ value: 'item 1', label: 'item 1' }];
         component.comboOpen = true;
         component.changeOnEnter = true;
@@ -586,15 +582,13 @@ describe('PoComboComponent:', () => {
 
         expect(component.controlComboVisibility).toHaveBeenCalledWith(true);
         expect(component.isFiltering).toBe(false);
-        expect(component.poListbox.setFocus).toHaveBeenCalled();
       });
 
       it('shouldn`t call `selectNextOption` and call `controlComboVisibility` if `comboOpen` with false', () => {
         const event = { ...fakeEvent, keyCode: 40 };
 
         component.comboOpen = false;
         component.visibleOptions = [{ value: '1', label: '1' }];
-
         spyOn(component, 'controlComboVisibility');
 
         component.onKeyDown(event);
@@ -683,6 +677,36 @@ describe('PoComboComponent:', () => {
         expect(component.updateComboList).toHaveBeenCalled();
       });
 
+      it('should call `clear` if esc is double clicked', () => {
+        const event = { ...fakeEvent, keyCode: 27 };
+
+        component.service = undefined;
+        component.selectedValue = 'Test1';
+        component.comboOpen = true;
+        component['lastKey'] = 27;
+
+        spyOn(component, 'clearAndFocus');
+
+        component.onKeyDown(event);
+
+        expect(component.clearAndFocus).toHaveBeenCalled();
+      });
+
+      it('should call `onCloseCombo` if esc is clicked', () => {
+        const event = { ...fakeEvent, keyCode: 27 };
+
+        component.service = undefined;
+        component.selectedValue = 'Test1';
+        component.comboOpen = true;
+        component['lastKey'] = 20;
+
+        spyOn(component, 'onCloseCombo');
+
+        component.onKeyDown(event);
+
+        expect(component.onCloseCombo).toHaveBeenCalled();
+      });
+
       it('shouldn`t call `updateComboList` if itens service is not undefined', () => {
         const event = { ...fakeEvent, keyCode: 13 };
 
@@ -724,6 +748,16 @@ describe('PoComboComponent:', () => {
       expect(component.inputEl.nativeElement.focus).toHaveBeenCalled();
     });
 
+    it('should call inputEl.nativeElement and clear', () => {
+      spyOn(component.inputEl.nativeElement, 'focus');
+      spyOn(component, 'clear');
+
+      component.clearAndFocus();
+
+      expect(component.inputEl.nativeElement.focus).toHaveBeenCalled();
+      expect(component.clear).toHaveBeenCalled();
+    });
+
     it('onOptionClick: should call `stopPropagation` if has an event parameter', () => {
       const option: PoComboOption = { value: 'value', label: 'label' };
 
@@ -949,6 +983,22 @@ describe('PoComboComponent:', () => {
       expect(component.comboOpen).toBe(true);
     });
 
+    it('should open the input element', () => {
+      const focusSpy = spyOn(component.inputEl.nativeElement, 'focus');
+
+      component['open'](true);
+
+      expect(focusSpy).toHaveBeenCalled();
+    });
+
+    it('should add class to input element when isButton is true', () => {
+      const addClassSpy = spyOn(component.renderer, 'addClass');
+
+      component['open'](false, true);
+
+      expect(addClassSpy).toHaveBeenCalledWith(component.inputEl.nativeElement, 'po-combo-input-focus');
+    });
+
     it('open: should set page and options when has inifity scroll', () => {
       component.infiniteScroll = true;
       spyOn(component, 'getInputValue').and.returnValue(undefined);
@@ -1156,18 +1206,19 @@ describe('PoComboComponent:', () => {
     it('should show po-clean if `clean` is true and `disabled` is false', () => {
       component.clean = true;
       component.disabled = false;
+      component.inputEl.nativeElement.value = 'Test';
 
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('po-clean')).toBeTruthy();
+      expect(nativeElement.querySelector('.po-combo-clean')).toBeTruthy();
     });
 
     it('shouldn`t show po-clean if `clean` is true and `disabled` is true', () => {
       component.clean = true;
       component.disabled = true;
 
       fixture.detectChanges();
-      expect(nativeElement.querySelector('po-clean')).toBe(null);
+      expect(nativeElement.querySelector('.po-combo-clean')).toBe(null);
     });
 
     it('shouldn`t show po-clean if `clean` is false', () => {
@@ -1316,11 +1367,14 @@ describe('PoComboComponent - with service:', () => {
     it('applyFilter: should call PoComboFilterService.getFilteredData() with param and filterParams', () => {
       const filterParams = 'filter';
       const applyFilterValue = 'value';
+      const isArrowDown = true;
       const param = { property: 'label', value: applyFilterValue };
       const fakeThis: any = {
         controlComboVisibility: () => {},
         setOptionsByApplyFilter: () => {},
+        focusItem: () => {},
         fieldLabel: 'label',
+        isArrowDown: true,
         filterParams: filterParams,
         service: {
           getFilteredData: () => {}
@@ -1332,11 +1386,23 @@ describe('PoComboComponent - with service:', () => {
 
       spyOn(fakeThis.service, 'getFilteredData').and.returnValue({ subscribe: callback => callback() });
 
-      component.applyFilter.apply(fakeThis, [applyFilterValue]);
+      component.applyFilter.apply(fakeThis, [applyFilterValue, isArrowDown]);
 
       expect(fakeThis.service.getFilteredData).toHaveBeenCalledWith(param, filterParams);
     });
 
+    it('applyFilter: should call focusItem if param `isArrowDown` is true', () => {
+      spyOn(component.service, 'getFilteredData').and.returnValue(of([{ value: 'test' }]));
+      spyOn(component, 'setOptionsByApplyFilter');
+      spyOn(component, <any>'focusItem');
+
+      component.defaultService.hasNext = true;
+      component.applyFilter('test', false, true);
+
+      expect(component.setOptionsByApplyFilter).toHaveBeenCalled();
+      expect(component['focusItem']).toHaveBeenCalled();
+    });
+
     it('applyFilter: shouldn´t call PoComboFilterService.getFilteredData() if hasNext is false', () => {
       const filterParams = 'filter';
       const applyFilterValue = 'value';
@@ -1539,49 +1605,60 @@ describe('PoComboComponent - with service:', () => {
       expect(component['initInputObservable']).not.toHaveBeenCalled();
     });
 
-    it(`searchOnEnter: should call 'controlApplyFilter' if has a service,
+    it(`searchOnEnterOrArrow: should call 'controlApplyFilter' if has a service,
       not has selectedView and value.length is greater than 'filterMinlength'`, () => {
       const value = 'newValue';
+      const event = {
+        key: 'Enter'
+      };
       component.selectedView = undefined;
       component.filterMinlength = 2;
 
       spyOn(component, 'controlApplyFilter');
 
-      component.searchOnEnter(value);
+      component.searchOnEnterOrArrow(event, value);
 
-      expect(component.controlApplyFilter).toHaveBeenCalledWith(value);
+      expect(component.controlApplyFilter).toHaveBeenCalledWith(value, false);
     });
 
-    it(`searchOnEnter: shouldn't call 'controlApplyFilter' if has a service and has selectedView`, () => {
+    it(`searchOnEnterOrArrow: shouldn't call 'controlApplyFilter' if has a service and has selectedView`, () => {
       const value = 'value';
       component.selectedView = { label: 'Option 1', value: '1' };
-
+      const event = {
+        key: 'Enter'
+      };
       spyOn(component, 'controlApplyFilter');
 
-      component.searchOnEnter(value);
+      component.searchOnEnterOrArrow(event, value);
 
       expect(component.controlApplyFilter).not.toHaveBeenCalled();
     });
 
-    it(`searchOnEnter: shouldn't call 'controlApplyFilter' if doesn't have a service`, () => {
+    it(`searchOnEnterOrArrow: shouldn't call 'controlApplyFilter' if doesn't have a service`, () => {
       const value = 'value';
       component.service = undefined;
+      const event = {
+        key: 'Enter'
+      };
 
       spyOn(component, 'controlApplyFilter');
 
-      component.searchOnEnter(value);
+      component.searchOnEnterOrArrow(event, value);
 
       expect(component.controlApplyFilter).not.toHaveBeenCalled();
     });
 
-    it(`searchOnEnter: shouldn't call 'controlApplyFilter' if value.length is less than 'filterMinlength'`, () => {
+    it(`searchOnEnterOrArrow: shouldn't call 'controlApplyFilter' if value.length is less than 'filterMinlength'`, () => {
       const value = 'value';
       component.selectedView = { label: 'Option 1', value: '1' };
       component.filterMinlength = 8;
+      const event = {
+        key: 'Enter'
+      };
 
       spyOn(component, 'controlApplyFilter');
 
-      component.searchOnEnter(value);
+      component.searchOnEnterOrArrow(event, value);
 
       expect(component.controlApplyFilter).not.toHaveBeenCalled();
     });
@@ -1719,6 +1796,19 @@ describe('PoComboComponent - with service:', () => {
 
       expect(component.visibleOptions).toEqual(mockOptions);
     });
+
+    it('should focus on the listbox item when selectedValue is true', fakeAsync(() => {
+      const listboxItem = document.createElement('div');
+      listboxItem.setAttribute('aria-selected', 'true');
+      spyOn(document, 'querySelector').and.returnValue(listboxItem);
+
+      const focusSpy = spyOn(listboxItem, 'focus');
+
+      component.selectedValue = true;
+      component['focusItem']();
+      tick(100);
+      expect(focusSpy).toHaveBeenCalled();
+    }));
   });
 });