feat(loading-icon): implementa definições do AnimaliaDS

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>

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'
+}

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>

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();
     });
   });
 });

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;
+  }
 }

projects/ui/src/lib/components/po-loading/po-loading.component.html

@@ -1,5 +1,5 @@
 <div class="po-loading">
-  <po-loading-icon></po-loading-icon>
+  <po-loading-icon p-size="lg"></po-loading-icon>
   <ng-template [ngIf]="text">
     <span class="po-loading-label po-text-ellipsis"
       >{{ text }}

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>

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