feat(theme): melhoria no tema para diferentes acessibilidades

adicionado possibilidade de passar mais de uma opção de tema de acessibilidade como exemplo: ‘AA’ e ‘AAA’. fixes DTHFUI-9037
po-ui · Nov 14, 2024 · 6a9ac96 · 6a9ac96
1 parent 742ec8c
commit 6a9ac96
Show file tree

Hide file tree

Showing 25 changed files with 1,146 additions and 280 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ speed-measure-plugin.json
 .vscode
 
 # IDE - VSCode
+.vscode
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
@@ -35,6 +36,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+.angular
 /.angular/cache
 /.sass-cache
 /connect.lock

diff --git a/projects/app/src/app/app.module.ts b/projects/app/src/app/app.module.ts
@@ -4,9 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { PoModule } from '@po-ui/ng-components';
-
 import { AppComponent } from './app.component';
+import { PoModule } from '../../../ui/src/lib';
 
 @NgModule({
   declarations: [AppComponent],

diff --git a/projects/portal/src/app/app.component.ts b/projects/portal/src/app/app.component.ts
@@ -30,14 +30,13 @@ export class AppComponent implements OnInit, OnDestroy {
     private poTheme: PoThemeService,
     public router: Router
   ) {
-    const _poTheme = this.poTheme.persistThemeActive();
+    const _poTheme = this.poTheme.applyTheme();
     if (!_poTheme) {
       this.theme = poThemeConstant.active;
+      this.poTheme.setTheme(poThemeConstant, this.theme);
     } else {
-      this.theme = _poTheme.active || 0;
+      this.theme = typeof _poTheme.active === 'object' ? _poTheme.active.type : _poTheme.active;
     }
-
-    this.poTheme.setTheme(poThemeConstant, this.theme);
   }
 
   async ngOnInit() {

diff --git a/projects/portal/src/app/theme-builder/theme-builder.component.css b/projects/portal/src/app/theme-builder/theme-builder.component.css
@@ -238,10 +238,6 @@ p {
   }
 }
 
-.widget-items > .po-widget {
-  height: 255px;
-}
-
 .widget-color > .po-widget {
   background-color: var(--color-neutral-light-10);
 }

diff --git a/projects/portal/src/app/theme-builder/theme-builder.component.html b/projects/portal/src/app/theme-builder/theme-builder.component.html
@@ -152,7 +152,7 @@
           <po-menu-filter class="menu-filter"></po-menu-filter>
         </div>
       </div> -->
-      <div class="po-row po-p-0 po-mt-2 po-mb-3">
+      <div class="po-row po-p-0 po-mt-2 po-mb-3" style="row-gap: 8px">
         <po-widget [class.hide]="!botaoPrimaryView" class="widget-items po-sm-12 po-md-6 po-lg-4 po-xl-3 po-pl-0">
           <po-widget class="widget-menu">
             <div class="po-row row-menu">

diff --git a/projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.css b/projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.css
@@ -7,3 +7,7 @@
   background-color: #060402c7;
   color: #f7f6f5;
 }
+
+.items-end {
+  align-items: end;
+}
diff --git a/projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.html b/projects/portal/src/app/tools/tools-dynamic-form/tools-dynamic-form.component.html
@@ -3,7 +3,7 @@
     <po-tabs>
       <po-tab p-label="Configuração" p-active>
         <form #generatorForm="ngForm" (ngSubmit)="addField(quickField)" autocomplete="off">
-          <div class="po-row">
+          <div class="po-row items-end">
             <po-divider class="po-md-12" p-label="Novo campo"></po-divider>
             <po-input
               class="po-sm-8 po-md-6"
@@ -15,13 +15,11 @@
             >
             </po-input>
 
-            <button
-              class="po-button po-button-primary po-sm-4 po-md-2 po-mt-4 po-mb-1"
-              type="submit"
-              [disabled]="generatorForm.invalid"
-            >
-              Adicionar
-            </button>
+            <po-button
+              class="po-sm-4 po-md-2 po-mb-2"
+              [p-disabled]="generatorForm.invalid"
+              p-label="Adicionar"
+            ></po-button>
           </div>
 
           <div class="po-row">

diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html
@@ -7,8 +7,18 @@
     [p-required]="required"
     [p-show-required]="showRequired"
   >
-    <div cdkOverlayOrigin #trigger="cdkOverlayOrigin" class="po-field-container-content po-combo-container-content">
-      <div *ngIf="icon" class="po-field-icon-container-left">
+    <div
+      #searchContainer
+      cdkOverlayOrigin
+      #trigger="cdkOverlayOrigin"
+      class="po-field-container-content po-combo-container-content"
+    >
+      <div
+        *ngIf="icon"
+        class="po-field-icon-container-left"
+        [style.top]="getPaddingTop()"
+        [style.bottom]="getPaddingBottom()"
+      >
         <po-icon
           class="po-field-icon po-icon-input"
           [class.po-field-icon-disabled]="disabled"
@@ -35,7 +45,7 @@
         (keydown)="onKeyDown($event)"
       />
 
-      <div class="po-field-icon-container-right">
+      <div class="po-field-icon-container-right" [style.top]="getPaddingTop()">
         <po-clean
           tabindex="0"
           role="button"

diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts
@@ -100,6 +100,7 @@ const poComboContainerPositionDefault = 'bottom';
   ]
 })
 export class PoComboComponent extends PoComboBaseComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild('searchContainer', { read: ElementRef, static: true }) searchContainer: ElementRef;
   @ContentChild(PoComboOptionTemplateDirective, { static: true }) comboOptionTemplate: PoComboOptionTemplateDirective;
   @ViewChild('outerContainer ', { read: ElementRef }) outerContainer: ElementRef;
   @ViewChild('containerElement', { read: ElementRef }) containerElement: ElementRef;
