style: formatacao de componentes

Author: Danilo Otavio Lima Salve

src/app/pages/resources-api/rick-and-morty/characters-list/characters-card/character-card/character-card.component.html

@@ -11,12 +11,10 @@
         <div>
           @let status = item().status === 'Alive' ? 'positive' : item().status === 'Dead' ? 'negative' : 'disabled';
           <div style="display: flex; align-items: center; position: relative">
-            <po-badge [p-status]="status" p-size="small" style="top: -10px;" />
+            <po-badge [p-status]="status" p-size="small" style="top: -10px" />
           </div>
 
-          <p class="po-font-text-large po-xl-7 po-lg-7 po-md-7 po-sm-7">
-            {{ item().status }} - {{ item().species }}
-          </p>
+          <p class="po-font-text-large po-xl-7 po-lg-7 po-md-7 po-sm-7">{{ item().status }} - {{ item().species }}</p>
           <po-tag [p-color]="getGenderColor(item().gender)" [p-value]="getGenderValue(item().gender)" />
         </div>
 

src/app/pages/resources-api/rick-and-morty/characters-list/characters-card/character-card/character-card.component.ts

@@ -6,18 +6,18 @@ import { Character } from './../../../shared/interfaces/character-rick-and-morty
 import { ZoomOnHoverDirective } from '../../../../../../shared/directives/zoom-on-hover.directive';
 
 const GENDER_COLOR = {
-    Female: 'color-06',
-    Male: 'color-02',
-    Genderless: 'color-08',
-    unknown: 'color-07',
-}
+  Female: 'color-06',
+  Male: 'color-02',
+  Genderless: 'color-08',
+  unknown: 'color-07'
+};
 
 const GENDER_VALUE = {
-    Female: 'Feminino',
-    Male: 'Masculino',
-    Genderless: 'Sem gênero',
-    unknown: 'Desconhecido',
-}
+  Female: 'Feminino',
+  Male: 'Masculino',
+  Genderless: 'Sem gênero',
+  unknown: 'Desconhecido'
+};
 
 @Component({
   selector: 'app-character-card',
@@ -28,11 +28,10 @@ export class CharacterCardComponent {
   readonly item = input.required<Character>();
 
   getGenderColor(gender: string): string {
-    return GENDER_COLOR[gender as keyof typeof GENDER_COLOR]
+    return GENDER_COLOR[gender as keyof typeof GENDER_COLOR];
   }
 
   getGenderValue(gender: string): string {
-    return GENDER_VALUE[gender as keyof typeof GENDER_VALUE]
+    return GENDER_VALUE[gender as keyof typeof GENDER_VALUE];
   }
 }
-

src/app/pages/resources-api/rick-and-morty/characters-list/characters-card/characters-card.component.html

@@ -1,6 +1,6 @@
 @if (items()) {
   @for (item of items(); track item.id) {
-    <app-character-card [item]="item"/>
+    <app-character-card [item]="item" />
   } @empty {
     <p class="po-font-text-bold">Nenhum dado encontrado</p>
   }

src/app/pages/resources-api/rick-and-morty/characters-list/characters-table/characters-table.component.html

@@ -1,6 +1,6 @@
 @if (items()) {
   <po-table
-  [p-items]="items()"
+    [p-items]="items()"
     [p-loading]="isLoading()"
     [p-height]="height"
     [p-columns]="columns"

src/app/pages/resources-api/rick-and-morty/rick-and-morty.routes.ts

@@ -1,9 +1,9 @@
-import { Routes } from "@angular/router";
+import { Routes } from '@angular/router';
 
 export const RICK_AND_MORTY_ROUTES: Routes = [
   {
     path: '',
     title: 'Rick & Morty | Lista de personagens',
     loadComponent: () => import('./characters-list/characters-list.component').then(c => c.CharactersListComponent)
   }
-]
+];

src/app/pages/resources-api/rick-and-morty/shared/service/character.service.ts

@@ -12,9 +12,9 @@ export class CharacterService {
   private characters: Character[] = [];
 
   readonly getCharacters: ResourceRef<Character[]> = resource({
-    request: () => ({page: this.page(), name: this.name()}),
+    request: () => ({ page: this.page(), name: this.name() }),
     loader: async ({ request, abortSignal }) => {
-      const {page, name} = request;
+      const { page, name } = request;
       try {
         let response = await (await fetch(`${this.apiUrl}/?page=${page}&name=${name}`, { signal: abortSignal })).json();