From 50ffc98d8bbca76a42f920503b4e3abed2513171 Mon Sep 17 00:00:00 2001
From: jcorrea97 <jroberto.cr1@gmail.com>
Date: Wed, 8 Nov 2023 10:36:53 -0300
Subject: [PATCH] =?UTF-8?q?feat(loading-icon):=20implementa=20defini=C3=A7?=
 =?UTF-8?q?=C3=B5es=20do=20AnimaliaDS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implementa definições de estilo e acessibilidade definidos pelo AnimaliaDS

Fixes DTHFUI-7807
---
 .../po-button/po-button.component.html        |  8 ++--
 .../po-loading-icon-size-enum.ts              | 10 +++++
 .../po-loading-icon.component.html            | 41 +++++++++++++++----
 .../po-loading-icon.component.spec.ts         | 30 ++++++++++++--
 .../po-loading-icon.component.ts              | 28 ++++++++++++-
 .../po-loading/po-loading.component.html      |  2 +-
 .../po-menu-filter.component.html             |  2 +-
 .../po-search/po-search.component.html        |  2 +-
 8 files changed, 104 insertions(+), 19 deletions(-)
 create mode 100644 projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts

diff --git a/projects/ui/src/lib/components/po-button/po-button.component.html b/projects/ui/src/lib/components/po-button/po-button.component.html
index 39ede74e4..389659fcd 100644
--- a/projects/ui/src/lib/components/po-button/po-button.component.html
+++ b/projects/ui/src/lib/components/po-button/po-button.component.html
@@ -11,9 +11,11 @@
   (click)="onClick()"
 >
   <div *ngIf="loading" class="po-button-loading-icon">
-    <po-loading-icon p-neutral-color></po-loading-icon>
+    <po-loading-icon p-neutral-color p-size="sm"></po-loading-icon>
   </div>
 
-  <po-icon *ngIf="icon" class="po-button-icon" [p-icon]="icon"></po-icon>
-  <span *ngIf="label" class="po-button-label">{{ label }}</span>
+  <div class="po-button-container">
+    <po-icon *ngIf="icon" class="po-button-icon" [p-icon]="icon"></po-icon>
+    <span *ngIf="label" class="po-button-label">{{ label }}</span>
+  </div>
 </button>
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts
new file mode 100644
index 000000000..186f4f20d
--- /dev/null
+++ b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts
@@ -0,0 +1,10 @@
+export enum PoLoadingIconSize {
+  /** Extra small */
+  xs = 'xs',
+  /** Small */
+  sm = 'sm',
+  /** Medium*/
+  md = 'md',
+  /** Large*/
+  lg = 'lg'
+}
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html
index d25e3660c..71703be45 100644
--- a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html
+++ b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html
@@ -1,10 +1,33 @@
-<div class="po-loading-icon" [class.po-loading-icon-neutral-color]="neutralColor">
-  <span class="po-loading-icon-bar po-loading-icon-bar-1"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-2"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-3"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-4"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-5"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-6"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-7"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-8"></span>
+<div class="po-loading-icon-container po-loading-svg-{{ size }}">
+  <svg
+    [ngClass]="neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'"
+    viewBox="0 0 200 200"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <linearGradient [id]="'first' + id">
+        <stop offset="0" stop-opacity="0" stop-color="currentColor" />
+        <stop offset="1" stop-opacity="0.5" stop-color="currentColor" />
+      </linearGradient>
+      <linearGradient [id]="'second' + id">
+        <stop offset="0" stop-opacity="1" stop-color="currentColor" />
+        <stop offset="1" stop-opacity="0.5" stop-color="currentColor" />
+      </linearGradient>
+    </defs>
+    <g stroke-width="24" transform="matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)">
+      <path [attr.stroke]="'url(#' + 'second' + id + ')'" d="M 4 100 A 96 96 0 0 1 196 100" />
+      <path [attr.stroke]="'url(#' + 'first' + id + ')'" d="M 196 100 A 96 96 0 0 1 4 100" />
+      <path stroke="currentColor" d="M 4 100 A 96 96 0 0 1 4 98" />
+    </g>
+
+    <animateTransform
+      from="0 0 0"
+      to="360 0 0"
+      attributeName="transform"
+      type="rotate"
+      repeatCount="indefinite"
+      dur="1200ms"
+    />
+  </svg>
 </div>
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts
index 1c4297ee7..662efc535 100644
--- a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts
+++ b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts
@@ -45,10 +45,34 @@ describe('PoLoadingOverlayComponent', () => {
   });
 
   describe('Templates', () => {
-    it('should count the amount of `po-loading-icon-bar` elements', () => {
-      const iconBars = fixture.debugElement.queryAll(By.css('.po-loading-icon-bar'));
+    it('should contain `po-loading-svg-xs` size is `xs`', () => {
+      component.size = 'xs';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-xs')).toBeTruthy();
+    });
+
+    it('should contain `po-loading-svg-sm` size is `sm`', () => {
+      component.size = 'sm';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-sm')).toBeTruthy();
+    });
+
+    it('should contain `po-loading-svg-md` size is `md`', () => {
+      component.size = 'md';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-md')).toBeTruthy();
+    });
+
+    it('should contain `po-loading-svg-lg` size is `lg`', () => {
+      component.size = 'lg';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-lg')).toBeTruthy();
+    });
 
-      expect(iconBars.length).toBe(8);
+    it('should contain `po-loading-svg-md` size is invalid value', () => {
+      component.size = 'huge';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-md')).toBeTruthy();
     });
   });
 });
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts
index 29e6434dd..98accf8a8 100644
--- a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts
+++ b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
-import { convertToBoolean } from '../../../utils/util';
+import { convertToBoolean, uuid } from '../../../utils/util';
+import { PoLoadingIconSize } from './po-loading-icon-size-enum';
 
 /**
  * @docsPrivate
@@ -16,6 +17,8 @@ import { convertToBoolean } from '../../../utils/util';
 })
 export class PoLoadingIconComponent {
   private _neutralColor: boolean;
+  private _size: string = 'md';
+  id = uuid();
 
   /**
    * @optional
@@ -33,4 +36,27 @@ export class PoLoadingIconComponent {
   get neutralColor(): boolean {
     return this._neutralColor;
   }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Definição do tamanho do ícone.
+   *
+   * Valores válidos:
+   *  - `xs`: tamanho `extra small`
+   *  - `sm`: tamanho `small`
+   *  - `md`: tamanho `medium`
+   *  - `lg`: tamanho `large`
+   *
+   * @default `md`
+   */
+  @Input('p-size') set size(value: string) {
+    this._size = PoLoadingIconSize[value] ? PoLoadingIconSize[value] : PoLoadingIconSize.md;
+  }
+
+  get size(): string {
+    return this._size;
+  }
 }
