feat(components): cria atributos para compatibilidade com edição fluída

Garante compatibilidade de foco e disabled na edição fluída.

fixes DTHFUI-11826

Author: CSimoesJr

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

@@ -32,6 +32,8 @@
       [class.po-checkbox-outline-large]="size === 'large'"
       [tabindex]="disabled || disabladTabindex ? -1 : 0"
       [attr.aria-checked]="checkboxValue"
+      [attr.data-focused-element]="!disabled"
+      [attr.data-inactive-component]="disabled"
       (blur)="onBlur()"
     >
       <span

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

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, ElementRef } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 
 import { PoThemeA11yEnum } from '../../../services';
 import { PoCheckboxComponent } from './po-checkbox.component';
@@ -34,6 +34,21 @@ describe('PoCheckboxComponent:', () => {
     expect(labelField).toBeTruthy();
   });
 
+  it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box'", fakeAsync(() => {
+    component.checkboxLabel = {
+      nativeElement: {
+        classList: {
+          contains: (cls: string) => cls === 'enable-append-box'
+        }
+      }
+    };
+    component.ngAfterViewInit();
+
+    tick(300);
+
+    expect(component.appendBox).toBeTrue();
+  }));
+
   describe('Methods:', () => {
     it('focus: should call `focus` of checkbox.', () => {
       component.checkboxLabel = new ElementRef({ focus() {}, label: 'test' });

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

@@ -104,6 +104,12 @@ export class PoCheckboxComponent extends PoCheckboxBaseComponent implements Afte
     if (this.autoFocus) {
       this.focus();
     }
+
+    setTimeout(() => {
+      if (this.checkboxLabel?.nativeElement?.classList?.contains('enable-append-box')) {
+        this.appendBox = true;
+      }
+    }, 300);
   }
 
   emitAdditionalHelp() {

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

@@ -42,6 +42,8 @@
           [class.po-input-icon-left-aa]="icon && size === 'small'"
           autocomplete="off"
           type="text"
+          [attr.data-focused-element]="!disabled"
+          [attr.data-inactive-component]="disabled"
           [attr.name]="name"
           [disabled]="disabled"
           [id]="id"

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

@@ -2217,6 +2217,21 @@ describe('PoComboComponent - with service:', () => {
       expect(spyFocus).not.toHaveBeenCalled();
     });
 
+    it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box'", fakeAsync(() => {
+      component.inputEl = {
+        nativeElement: {
+          classList: {
+            contains: (cls: string) => cls === 'enable-append-box'
+          }
+        }
+      };
+      component.ngAfterViewInit();
+
+      tick(300);
+
+      expect(component.appendBox).toBeTrue();
+    }));
+
     it('ngOnDestroy: should not unsubscribe if getSubscription is falsy.', () => {
       component['getSubscription'] = fakeSubscription;
 

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

@@ -171,6 +171,13 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI
     }
 
     this.setContainerWidth();
+
+    // Necessário para edição fluída
+    setTimeout(() => {
+      if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
+        this.appendBox = true;
+      }
+    }, 300);
   }
 
   ngOnChanges(changes: SimpleChanges) {

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

@@ -20,6 +20,8 @@
           [class.po-input-icon-right-aa]="clean && inp.value && size === 'small'"
           [class.po-input-aa]="size === 'small'"
           type="text"
+          [attr.data-focused-element]="!disabled"
+          [attr.data-inactive-component]="disabled || readonly"
           [attr.name]="name"
           [autocomplete]="autocomplete"
           [disabled]="disabled"
@@ -69,7 +71,7 @@
     }
 
     <ng-template #sharedCalendarContent>
-      <div #dialogPicker [class.po-datepicker-popup-calendar]="!verifyMobile()" tabindex="-1">
+      <div #dialogPicker [class.po-datepicker-popup-calendar]="!verifyMobile()" tabindex="-1" [hidden]="!visible">
         @if (verifyMobile()) {
           <div class="po-datepicker-calendar-overlay"></div>
         }

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

@@ -1720,6 +1720,26 @@ describe('PoDatepickerComponent:', () => {
           expect(component.focus).not.toHaveBeenCalled();
         });
       });
+
+      it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box'", fakeAsync(() => {
+        component.inputEl = {
+          nativeElement: {
+            classList: {
+              contains: (cls: string) => cls === 'enable-append-box'
+            }
+          }
+        };
+        component.iconDatepicker = {
+          buttonElement: {
+            nativeElement: document.createElement('button')
+          }
+        } as PoButtonComponent;
+        component.ngAfterViewInit();
+
+        tick(300);
+
+        expect(component.appendBox).toBeTrue();
+      }));
     });
   });
 

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

@@ -188,6 +188,13 @@ export class PoDatepickerComponent extends PoDatepickerBaseComponent implements
       this.focus();
     }
     this.renderer.setAttribute(this.iconDatepicker.buttonElement.nativeElement, 'aria-label', this.literals.open);
+
+    // Necessário para edição fluída
+    setTimeout(() => {
+      if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
+        this.appendBox = true;
+      }
+    }, 300);
   }
 
   ngOnDestroy() {

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

@@ -21,6 +21,8 @@
     <input
       #inp
       class="po-input"
+      [attr.data-focused-element]="!disabled"
+      [attr.data-inactive-component]="disabled || readonly"
       [attr.max]="max"
       [attr.min]="min"
       [attr.name]="name"