feat(components): implementa alternância no nível de acessibilidade

Implementa alternância no nível de acessibilidade dos componentes de formulário.

fixes DTHFUI-10108

projects/templates/src/lib/components/po-page-dynamic-edit/enums/po-page-dynamic-edit-actions.size.enum.ts

@@ -0,0 +1,14 @@
+/**
+ * @usedBy PoPageDynamicEditComponent
+ *
+ * @description
+ *
+ * Enum utilizado para configurar o tamanho (`p-size`) dos fields no componente.
+ */
+export enum PoPageDynamicEditActionsSize {
+  /** Define o tamanho dos fields com altura de 32px, disponível para acessibilidade AA. */
+  small = 'small',
+
+  /** Define o tamanho dos fields com altura de 44px. */
+  medium = 'medium'
+}

projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.html

@@ -12,13 +12,13 @@
 </ng-template>
 
 <ng-template #formFieldsTemplate>
-  <po-dynamic-form #dynamicForm [p-fields]="controlFields" [p-value]="model"> </po-dynamic-form>
+  <po-dynamic-form #dynamicForm [p-fields]="controlFields" [p-value]="model" [p-size]="size"> </po-dynamic-form>
 
   <div *ngIf="detailFields.length > 0" class="po-sm-12">
     <po-divider [p-label]="detailFields[0].divider"></po-divider>
 
     <div class="po-row po-mb-2">
-      <po-button [p-label]="literals.detailActionNew" (p-click)="detailActionNew()"></po-button>
+      <po-button [p-label]="literals.detailActionNew" (p-click)="detailActionNew()" [p-size]="size"></po-button>
     </div>
 
     <po-grid

projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.spec.ts

@@ -6,7 +6,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { throwError, of } from 'rxjs';
 
-import { PoDialogModule } from '@po-ui/ng-components';
+import { PoDialogModule, PoThemeA11yEnum } from '@po-ui/ng-components';
 
 import * as util from './../../utils/util';
 import { expectPropertiesValues } from './../../util-test/util-expect.spec';
@@ -19,17 +19,25 @@ import { PoDynamicFormStubComponent } from './test/po-dynamic-form-stub-componen
 import { PoPageDynamicEditBeforeSave } from './interfaces/po-page-dynamic-edit-before-save.interface';
 import { PoPageDynamicEditBeforeSaveNew } from './interfaces/po-page-dynamic-edit-before-save-new.interface';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { PoThemeService } from '../../../../../ui/src/lib/services/po-theme/po-theme.service';
 
 describe('PoPageDynamicEditComponent: ', () => {
   let component: PoPageDynamicEditComponent;
   let fixture: ComponentFixture<PoPageDynamicEditComponent>;
+  let poThemeService: jasmine.SpyObj<PoThemeService>;
 
   beforeEach(waitForAsync(() => {
+    poThemeService = jasmine.createSpyObj('PoThemeService', ['getA11yDefaultSize', 'getA11yLevel']);
+
     TestBed.configureTestingModule({
       declarations: [PoPageDynamicEditComponent, PoDynamicFormStubComponent],
       schemas: [NO_ERRORS_SCHEMA],
       imports: [FormsModule, RouterTestingModule.withRoutes([]), PoDialogModule],
-      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        { provide: PoThemeService, useValue: poThemeService }
+      ]
     }).compileComponents();
   }));
 
@@ -206,6 +214,46 @@ describe('PoPageDynamicEditComponent: ', () => {
 
       expect(component.duplicates).toEqual(duplicates);
     });
+
+    describe('p-size:', () => {
+      it('should update size with valid values', () => {
+        const validValues = ['medium'];
+
+        expectPropertiesValues(component, 'size', validValues, validValues);
+      });
+
+      it('should update size to `medium` with invalid values', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('medium');
+
+        const invalidValues = ['extraSmall', 'extraLarge'];
+
+        expectPropertiesValues(component, 'size', invalidValues, 'medium');
+      });
+
+      it('should use default size when size is not set', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('small');
+
+        component.size = undefined;
+        expect(component.size).toBe('small');
+      });
+
+      it('should return `p-size` if it is defined', () => {
+        component['_size'] = 'large';
+        expect(component.size).toBe('large');
+      });
+
+      it('should call `getDefaultSize` and return its value if `p-size` is null or undefined', () => {
+        spyOn(component as any, 'getDefaultSize').and.returnValue('medium');
+
+        component['_size'] = null;
+        expect(component.size).toBe('medium');
+        expect(component['getDefaultSize']).toHaveBeenCalled();
+
+        component['_size'] = undefined;
+        expect(component.size).toBe('medium');
+        expect(component['getDefaultSize']).toHaveBeenCalledTimes(2);
+      });
+    });
   });
 
   describe('Methods: ', () => {
@@ -1611,5 +1659,46 @@ describe('PoPageDynamicEditComponent: ', () => {
         expect(component.model).toEqual(expectedModel);
       });
     });
