fix(theme): corrige quebra do tema

This reverts commit 58425a1.
po-ui · Dec 10, 2024 · e33052f · e33052f
1 parent 9610be6
commit e33052f
Show file tree

Hide file tree

Showing 21 changed files with 292 additions and 1,118 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,7 +27,6 @@ speed-measure-plugin.json
 .vscode
 
 # IDE - VSCode
-.vscode
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
@@ -36,7 +35,6 @@ 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,6 +5,7 @@ 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,13 +30,14 @@ export class AppComponent implements OnInit, OnDestroy {
     private poTheme: PoThemeService,
     public router: Router
   ) {
-    const _poTheme = this.poTheme.applyTheme();
+    const _poTheme = this.poTheme.persistThemeActive();
     if (!_poTheme) {
       this.theme = poThemeConstant.active;
-      this.poTheme.setTheme(poThemeConstant, this.theme);
     } else {
-      this.theme = typeof _poTheme.active === 'object' ? _poTheme.active.type : _poTheme.active;
+      this.theme = _poTheme.active || 0;
     }
+
+    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,6 +238,10 @@ 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" style="row-gap: 8px">
+      <div class="po-row po-p-0 po-mt-2 po-mb-3">
         <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,67 +7,60 @@
     [p-required]="required"
     [p-show-required]="showRequired"
   >
-    <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>
+    <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>
 
-        <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>
+        <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>

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,68 +6,64 @@
   [p-required]="required"
   [p-show-required]="showRequired"
 >
-  <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
+    #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>
-      </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>
   </div>