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 · Dec 11, 2024 · 5c5ce37 · 5c5ce37
1 parent 7f2ba85
commit 5c5ce37
Show file tree

Hide file tree

Showing 21 changed files with 1,118 additions and 292 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
@@ -5,7 +5,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { PoModule } from '@po-ui/ng-components';
-
 import { AppComponent } from './app.component';
 
 @NgModule({

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/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,60 +7,67 @@
     [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">
-        <po-icon
-          class="po-field-icon po-icon-input"
-          [class.po-field-icon-disabled]="disabled"
-          [p-icon]="icon"
-        ></po-icon>
-      </div>
+    <div
+      #searchContainer
+      cdkOverlayOrigin
+      #trigger="cdkOverlayOrigin"
+      class="po-field-container-content po-combo-container-content"
+    >
+      <div class="po-combo-container-wrapper">
+        <div *ngIf="icon" class="po-field-icon-container-left">
+          <po-icon
+            class="po-field-icon po-icon-input"
+            [class.po-field-icon-disabled]="disabled"
+            [p-icon]="icon"
+          ></po-icon>
+        </div>
 
-      <input
-        #inp
-        class="po-combo-input"
-        [ngClass]="clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'"
-        [class.po-input-icon-left]="icon"
-        autocomplete="off"
-        type="text"
-        [attr.name]="name"
-        [disabled]="disabled"
-        [id]="id"
-        [placeholder]="disabled ? '' : placeholder"
-        [required]="required"
-        (click)="toggleComboVisibility()"
-        (keyup)="onKeyUp($event)"
-        (blur)="onBlur()"
-        (keyup)="searchOnEnterOrArrow($event, $event.target.value)"
-        (keydown)="onKeyDown($event)"
-      />
+        <input
+          #inp
+          class="po-combo-input"
+          [ngClass]="clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'"
+          [class.po-input-icon-left]="icon"
+          autocomplete="off"
+          type="text"
+          [attr.name]="name"
+          [disabled]="disabled"
+          [id]="id"
+          [placeholder]="disabled ? '' : placeholder"
+          [required]="required"
+          (click)="toggleComboVisibility()"
+          (keyup)="onKeyUp($event)"
+          (blur)="onBlur()"
+          (keyup)="searchOnEnterOrArrow($event, $event.target.value)"
+          (keydown)="onKeyDown($event)"
+        />
 
-      <div class="po-field-icon-container-right">
-        <po-clean
-          tabindex="0"
-          role="button"
-          [attr.aria-label]="literals.clean"
-          class="po-combo-clean po-icon-input"
-          *ngIf="clean && !disabled && inp.value"
-          [p-element-ref]="inputEl"
-          (p-change-event)="clear($event)"
-          (click)="clear(null); $event.preventDefault()"
-          (keydown.enter)="clearAndFocus(); $event.preventDefault()"
-        >
-        </po-clean>
+        <div class="po-field-icon-container-right">
+          <po-clean
+            tabindex="0"
+            role="button"
+            [attr.aria-label]="literals.clean"
+            class="po-combo-clean po-icon-input"
+            *ngIf="clean && !disabled && inp.value"
+            [p-element-ref]="inputEl"
+            (p-change-event)="clear($event)"
+            (click)="clear(null); $event.preventDefault()"
+            (keydown.enter)="clearAndFocus(); $event.preventDefault()"
+          >
+          </po-clean>
 
-        <div
-          #iconArrow
-          class="po-combo-arrow po-field-icon"
-          [class.po-field-icon-disabled]="disabled"
-          (click)="toggleComboVisibility(true)"
-        >
-          <po-icon
-            [p-icon]="comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'"
-            [class.po-field-icon]="!disabled"
-            [class.po-combo-default-border]="!disabled && inp.value"
-            [class.po-combo-background-arrow-up]="!disabled && comboOpen"
-          ></po-icon>
+          <div
+            #iconArrow
+            class="po-combo-arrow po-field-icon"
+            [class.po-field-icon-disabled]="disabled"
+            (click)="toggleComboVisibility(true)"
+          >
+            <po-icon
+              [p-icon]="comboOpen ? 'ICON_ARROW_UP po-icon-input' : 'ICON_ARROW_DOWN po-icon-input'"
+              [class.po-field-icon]="!disabled"
+              [class.po-combo-default-border]="!disabled && inp.value"
+              [class.po-combo-background-arrow-up]="!disabled && comboOpen"
+            ></po-icon>
+          </div>
         </div>
       </div>
     </div>

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>