+
+    describe('validateSize:', () => {
+      it('should return the same size if valid and accessibility level allows it', () => {
+        poThemeService.getA11yLevel.and.returnValue(PoThemeA11yEnum.AA);
+
+        expect(component['validateSize']('small')).toBe('small');
+        expect(component['validateSize']('medium')).toBe('medium');
+      });
+
+      it('should return `medium` if p-size is `small` and accessibility level is not `AA`', () => {
+        poThemeService.getA11yLevel.and.returnValue(PoThemeA11yEnum.AAA);
+
+        expect(component['validateSize']('small')).toBe('medium');
+      });
+
+      it('should return default size from getA11yDefaultSize if value is invalid', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('small');
+
+        expect(component['validateSize']('invalid')).toBe('small');
+      });
+
+      it('should return `medium` if default size is `medium`', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('medium');
+
+        expect(component['validateSize']('invalid')).toBe('medium');
+      });
+    });
+
+    describe('getDefaultSize:', () => {
+      it('should return `small` if getA11yDefaultSize returns `small`', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('small');
+
+        expect(component['getDefaultSize']()).toBe('small');
+      });
+
+      it('should return `medium` if getA11yDefaultSize returns `medium`', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('medium');
+
+        expect(component['getDefaultSize']()).toBe('medium');
+      });
+    });
   });
 });

projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, OnDestroy, Inject, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Observable, concat, of, Subscription, EMPTY, throwError } from 'rxjs';
@@ -13,6 +13,7 @@ import {
   PoLanguageService,
   PoNotificationService,
   PoPageAction,
+  PoThemeService,
   poLocaleDefault
 } from '@po-ui/ng-components';
 
@@ -28,6 +29,7 @@ import { PoPageDynamicOptionsSchema } from '../../services/po-page-customization
 import { PoPageDynamicEditActionsService } from './po-page-dynamic-edit-actions.service';
 import { PoPageDynamicEditBeforeCancel } from './interfaces/po-page-dynamic-edit-before-cancel.interface';
 import { PoPageDynamicEditLiterals } from './interfaces/po-page-dynamic-edit-literals.interface';
+import { PoPageDynamicEditActionsSize } from './enums/po-page-dynamic-edit-actions.size.enum';
 
 type UrlOrPoCustomizationFunction = string | (() => PoPageDynamicEditOptions);
 type SaveAction = PoPageDynamicEditActions['save'] | PoPageDynamicEditActions['saveNew'];