diff --git a/projects/ui/src/lib/components/po-loading/po-loading.component.html b/projects/ui/src/lib/components/po-loading/po-loading.component.html
index 541638b51..3a3e74680 100644
--- a/projects/ui/src/lib/components/po-loading/po-loading.component.html
+++ b/projects/ui/src/lib/components/po-loading/po-loading.component.html
@@ -1,4 +1,4 @@
 <div class="po-loading">
-  <po-loading-icon></po-loading-icon>
+  <po-loading-icon p-size="lg"></po-loading-icon>
   <span class="po-loading-label po-text-ellipsis" *ngIf="text">{{ text }}</span>
 </div>
diff --git a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html
index 6dc9bf0e0..956d206d0 100644
--- a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html
+++ b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html
@@ -9,7 +9,7 @@
 
   <div class="po-menu-filter-search-icon-container">
     <span *ngIf="!loading" class="po-icon po-menu-filter-icon po-icon-search"></span>
-    <po-loading-icon *ngIf="loading"></po-loading-icon>
+    <po-loading-icon *ngIf="loading" p-size="sm"></po-loading-icon>
   </div>
   <div class="po-menu-filter-close-icon-container">
     <po-clean [p-element-ref]="inputFilterElement" (p-change-event)="filterItems(inputFilter.value)"></po-clean>
diff --git a/projects/ui/src/lib/components/po-search/po-search.component.html b/projects/ui/src/lib/components/po-search/po-search.component.html
index 820e59b23..f6eb7b38e 100644
--- a/projects/ui/src/lib/components/po-search/po-search.component.html
+++ b/projects/ui/src/lib/components/po-search/po-search.component.html
@@ -1,7 +1,7 @@
 <div class="po-search">
   <div class="po-search-icon">
     <po-icon *ngIf="!loading" p-icon="po-icon-search"></po-icon>
-    <po-loading-icon *ngIf="loading"></po-loading-icon>
+    <po-loading-icon *ngIf="loading" p-size="sm"></po-loading-icon>
   </div>
 
   <input