@@ -716,4 +717,12 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI
       item?.focus();
     });
   }
+
+  getPaddingTop() {
+    return window.getComputedStyle(this.searchContainer.nativeElement).paddingTop;
+  }
+
+  getPaddingBottom() {
+    return window.getComputedStyle(this.searchContainer.nativeElement).paddingBottom;
+  }
 }
diff --git a/...cts/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.html b/...cts/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range.component.html
@@ -6,64 +6,68 @@
   [p-required]="required"
   [p-show-required]="showRequired"
 >
-  <div
-    #dateRangeField
-    class="po-datepicker-range-field po-input"
-    [class.po-datepicker-range-field-disabled]="disabled"
-    [attr.disabled]="disabled"
-  >
-    <div class="po-datepicker-range-start-date">
-      <input
-        #startDateInput
-        class="po-datepicker-range-input"
-        maxlength="10"
-        type="text"
-        [attr.aria-label]="label"
-        [autocomplete]="autocomplete"
-        [disabled]="disabled"
-        [name]="startDateInputName"
-        [readonly]="readonly"
-        (blur)="onBlur($event)"
-        (focus)="onFocus($event)"
-        (keydown)="onKeydown($event)"
-        (keyup)="onKeyup($event)"
-        (click)="eventOnClick($event)"
-      />
-    </div>
+  <div class="po-field-container-content">
+    <div class="po-field-container-input">
+      <div
+        #dateRangeField
+        class="po-datepicker-range-field po-input"
+        [class.po-datepicker-range-field-disabled]="disabled"
+        [attr.disabled]="disabled"
+      >
+        <div class="po-datepicker-range-start-date">
+          <input
+            #startDateInput
+            class="po-datepicker-range-input"
+            maxlength="10"
+            type="text"
+            [attr.aria-label]="label"
+            [autocomplete]="autocomplete"
+            [disabled]="disabled"
+            [name]="startDateInputName"
+            [readonly]="readonly"
+            (blur)="onBlur($event)"
+            (focus)="onFocus($event)"
+            (keydown)="onKeydown($event)"
+            (keyup)="onKeyup($event)"
+            (click)="eventOnClick($event)"
+          />
+        </div>
 
-    <div class="po-datepicker-range-separator">-</div>
+        <div class="po-datepicker-range-separator">-</div>
 
-    <div class="po-datepicker-range-end-date">
-      <input
-        #endDateInput
-        class="po-datepicker-range-input"
-        maxlength="10"
-        type="text"
-        [autocomplete]="autocomplete"
-        [disabled]="disabled"
-        [name]="endDateInputName"
-        [readonly]="readonly"
-        (blur)="onBlur($event)"
-        (focus)="onFocus($event)"
-        (keydown)="onKeydown($event)"
-        (keyup)="onKeyup($event)"
-        (click)="eventOnClick($event)"
-      />
-    </div>
+        <div class="po-datepicker-range-end-date">
+          <input
+            #endDateInput
+            class="po-datepicker-range-input"
+            maxlength="10"
+            type="text"
+            [autocomplete]="autocomplete"
+            [disabled]="disabled"
+            [name]="endDateInputName"
+            [readonly]="readonly"
+            (blur)="onBlur($event)"
+            (focus)="onFocus($event)"
+            (keydown)="onKeydown($event)"
+            (keyup)="onKeyup($event)"
+            (click)="eventOnClick($event)"
+          />
+        </div>
 