@@ -348,6 +350,7 @@ export class PoPageDynamicEditComponent implements OnInit, OnDestroy {
   private _keys: Array<any> = [];
   private _pageActions: Array<PoPageAction> = [];
   private _notificationType?: string = poNotificationTypeDefault;
+  private _size?: string = undefined;
   /**
    * @optional
    *
@@ -480,18 +483,69 @@ export class PoPageDynamicEditComponent implements OnInit, OnDestroy {
     return this._fields;
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Permite definir o tamanho dos fields entre `small` ou `medium`, conforme os valores especificados
+   * no enum `PoDynamicFieldSize`.
+   *
+   * Os componentes que suportam essa configuração são:
+   * - `po-button`
+   * - `po-button-group`
+   * - `po-checkbox`
+   * - `po-checkbox-group`
+   * - `po-combo`
+   * - `po-datepicker`
+   * - `po-datepicker-range`
+   * - `po-decimal`
+   * - `po-dropdown`
+   * - `po-email`
+   * - `po-input`
+   * - `po-login`
+   * - `po-lookup`
+   * - `po-multiselect`
+   * - `po-number`
+   * - `po-password`
+   * - `po-radio-group`
+   * - `po-richtext`
+   * - `po-search`
+   * - `po-select`
+   * - `po-switch`
+   * - `po-textarea`
+   * - `po-upload`
+   * - `po-url`
+   *
+   * > A medida `small` **só estará disponível** quando a acessibilidade AA estiver configurada. Caso contrário, mesmo
+   * que o tamanho seja definido como `small`, a medida padrão `medium` será mantida. Para mais informações sobre como
+   * configurar a acessibilidade AA, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
+   *
+   * @default `medium`
+   */
+  @Input('p-size') set size(value: string) {
+    this._size = this.validateSize(value);
+  }
+
+  get size(): string {
+    return this._size ?? this.getDefaultSize();
+  }
+
+  /* eslint-disable max-params */
   constructor(
-    private router: Router,
-    private activatedRoute: ActivatedRoute,
-    private poNotification: PoNotificationService,
-    private poDialogService: PoDialogService,
-    private poPageDynamicService: PoPageDynamicService,
-    private poPageCustomizationService: PoPageCustomizationService,
-    private poPageDynamicEditActionsService: PoPageDynamicEditActionsService,
+    public router: Router,
+    public activatedRoute: ActivatedRoute,
+    public poNotification: PoNotificationService,
+    public poDialogService: PoDialogService,
+    public poPageDynamicService: PoPageDynamicService,
+    public poPageCustomizationService: PoPageCustomizationService,
+    public poPageDynamicEditActionsService: PoPageDynamicEditActionsService,
+    protected poThemeService: PoThemeService,
     languageService: PoLanguageService
   ) {
     this.language = languageService.getShortLanguage();
   }
+  /* eslint-enable max-params */
 
   ngOnInit(): void {
     this.loadDataFromAPI();
@@ -724,6 +778,12 @@ export class PoPageDynamicEditComponent implements OnInit, OnDestroy {
     return this.poPageCustomizationService.getCustomOptions(onLoad, originalOption, pageOptionSchema);
   }
 
+  private getDefaultSize(): string {
+    return this.poThemeService.getA11yDefaultSize() === 'small'
+      ? PoPageDynamicEditActionsSize.small
+      : PoPageDynamicEditActionsSize.medium;
+  }
+
   private getMetadata(serviceApiFromRoute: string, paramId: string | number, onLoad: UrlOrPoCustomizationFunction) {
     const typeMetadata = paramId ? 'edit' : 'create';
 
@@ -923,4 +983,16 @@ export class PoPageDynamicEditComponent implements OnInit, OnDestroy {
   private isObject(value: any): boolean {
     return !!value && typeof value === 'object' && !Array.isArray(value);
   }
+
+  private validateSize(value: string): string {
+    if (value && Object.values(PoPageDynamicEditActionsSize).includes(value as PoPageDynamicEditActionsSize)) {
+      if (value === PoPageDynamicEditActionsSize.small && this.poThemeService.getA11yLevel() !== 'AA') {
+        return PoPageDynamicEditActionsSize.medium;
+      }
+      return value;
+    }
+    return this.poThemeService.getA11yDefaultSize() === 'small'
+      ? PoPageDynamicEditActionsSize.small
+      : PoPageDynamicEditActionsSize.medium;
+  }
 }

projects/ui/src/lib/components/po-button-group/enums/po-button-group-size.enum.ts

@@ -0,0 +1,14 @@
+/**
+ * @usedBy PoButtonGroupComponent
+ *
+ * @description
+ *
+ * Enum utilizado para configurar o tamanho (`p-size`) dos botões do componente.
+ */
+export enum PoButtonGroupSize {
+  /** Define o tamanho pequeno com altura de 32px, disponível para acessibilidade AA. */
+  small = 'small',
+
+  /** Define o tamanho padrão com altura de 44px. */
+  medium = 'medium'
+}

projects/ui/src/lib/components/po-button-group/po-button-group-toggle.enum.ts → projects/ui/src/lib/components/po-button-group/enums/po-button-group-toggle.enum.ts

@@ -3,7 +3,7 @@
  *
  * @description
  *
- * Define o tipo de seleção dos botões do `po-button-group`.
+ * Tipos de seleção (`p-toggle`) disponíveis para o componente.
  */
 export enum PoButtonGroupToggle {
   /** Seleção múltipla. */

projects/ui/src/lib/components/po-button-group/index.ts

@@ -1,5 +1,5 @@
 export * from './po-button-group-item.interface';
-export * from './po-button-group-toggle.enum';
+export * from './enums/po-button-group-toggle.enum';
 export * from './po-button-group.component';
 
 export * from './po-button-group.module';