refactor(timepicker): otimiza interações via teclado

Fixes DTHFUI-12748

Author: luiz-s-vasconcellos

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

@@ -31,6 +31,10 @@ import { PoButtonBaseComponent } from './po-button-base.component';
 export class PoButtonComponent extends PoButtonBaseComponent {
   @ViewChild('button', { static: true }) buttonElement: ElementRef;
 
+  constructor(public elementRef: ElementRef) {
+    super();
+  }
+
   onBlur(): void {
     this.blur.emit();
   }

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/interfaces/po-dynamic-form-field.interface.ts

@@ -79,7 +79,13 @@ export interface PoDynamicFormField extends PoDynamicField {
    */
   keydown?: Function;
 
-  /** Define a obrigatoriedade do campo. */
+  /**
+   * Define a obrigatoriedade do campo.
+   *
+   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-timepicker`, `po-input`, `po-number`,
+   * `po-decimal`, `po-select`, `po-radio-group`, `po-combo`, `po-lookup`, `po-checkbox-group`, `po-multiselect`,
+   * `po-textarea`, `po-password``, `po-upload`.
+   */
   required?: boolean;
 
   /**
@@ -88,7 +94,7 @@ export interface PoDynamicFormField extends PoDynamicField {
    *
    * > Necessário que a propriedade `required` esteja habilitada.
    *
-   * **Componentes compatíveis:** `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`.
+   * **Componentes compatíveis:** `po-datepicker`, `po-timepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`.
    */
   requiredFieldErrorMessage?: boolean;
 
@@ -98,6 +104,10 @@ export interface PoDynamicFormField extends PoDynamicField {
    * > A indicação não será exibida, se:
    * - O campo for `required`, ou;
    * - Não possuir `help` e `label`.
+   *
+   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-timepicker`, `po-input`, `po-number`,
+   * `po-decimal`, `po-select`, `po-radio-group`, `po-combo`, `po-lookup`, `po-checkbox-group`, `po-multiselect`,
+   * `po-textarea`, `po-password`.
    */
   optional?: boolean;
 
@@ -360,14 +370,15 @@ export interface PoDynamicFormField extends PoDynamicField {
    *  - required;
    *
    * > Esta mensagem pode ser exibida quando o campo estiver vazio, caso seja requerido. Em casos de componentes como
-   * `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, é necessário que a propriedade
+   * `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, `po-timepicker`, é necessário que a propriedade
    * `requiredFieldErrorMessage` esteja como `true` para que a mensagem seja exibida com o campo vazio. Componentes
    * como `po-datepicker-range`, `po-select`, `po-checkbox-group`, `po-radio-group`, `po-multiselect`, `po-combo`,
    * `po-lookup` e `po-textarea` não é necessário passar a propriedade `requiredFieldErrorMessage`.
    *
    *
    * **Componentes compatíveis:**  `po-checkbox-group`, `po-combo`, `po-datepicker`, `po-datepicker-range`,
-   *  `po-decimal`, `po-input`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio-group`, `po-select`, `po-switch`, `po-textarea`.
+   *  `po-decimal`, `po-input`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio-group`, `po-select`,
+   * `po-switch`, `po-textarea`, `po-timepicker`.
    */
   errorMessage?: string;
 
@@ -382,7 +393,8 @@ export interface PoDynamicFormField extends PoDynamicField {
    * e um tooltip será exibido ao passar o mouse sobre a mensagem para mostrar o conteúdo completo.
    *
    * **Componentes compatíveis:** `po-checkbox-group`, `po-combo`, `po-datepicker`, `po-datepicker-range`,
-   *  `po-decimal`, `po-input`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio-group`, `po-select`, `po-switch`, `po-textarea`.
+   *  `po-decimal`, `po-input`, `po-lookup`, `po-multiselect`, `po-number`, `po-password`, `po-radio-group`, `po-select`,
+   * `po-switch`, `po-textarea`, `po-timepicker`.
    *
    * @default `false`
    */
@@ -426,6 +438,8 @@ export interface PoDynamicFormField extends PoDynamicField {
    *
    * Também pode-se utilizar em conjunto com `searchService`, informando uma lista de propriedades que será utilizado
    * para formatação da exibição no campo, por exemplo: ["id", "name"].
+   *
+   * **Componentes compatíveis:** `po-datepicker`, `po-timepicker`, `po-lookup`.
    */
   format?: string | Array<string>;
 
@@ -479,7 +493,12 @@ export interface PoDynamicFormField extends PoDynamicField {
    */
   order?: number;
 
-  /** Mensagem que será exibida enquanto o campo não estiver preenchido. */
+  /**
+   * Mensagem que será exibida enquanto o campo não estiver preenchido.
+   *
+   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-timepicker`, `po-input`, `po-number`,
+   *  `po-decimal`, `po-select`, `po-combo`, `po-lookup`, `po-multiselect`, `po-textarea`, `po-password`.
+   */
   placeholder?: string;
 
   /**
@@ -495,7 +514,8 @@ export interface PoDynamicFormField extends PoDynamicField {
    * ```
    *
    * > Para ver quais linguagens suportadas acesse [`I18n`](documentation/po-i18n)
-   * > A propriedade será repassada para os componentes que suportam a mesma.
+   *
+   * **Componentes compatíveis:** `po-datepicker`, `po-decimal`, `po-timepicker`.
    */
   locale?: string;
 
@@ -508,7 +528,8 @@ export interface PoDynamicFormField extends PoDynamicField {
 
   /** Indica que o campo será somente leitura.
    *
-   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-input`, `po-number`, `po-decimal`, `po-select`, `po-textarea`, `po-password`
+   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-timepicker`, `po-input`, `po-number`,
+   * `po-decimal`, `po-select`, `po-textarea`, `po-password`.
    */
   readonly?: boolean;
 
@@ -521,14 +542,16 @@ export interface PoDynamicFormField extends PoDynamicField {
 
   /** Se verdadeiro, o campo receberá um botão para ser limpo.
    *
-   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-input`, `po-number`, `po-decimal`, `po-combo`, `po-lookup`, `po-password`
+   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-input`, `po-number`, `po-decimal`,
+   * `po-combo`, `po-lookup`, `po-password`, `po-timepicker`.
    */
   clean?: boolean;
 
   /**
    * Define a propriedade nativa `autocomplete` do campo como off.
    *
-   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-input`, `po-number`, `po-decimal`, `po-lookup`, `po-password`
+   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-input`, `po-number`, `po-decimal`,
+   * `po-lookup`, `po-password`, `po-timepicker`.
    */
   noAutocomplete?: boolean;
 
@@ -838,6 +861,10 @@ export interface PoDynamicFormField extends PoDynamicField {
    *
    * > Não será exibida a indicação se:
    * - Não possuir `p-help` e/ou `p-label`.
+   *
+   * **Componentes compatíveis:** `po-datepicker`, `po-datepicker-range`, `po-timepicker`, `po-input`, `po-number`,
+   * `po-decimal`, `po-select`, `po-radio-group`, `po-combo`, `po-lookup`, `po-checkbox-group`, `po-multiselect`,
+   * `po-textarea`, `po-password`, `po-upload`.
    */
   showRequired?: boolean;
 

projects/ui/src/lib/components/po-field/po-timepicker/enums/po-timepicker-iso-format.enum.ts

@@ -1,5 +1,5 @@
 /**
- * @usedBy PoTimepickerComponent
+ * @usedBy PoTimepickerComponent, PoDynamicFormComponent
  *
  * @description
  *

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

@@ -697,7 +697,10 @@ export abstract class PoTimepickerBaseComponent implements ControlValueAccessor,
   }
 
   validate(c: AbstractControl): { [key: string]: any } {
-    this.errorPattern = this.isGeneratedErrorPattern(this.errorPattern) ? '' : this.errorPattern;
+    // Limpar errorPattern se valor atual é válido (não tem erro parcial ou erro anterior)
+    if (!this.hasValidationValue() && this.isValidTimeString(this.getValidationValue(c.value))) {
+      this.errorPattern = this.isGeneratedErrorPattern(this.errorPattern) ? '' : this.errorPattern;
+    }
 
     if (!this.hasValidatorRequired && this.showErrorMessageRequired && c.hasValidator(Validators.required)) {
       this.hasValidatorRequired = true;

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

@@ -23,7 +23,7 @@
           [class.po-timepicker-field-disabled]="isDisabled"
           [class.po-timepicker-field-readonly]="readonly"
           [class.po-timepicker-field-focused]="isSegmentFocused"
-          [attr.data-focused-element]="!isDisabled"
+          [class.po-timepicker-field-placeholder]="isPlaceholder"
           [attr.data-inactive-component]="isDisabled || readonly"
           [attr.p-size]="size"
           [attr.data-append-in-body]="appendBox"
@@ -45,6 +45,7 @@
               [attr.aria-valuemin]="is12HourFormat ? 1 : 0"
               [attr.aria-valuemax]="is12HourFormat ? 12 : 23"
               [attr.aria-valuetext]="hourDisplay || null"
+              [attr.data-focused-element]="!isDisabled"
               [attr.name]="name"
               [autocomplete]="autocomplete"
               [disabled]="isDisabled"
@@ -126,9 +127,8 @@
                 type="text"
                 [value]="periodDisplay || 'AM'"
                 [disabled]="isDisabled"
-                [readonly]="true"
                 [attr.tabindex]="isDisabled || readonly ? -1 : 0"
-                role="button"
+                role="spinbutton"
                 [attr.aria-label]="periodDisplay || 'AM'"
                 (keydown)="onPeriodSegmentKeydown($event)"
                 (click)="onPeriodSegmentClick($event)"
@@ -166,10 +166,11 @@
                 [class.po-button-tertiary-danger]="getErrorPattern()"
                 p-icon="ICON_CLOCK"
                 p-kind="tertiary"
+                [p-aria-label]="literals.open"
                 [p-disabled]="isDisabled || readonly"
                 [p-size]="size"
                 (keydown)="onKeyPress($event)"
-                (keydown.tab)="handleCleanKeyboardTab($event)"
+                (keydown.tab)="handleTimepickerButtonKeyboardTab($event)"
                 (p-click)="togglePicker(false)"
               >
               </po-button>
@@ -204,28 +205,30 @@
     }
 
     <ng-template #sharedTimerContent>
-      <div #dialogPicker [class.po-timepicker-popup-timer]="!verifyMobile()" tabindex="-1" [hidden]="!visible">
-        @if (verifyMobile()) {
-          <div class="po-timepicker-timer-overlay"></div>
-        }
-        <po-timer
-          #timer
-          [class.po-timepicker-timer-mobile]="verifyMobile()"
-          [p-format]="format"
-          [p-locale]="locale"
-          [p-show-seconds]="showSeconds"
-          [p-minute-interval]="minuteInterval"
-          [p-second-interval]="secondInterval"
-          [p-min-time]="minTime"
-          [p-max-time]="maxTime"
-          [p-size]="size"
-          [p-value]="timeValue"
-          (p-change)="timerSelected($event)"
-          (p-boundary-tab)="onTimerBoundaryTab($event)"
-          (keydown)="onTimerKeyDown($event)"
-          (focusout)="onTimerFocusOut($event)"
-        ></po-timer>
-      </div>
+      @if (visible) {
+        <div #dialogPicker [class.po-timepicker-popup-timer]="!verifyMobile()" tabindex="-1">
+          @if (verifyMobile()) {
+            <div class="po-timepicker-timer-overlay"></div>
+          }
+          <po-timer
+            #timer
+            [class.po-timepicker-timer-mobile]="verifyMobile()"
+            [p-format]="format"
+            [p-locale]="locale"
+            [p-show-seconds]="showSeconds"
+            [p-minute-interval]="minuteInterval"
+            [p-second-interval]="secondInterval"
+            [p-min-time]="minTime"
+            [p-max-time]="maxTime"
+            [p-size]="size"
+            [p-value]="timeValue"
+            (p-change)="timerSelected($event)"
+            (p-boundary-tab)="onTimerBoundaryTab($event)"
+            (keydown)="onTimerKeyDown($event)"
+            (focusout)="onTimerFocusOut($event)"
+          ></po-timer>
+        </div>
+      }
     </ng-template>
 
     <span class="po-sr-only" aria-live="polite" aria-atomic="true">{{ ariaLiveMessage }}</span>