feat(fields): implementa o método que habilita o foco

Implementa o método que habilita o foco nos seguintes componentes:
- Checkbox Group
- Combo
- Datepicker
- Datepicker Range
- Decimal
- Email
- Input
- Login
- Lookup
- Multiselect
- Number
- Password
- Radio Group
- Rich Text
- Select
- Switch
- Textarea
- Upload
- Url

Fixes DTHFUI-1720

Author: alinelariguet

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

@@ -146,6 +146,21 @@ describe('PoButtonComponent: ', () => {
       expect(component.buttonElement.nativeElement.focus).toHaveBeenCalled();
     });
 
+    it('focus: should`t call `focus` of button if `disabled`', () => {
+      component.buttonElement = {
+        nativeElement: {
+          focus: () => {}
+        }
+      };
+      component.disabled = true;
+
+      spyOn(component.buttonElement.nativeElement, 'focus');
+
+      component.focus();
+
+      expect(component.buttonElement.nativeElement.focus).not.toHaveBeenCalled();
+    });
+
   });
 
   describe('Templates: ', () => {

projects/ui/src/lib/components/po-button/po-button.component.ts

@@ -31,9 +31,25 @@ export class PoButtonComponent extends PoButtonBaseComponent {
 
   /**
    * Função que atribui foco ao componente.
+   *
+   * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
+   *
+   * ```
+   * import { PoButtonComponent } from '@portinari/portinari-ui';
+   *
+   * ...
+   *
+   * @ViewChild(PoButtonComponent, { static: true }) button: PoButtonComponent;
+   *
+   * focusButton() {
+   *   this.button.focus();
+   * }
+   * ```
    */
   focus(): void {
-    this.buttonElement.nativeElement.focus();
+    if (!this.disabled) {
+      this.buttonElement.nativeElement.focus();
+    }
   }
 
   onClick() {

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

@@ -105,6 +105,47 @@ describe('PoCheckboxGroupComponent:', () => {
 
   describe('Methods:', () => {
 
+    it('focus: should call `focus` of checkbox', () => {
+      component.options = [{ label: 'teste1', value: 'teste1' }, { label: 'teste2', value: 'teste2' }];
+
+      fixture.detectChanges();
+
+      spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
+
+      component.focus();
+
+      expect(component.checkboxLabels.toArray()[0].nativeElement.focus).toHaveBeenCalled();
+    });
+
+    it('focus: should`t call `focus` of checkbox if option is `disabled`', () => {
+      component.options = [{ label: 'teste1', value: 'teste1', disabled: true }, { label: 'teste2', value: 'teste2' }];
+
+      fixture.detectChanges();
+
+      spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
+      spyOn(component.checkboxLabels.toArray()[1].nativeElement, 'focus');
+
+      component.focus();
+
+      expect(component.checkboxLabels.toArray()[0].nativeElement.focus).not.toHaveBeenCalled();
+      expect(component.checkboxLabels.toArray()[1].nativeElement.focus).toHaveBeenCalled();
+    });
+
+    it('focus: should`t call `focus` of checkbox if `disabled`', () => {
+      component.options = [{ label: 'teste1', value: 'teste1', disabled: true }, { label: 'teste2', value: 'teste2' }];
+      component.disabled = true;
+
+      fixture.detectChanges();
+
+      spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
+      spyOn(component.checkboxLabels.toArray()[1].nativeElement, 'focus');
+
+      component.focus();
+
+      expect(component.checkboxLabels.toArray()[0].nativeElement.focus).not.toHaveBeenCalled();
+      expect(component.checkboxLabels.toArray()[1].nativeElement.focus).not.toHaveBeenCalled();
+    });
+
     describe('onKeyDown:', () => {
       let option;
       let fakeEvent: any;

projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewChecked, ChangeDetectorRef, Component, forwardRef } from '@angular/core';
+import { AfterViewChecked, ChangeDetectorRef, Component, ElementRef, forwardRef, QueryList, ViewChildren } from '@angular/core';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { PoCheckboxGroupBaseComponent } from './po-checkbox-group-base.component';
@@ -42,6 +42,8 @@ import { PoCheckboxGroupOption } from './po-checkbox-group-option.interface';
 })
 export class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent implements AfterViewChecked {
 
+  @ViewChildren('checkboxLabel') checkboxLabels: QueryList<ElementRef>;
+
   constructor(private changeDetector: ChangeDetectorRef) {
     super();
   }
@@ -50,6 +52,33 @@ export class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent imple
     this.changeDetector.detectChanges();
   }
 
+  /**
+   * Função que atribui foco ao componente.
+   *
+   * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
+   *
+   * ```
+   * import { PoCheckboxGroupComponent } from '@portinari/portinari-ui';
+   *
+   * ...
+   *
+   * @ViewChild(PoCheckboxGroupComponent, { static: true }) checkbox: PoCheckboxGroupComponent;
+   *
+   * focusCheckbox() {
+   *   this.checkbox.focus();
+   * }
+   * ```
+   */
+  focus(): void {
+    if (this.checkboxLabels && !this.disabled) {
+      const checkboxLabel = this.checkboxLabels.find((_, index) => !this.options[index].disabled);
+
+      if (checkboxLabel) {
+        checkboxLabel.nativeElement.focus();
+      }
+    }
+  }
+
   onKeyDown(event: KeyboardEvent, option: PoCheckboxGroupOption) {
     const spaceBar = 32;
 

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

@@ -474,6 +474,35 @@ describe('PoComboComponent:', () => {
       stopPropagation: () => {}
     };
 
+    it('focus: should call `focus` of combo', () => {
+      component.inputElement = {
+        nativeElement: {
+          focus: () => {}
+        }
+      };
+
+      spyOn(component.inputElement.nativeElement, 'focus');
+
+      component.focus();
+
+      expect(component.inputElement.nativeElement.focus).toHaveBeenCalled();
+    });
+
+    it('focus: should`t call `focus` of combo if `disabled`', () => {
+      component.inputElement = {
+        nativeElement: {
+          focus: () => {}
+        }
+      };
+      component.disabled = true;
+
+      spyOn(component.inputElement.nativeElement, 'focus');
+
+      component.focus();
+
+      expect(component.inputElement.nativeElement.focus).not.toHaveBeenCalled();
+    });
+
     describe('onKeyUp:', () => {
 
       function fakeKeypressEvent(code: number, target: any = 1) {

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

@@ -158,6 +158,29 @@ export class PoComboComponent extends PoComboBaseComponent implements DoCheck, O
     }
   }
 
+  /**
+   * Função que atribui foco ao componente.
+   *
+   * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
+   *
+   * ```
+   * import { PoComboComponent } from '@portinari/portinari-ui';
+   *
+   * ...
+   *
+   * @ViewChild(PoComboComponent, { static: true }) combo: PoComboComponent;
+   *
+   * focusCombo() {
+   *   this.combo.focus();
+   * }
+   * ```
+   */
+  focus(): void {
+    if (!this.disabled) {
+      this.inputElement.nativeElement.focus();
+    }
+  }
+
   onKeyDown(event?: any) {
     const key = event.keyCode;
     const inputValue = event.target.value;

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

@@ -6,6 +6,7 @@
 
   <div class="po-row">
     <po-datepicker
+      #datepicker
       class="po-md-4"
       name="checkin"
       [(ngModel)]="checkin"

projects/ui/src/lib/components/po-field/po-combo/samples/sample-po-combo-hotels/sample-po-combo-hotels.component.ts

@@ -1,7 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 
-import { PoNotificationService, PoSelectOption } from '@portinari/portinari-ui';
+import { PoDatepickerComponent, PoNotificationService, PoSelectOption } from '@portinari/portinari-ui';
 
 import { SamplePoComboHotelsService } from './sample-po-combo-hotels.service';
 
@@ -40,6 +40,7 @@ export class SamplePoComboHotelsComponent {
   ];
 
   @ViewChild('bookingForm', { static: true }) form: NgForm;
+  @ViewChild('datepicker', { static: true }) datepickerComponent: PoDatepickerComponent;
 
   constructor(
     public comboService: SamplePoComboHotelsService,
@@ -49,6 +50,8 @@ export class SamplePoComboHotelsComponent {
     this.poNotification.success('Hotel booked successfully');
 
     this.formReset();
+
+    this.datepickerComponent.focus();
   }
 
   private formReset() {

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

@@ -210,6 +210,35 @@ describe('PoDatepickerRangeComponent:', () => {
       expect(component.endDateInputValue).toBe('');
     });
 
+    it('focus: should call `focus` of datepicker-range', () => {
+      component.startDateInput = {
+        nativeElement: {
+          focus: () => {}
+        }
+      };
+
+      spyOn(component.startDateInput.nativeElement, 'focus');
+
+      component.focus();
+
+      expect(component.startDateInput.nativeElement.focus).toHaveBeenCalled();
+    });
+
+    it('focus: should`t call `focus` of datepicker-range if `disabled`', () => {
+      component.startDateInput = {
+        nativeElement: {
+          focus: () => {}
+        }
+      };
+      component.disabled = true;
+
+      spyOn(component.startDateInput.nativeElement, 'focus');
+
+      component.focus();
+
+      expect(component.startDateInput.nativeElement.focus).not.toHaveBeenCalled();
+    });
+
     it('onBlur: should call `removeFocusFromDatePickerRangeField`', () => {
       spyOn(component, <any>'removeFocusFromDatePickerRangeField');
 

projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.ts

@@ -132,6 +132,29 @@ export class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent i
     this.updateModel(this.dateRange);
   }
 
+  /**
+   * Função que atribui foco ao componente.
+   *
+   * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
+   *
+   * ```
+   * import { PoDatepickerRangeComponent } from '@portinari/portinari-ui';
+   *
+   * ...
+   *
+   * @ViewChild(PoDatepickerRangeComponent, { static: true }) datepickerRange: PoDatepickerRangeComponent;
+   *
+   * focusDatepickerRange() {
+   *   this.datepickerRange.focus();
+   * }
+   * ```
+   */
+  focus(): void {
+    if (!this.disabled) {
+      this.startDateInput.nativeElement.focus();
+    }
+  }
+
   onBlur() {
     this.removeFocusFromDatePickerRangeField();
   }