-    <div class="po-datepicker-range-icon">
-      <po-clean class="po-icon-input" *ngIf="enableCleaner" (p-change-event)="clear()"></po-clean>
-    </div>
+        <div class="po-datepicker-range-icon">
+          <po-clean class="po-icon-input" *ngIf="enableCleaner" (p-change-event)="clear()"></po-clean>
+        </div>
 
-    <div class="po-datepicker-range-icon">
-      <po-icon
-        #iconCalendar
-        [p-icon]="!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'"
-        class="po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}"
-        [class.po-field-icon-disabled]="disabled || readonly"
-        (click)="toggleCalendar()"
-      >
-      </po-icon>
+        <div class="po-datepicker-range-icon">
+          <po-icon
+            #iconCalendar
+            [p-icon]="!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'"
+            class="po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}"
+            [class.po-field-icon-disabled]="disabled || readonly"
+            (click)="toggleCalendar()"
+          >
+          </po-icon>
+        </div>
+      </div>
     </div>
   </div>
 

diff --git a/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.html b/projects/ui/src/lib/components/po-field/po-lookup/po-lookup.component.html
@@ -6,39 +6,49 @@
   [p-required]="required"
   [p-show-required]="showRequired"
 >
-  <div class="po-lookup" [class.po-lookup-disabled]="disabled" *ngIf="!disclaimers.length; else disclaimersTemplate">
-    <input
-      #inp
-      class="po-lookup-input po-lookup-input-trigger"
-      [ngClass]="clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'"
-      [id]="id"
-      type="text"
-      [autocomplete]="autocomplete"
-      [disabled]="disabled"
-      [placeholder]="placeholder"
-      [required]="required"
-      (blur)="searchEvent()"
-    />
-    <div class="po-lookup-buttons">
-      <button
-        *ngIf="clean && !disabled && !!inp.value"
-        type="button"
-        class="po-lookup-button po-lookup-button-clean"
-        [ariaLabel]="literals.clean"
-        (click)="cleanModel()"
-      >
-        <po-clean class="po-icon-input"></po-clean>
-      </button>
-      <button
-        #iconLookup
-        class="po-lookup-button po-lookup-button-trigger"
-        [class.po-lookup-button-disabled]="disabled"
-        [ariaLabel]="literals.search"
-        (click)="openLookup()"
+  <div
+    class="po-field-container-content po-lookup"
+    [class.po-lookup-disabled]="disabled"
+    *ngIf="!disclaimers.length; else disclaimersTemplate"
+  >
+    <div class="po-search-container-wrapper">
+      <input
+        #inp
+        class="po-lookup-input po-lookup-input-trigger"
+        [ngClass]="clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'"
+        [id]="id"
+        type="text"
+        [autocomplete]="autocomplete"
         [disabled]="disabled"
-      >
-        <po-icon p-icon="ICON_SEARCH" class="po-icon-input"></po-icon>
-      </button>
+        [placeholder]="placeholder"
+        [required]="required"
+        (blur)="searchEvent()"
+      />
+
+      <div class="po-field-icon-container-right po-lookup-buttons">
+        <po-clean
+          *ngIf="clean && !disabled && !!inp.value"
+          tabindex="0"
+          role="button"
+          [attr.aria-label]="literals.clean"
+          class="po-icon-input po-lookup-button po-lookup-button-clean"
+          [p-element-ref]="inp"
+          (p-change-event)="cleanModel()"
+          (click)="cleanModel(); $event.preventDefault()"
+          (keydown.enter)="cleanModel(); $event.preventDefault()"
+        >
+        </po-clean>
+        <div
+          tabindex="0"
+          role="button"
+          class="po-lookup-button po-lookup-button-trigger po-field-icon"
+          [class.po-field-icon-disabled]="disabled"
+          [ariaLabel]="literals.search"
+          (click)="openLookup()"
+        >
+          <po-icon p-icon="ICON_SEARCH" [class.po-field-icon]="!disabled"></po-icon>
+        </div>
+      </div>
     </div>
   </div>
   <po-field-container-bottom [p-help]="help" [p-disabled]="disabled"></po-field-container-bottom>