refactor(icon): remove ícones depreciados

Remove todos os usos das classes CSS: 'po-icon' e '.an', além da biblioteca PoIcon nos módulos PO-STYLE, PO-ANGULAR e PO-THEME-TOTVS.
Elimina estilos, testes e documentação ligados aos ícones depreciados.

Fixes DTHFUI-11345

BREAKING CHANGE: as classes po-icon e an foram removidas.

Todos os componentes devem usar Animalia Icons como fonte padrão.

Antes:
<po-input p-icon='po-icon po-icon-anchor' p-label='PO input'></po-input>

Depois:
<po-input p-icon='an an-anchor' p-label='PO input'></po-input>

Author: fabiana-monteiro

docs/guides/deprecations.md

@@ -6,7 +6,7 @@
 
 ## Descontinuidade
 
-Anunciamos os recursos obsoletos no nosso [CHANGELOG](https://github.com/po-ui/po-angular/blob/master/CHANGELOG.md). Esses recursos obsoletos aparecem na documentação com uma marcação de *`Deprecated`* e não são mais exemplificados nos *samples* do portal. Quando anunciamos uma suspensão de uso, sempre anunciamos também um caminho de atualização recomendado. Neste documento teremos um resumo dessses recursos depreciados.
+Anunciamos os recursos obsoletos no nosso [CHANGELOG](https://github.com/po-ui/po-angular/blob/master/CHANGELOG.md). Esses recursos obsoletos aparecem na documentação com uma marcação de *`Deprecated`* e não são mais exemplificados nos *samples* do portal. Quando anunciamos uma suspensão de uso, sempre anunciamos também um caminho de atualização recomendado. Neste documento teremos um resumo desses recursos depreciados.
 
 Quando um recurso é descontinuado ele ainda se mantém presente geralmente pelas próximas `duas` versões principais. Depois disso esses recursos serão removidos. Uma descontinuação pode ser anunciada em qualquer versão, mas a sua remoção acontecerá apenas na versão principal. Até um recurso depreciado ser removido, manteremos o suporte a problemas críticos e de segurança e também temos ferramentas de migração que geralmente automatizam a maior parte das atualizações.
 
@@ -192,6 +192,22 @@ export class AppModule { }
 
 ```
 
+### Remoção da biblioteca POIcon
+A partir da v20, a biblioteca de ícones POIcon foi removida. O conjunto padrão de ícones passa a ser a lib Animalia Icons.
+
+Antes - PO Icon (legado)
+```
+//html
+<i class="po-icon po-icon-user"></i>
+```
+
+Depois - Animalia Icons (atual)
+```
+//html
+<i class="an an-user"></i>
+```
+> Para saber como utilizar, veja em [Biblioteca de ícones](/icons) do PO UI.
+
 ## Breaking Changes
 
 <div class="po-row">
@@ -224,6 +240,12 @@ export class AppModule { }
           <td class="po-table-column">p-helper</td>
           <td class="po-table-column" style="text-align: center;">v23</td>
         </tr>
+        <tr class="po-table-row">
+          <th class="po-table-column"><a href="/icons">POIcon</a></th>
+          <td class="po-table-column">Biblioteca de ícones</td>
+          <td class="po-table-column">Animalia Icons</td>
+          <td class="po-table-column" style="text-align: center;">v20</td>
+        </tr>
         <tr class="po-table-row">
           <th class="po-table-column"><a href="documentation/po-tabs">PoTabs</a></th>
           <td class="po-table-column">p-small</td>

projects/portal/src/app/icons/icons.component.html

@@ -52,8 +52,8 @@
       <div class="container">
         <div class="container-item po-pb-2">
           <p class="constructor-subtitle">
-            Deprecated v20.x.x . A Biblioteca de ícones POIcon está depreciada e será removida na v20. Recomendamos o
-            uso da Lib Animalia Icons conforme documentação abaixo
+            A Biblioteca de ícones POIcon está depreciada e foi removida na v20.x.x. Recomendamos o uso da Lib Animalia
+            Icons conforme documentação abaixo:
           </p>
         </div>
       </div>

projects/portal/src/app/theme-builder/theme-builder.component.css

@@ -473,7 +473,7 @@ p {
   background-color: var(--background-hover);
 }
 
-.combo-hover .po-combo-container-content span.po-field-icon.po-icon.po-icon-arrow-down.po-icon-input {
+.combo-hover .po-combo-container-content po-icon.po-field-icon i.an-caret-down.po-icon-input {
   border-color: var(--color-hover);
   background: var(--background-hover);
 }
@@ -486,8 +486,8 @@ p {
   outline-offset: 2px;
 }
 
-.combo-focus .po-combo-input ~ .po-field-icon-container-right .po-field-icon.po-icon.po-icon-arrow-down,
-.combo-focus .po-combo-input ~ .po-field-icon-container-right .po-field-icon.po-icon.po-icon-arrow-up {
+.combo-focus .po-combo-input ~ .po-field-icon-container-right po-icon.po-field-icon i.an-caret-down.po-icon-input,
+.combo-focus .po-combo-input ~ .po-field-icon-container-right po-icon.po-field-icon i.an-caret-up.po-icon-input {
   border-color: var(--color-focused);
 }
 

projects/portal/src/app/theme-builder/theme-builder.component.html

@@ -939,7 +939,7 @@
       @if (!verifyIfItemVisibility()) {
         <po-widget class="po-lg-12 po-pr-0 po-pl-0 po-pb-2">
           <div class="container widget-align">
-            <span class="po-icon po-icon-info"></span>
+            <span class="an an-info"></span>
             <h2 class="po-ml-2">Nenhum componente selecionado</h2>
           </div>
         </po-widget>

projects/templates/src/lib/components/po-page-change-password/po-page-change-password.component.html

@@ -88,7 +88,7 @@
                   @for (requirement of requirements; track requirement) {
                     <li class="po-page-change-password-required-item">
                       <po-icon
-                        class="po-icon po-page-change-password-required-icon"
+                        class="po-page-change-password-required-icon"
                         [p-icon]="
                           validateRequirement(requirement)
                             ? 'ICON_OK po-page-change-password-required-ok'

projects/ui/src/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.html

@@ -14,6 +14,6 @@
         <po-tag class="po-accordion-item-header-tag" [p-value]="labelTag" [p-type]="typeTag"> </po-tag>
       }
     </div>
-    <po-icon p-icon="ICON_ARROW_DOWN" class="po-icon po-accordion-item-header-icon"></po-icon>
+    <po-icon p-icon="ICON_ARROW_DOWN" class="po-accordion-item-header-icon"></po-icon>
   </button>
 </div>

projects/ui/src/lib/components/po-accordion/po-accordion-item-header/po-accordion-item-header.component.spec.ts

@@ -93,8 +93,12 @@ describe('PoAccordionItemHeaderComponent:', () => {
       expect(button.querySelector('po-icon')).toBeTruthy();
     });
 
-    it('should have a icon with class po-icon', () => {
-      expect(icon.classList.contains('po-icon')).toBeTruthy();
+    it('should render the accordion icon using Animalia classes', () => {
+      component.label = 'Accordion 1';
+      fixture.detectChanges();
+
+      const icon = nativeElement.querySelector('po-icon i.an');
+      expect(icon).toBeTruthy();
     });
 
     it('should have a icon with class po-accordion-item-header-icon', () => {

projects/ui/src/lib/components/po-accordion/po-accordion-manager/po-accordion-manager.component.html

@@ -13,7 +13,7 @@
     <po-icon
       p-icon="ICON_LAST_PAGE"
       [ngClass]="expandedAllItems ? 'icon-down' : 'icon-up'"
-      class="po-icon po-accordion-manager-icon"
+      class="po-accordion-manager-icon"
     >
     </po-icon>
   </button>

projects/ui/src/lib/components/po-button/po-button.component.spec.ts

@@ -37,7 +37,7 @@ describe('PoButtonComponent: ', () => {
     expect(nativeElement.querySelector('.po-button-danger')).toBeFalsy();
     expect(nativeElement.querySelector('.po-button-link')).toBeFalsy();
 
-    expect(nativeElement.querySelector('span.po-icon')).toBeFalsy();
+    expect(nativeElement.querySelector('po-icon i.an')).toBeFalsy();
   });
 
   it('should update `p-label`', () => {
@@ -47,11 +47,12 @@ describe('PoButtonComponent: ', () => {
     expect(nativeElement.querySelector('.po-button-label').innerHTML).toContain('Po Button');
   });
 
-  it('should add i with an icon when `p-icon` is defined', () => {
-    fixture.componentRef.setInput('p-icon', 'po-icon-news');
+  it('should render an icon element when p-icon is defined', () => {
+    fixture.componentRef.setInput('p-icon', 'an-newspaper');
     fixture.detectChanges();
 
-    expect(nativeElement.querySelector('i.po-icon.po-icon-news')).toBeTruthy();
+    const icon = nativeElement.querySelector('po-icon i');
+    expect(icon).toBeTruthy();
   });
 
   it('should simulate button blur.', () => {

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.spec.ts

@@ -491,15 +491,15 @@ describe('PoDynamicViewComponent:', () => {
     });
 
     it(`should create 'po-tag' with icon if properties 'tag' and 'icon' contain values.`, () => {
-      component.fields = [{ property: 'cpf', label: 'CPF', tag: true, icon: 'po-icon-ok' }];
+      component.fields = [{ property: 'cpf', label: 'CPF', tag: true, icon: 'an-check' }];
 
       component.ngOnChanges({
         fields: new SimpleChange(null, component.fields, true)
       });
 
       fixture.detectChanges();
       expect(nativeElement.querySelector('po-tag')).toBeTruthy();
-      expect(nativeElement.querySelector('.po-icon-ok')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-check')).toBeTruthy();
     });
 
     it(`should create 'po-tag' without icon if 'tag' is true but 'icon' is not defined.`, () => {
@@ -512,7 +512,7 @@ describe('PoDynamicViewComponent:', () => {
       fixture.detectChanges();
 
       expect(nativeElement.querySelector('po-tag')).toBeTruthy();
-      expect(nativeElement.querySelector('.po-icon-ok')).toBeFalsy();
+      expect(nativeElement.querySelector('.an-check')).toBeFalsy();
     });
 
     it(`should create 'po-tag' with a custom color if 'tag' and 'color' properties contain values.`, () => {