refactor: atualiza para nova lib 'animalia-icon'

po-ui · Jan 8, 2025 · 01bc60a · 01bc60a
1 parent ab3059b
commit 01bc60a
Show file tree

Hide file tree

Showing 114 changed files with 357 additions and 382 deletions.
diff --git a/projects/portal/docs/processors/helpers/file-writer.js b/projects/portal/docs/processors/helpers/file-writer.js
@@ -119,12 +119,12 @@ import { Component } from '@angular/core';
 export class Sample{{component}}ViewComponent {
   hideSampleCodeTabs = true;
   sampleCodeButtonLabel = 'Talk is cheap, show me the code!';
-  sampleCodeButtonIcon = 'ph ph-plus';
+  sampleCodeButtonIcon = 'an an-plus';
 
   toggleSampleCodeTabs() {
     this.hideSampleCodeTabs = !this.hideSampleCodeTabs;
     this.sampleCodeButtonLabel = this.hideSampleCodeTabs ? 'Talk is cheap, show me the code!' : 'Okay, hide the code';
-    this.sampleCodeButtonIcon = this.hideSampleCodeTabs ? 'ph ph-plus' : 'ph ph-minus';
+    this.sampleCodeButtonIcon = this.hideSampleCodeTabs ? 'an an-plus' : 'an an-minus';
   }
 }
 `;
@@ -206,7 +206,7 @@ export class Doc{{component}}Component implements OnInit, OnDestroy {
   activeTab = 'doc';
 
   actions: Array<{}> = [
-    { label: 'Documentação', action: this.goBack.bind(this), icon: 'ph ph-file-text' },
+    { label: 'Documentação', action: this.goBack.bind(this), icon: 'an an-file-text' },
     { label: 'Colabore', action: this.improveDocs.bind(this) },
   ];
 

diff --git a/projects/portal/src/app/app.component.ts b/projects/portal/src/app/app.component.ts
@@ -91,11 +91,11 @@ export class AppComponent implements OnInit, OnDestroy {
 
   get actions() {
     return [
-      { icon: 'ph ph-github-logo', link: 'https://github.com/po-ui', label: 'Github' },
-      { icon: 'ph ph-x-logo', link: 'https://twitter.com/@pouidev', label: 'Twitter' },
-      { icon: 'ph ph-instagram-logo', link: 'https://www.instagram.com/pouidev/', label: 'Instagram' },
+      { icon: 'an an-github-logo', link: 'https://github.com/po-ui', label: 'Github' },
+      { icon: 'an an-x-logo', link: 'https://twitter.com/@pouidev', label: 'Twitter' },
+      { icon: 'an an-instagram-logo', link: 'https://www.instagram.com/pouidev/', label: 'Instagram' },
       {
-        icon: `${this.themeStorage === 'po-theme-dark' ? 'ph ph-sun' : 'ph ph-moon'}`,
+        icon: `${this.themeStorage === 'po-theme-dark' ? 'an an-sun' : 'an an-moon'}`,
         label: 'tema',
         action: this.changeTheme.bind(this)
       }

diff --git a/projects/portal/src/app/icons/icons.component.html b/projects/portal/src/app/icons/icons.component.html
@@ -60,14 +60,14 @@
       <div class="po-row po-pb-2">
         <div class="po-sm-12">
           <h3 class="po-pt-1">Como Usar?</h3>
-          <pre><code appCodeHighlight class="language-html">&lt;po-input p-icon=&quot;ph ph-user&quot; p-label=&quot;PO input&quot;&gt;&lt;/po-input&gt;</code></pre>
+          <pre><code appCodeHighlight class="language-html">&lt;po-input p-icon=&quot;an an-user&quot; p-label=&quot;PO input&quot;&gt;&lt;/po-input&gt;</code></pre>
           <p class="po-pt-2 po-pb-2">
             Outra opção seria a customização do ícone através do TemplateRef, conforme exemplo abaixo:
           </p>
           <pre><code appCodeHighlight class="language-html">&lt;po-input [p-icon]="template" p-label="input template"&gt;&lt;/po-input&gt;\n
 ...
 &lt;ng-template #template&gt;
-  &lt;i class="ph ph-arrow-fat-line-down"&gt;&lt;/i&gt;
+  &lt;i class="an an-arrow-fat-line-down"&gt;&lt;/i&gt;
 &lt;/ng-template&gt;</code></pre>
         </div>
       </div>
@@ -99,7 +99,7 @@ <h3 class="po-pt-1">Como Usar?</h3>
         </div>
       </po-container>
       <div class="ph pallet-full"></div>
-      <div class="ph-fill pallet-full"></div>
+      <div class="an-fill pallet-full"></div>
 
       <div class="grid grid-flow gap-16 po-pt-3 po-pb-3">
         <po-loading-overlay p-text="Carregando ícones" p-size="lg" *ngIf="loading; else content"> </po-loading-overlay>

diff --git a/projects/portal/src/app/icons/icons.component.ts b/projects/portal/src/app/icons/icons.component.ts
@@ -51,7 +51,7 @@ export class IconsComponent {
         return {
           value: _iconName,
           tags: _iconTags,
-          code: `ph${isFill ? '-fill' : ''} ph-${_iconName}`
+          code: `an${isFill ? '-fill' : ''} an-${_iconName}`
         };
       });
 

diff --git a/...ates/src/lib/components/po-page-change-password/po-page-change-password.component.spec.ts b/...ates/src/lib/components/po-page-change-password/po-page-change-password.component.spec.ts
@@ -659,17 +659,17 @@ describe('PoPageChangePasswordComponent:', () => {
       component.requirements = requirements;
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.ph-check.po-page-change-password-required-ok')).toBeTruthy();
-      expect(nativeElement.querySelector('.ph-minus po-page-change-password-required-minus')).toBeFalsy();
+      expect(nativeElement.querySelector('.an-check.po-page-change-password-required-ok')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-minus po-page-change-password-required-minus')).toBeFalsy();
     });
 
     it('should add a `po-icon-minus` for a requirement with false status', () => {
       const requirements = [{ requirement: 'requirement', status: false }];
       component.requirements = requirements;
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.ph-minus.po-page-change-password-required-minus')).toBeTruthy();
-      expect(nativeElement.querySelector('.ph-check.po-page-change-password-required-ok')).toBeFalsy();
+      expect(nativeElement.querySelector('.an-minus.po-page-change-password-required-minus')).toBeTruthy();
+      expect(nativeElement.querySelector('.an-check.po-page-change-password-required-ok')).toBeFalsy();
     });
 
     it('should add requirement text', () => {

diff --git a/...namic-search-hiring-processes/sample-po-page-dynamic-search-hiring-processes.component.ts b/...namic-search-hiring-processes/sample-po-page-dynamic-search-hiring-processes.component.ts
@@ -34,25 +34,25 @@ export class SamplePoPageDynamicSearchHiringProcessesComponent implements OnInit
       label: 'Hide Remove All Disclaimer',
       action: this.onClickRemoveAllDisclaimer.bind(this),
       visible: this.isVisibleRemoveAllDisclaimer.bind(this),
-      icon: 'ph ph-eye-closed'
+      icon: 'an an-eye-closed'
     },
     {
       label: 'Show Remove All Disclaimer',
       action: this.onClickRemoveAllDisclaimer.bind(this),
       visible: this.isHideRemoveAllDisclaimer.bind(this),
-      icon: 'ph ph-eye-on'
+      icon: 'an an-eye-on'
     },
     {
       label: 'Hide Close City Disclaimer',
       action: this.onClickCloseCityDisclaimer.bind(this),
       visible: this.isVisibleCloseCityDisclaimer.bind(this),
-      icon: 'ph ph-eye-closed'
+      icon: 'an an-eye-closed'
     },
     {
       label: 'Show Close City Disclaimer',
       action: this.onClickCloseCityDisclaimer.bind(this),
       visible: this.isHideCloseCityDisclaimer.bind(this),
-      icon: 'ph ph-eye-on'
+      icon: 'an an-eye-on'
     }
   ];
 

diff --git a/...ponents/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts b/...ponents/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts
@@ -51,7 +51,7 @@ export interface PoPageDynamicTableCustomAction {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * <po-component
-   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'ph ph-newspaper' }]">
+   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
    * </po-component>
    * ```
    *

diff --git a/...s/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts b/...s/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts
@@ -60,7 +60,7 @@ export interface PoPageDynamicTableCustomTableAction {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * <po-component
-   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'ph ph-newspaper' }]">
+   *  [p-property]="[{ label: 'PHOSPHOR ICON', icon: 'an an-newspaper' }]">
    * </po-component>
    * ```
    *

diff --git a/...cts/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts b/...cts/templates/src/lib/components/po-page-dynamic-table/po-page-dynamic-table.component.ts
@@ -727,7 +727,7 @@ export class PoPageDynamicTableComponent extends PoPageDynamicListBaseComponent
    * {
    *   label: 'Update',
    *   action: this.updateTable.bind(this),
-   *   icon: 'ph-arrows-clockwise'
+   *   icon: 'an-arrows-clockwise'
    * }]
    *
    * updateTable() {

diff --git a/...ples/sample-po-page-dynamic-table-hotels/sample-po-page-dynamic-table-hotels.component.ts b/...ples/sample-po-page-dynamic-table-hotels/sample-po-page-dynamic-table-hotels.component.ts
@@ -95,33 +95,33 @@ export class SamplePoPageDynamicTableHotelsComponent {
       label: 'Hide Remove All Disclaimer',
       action: this.onClickRemoveAllDisclaimer.bind(this),
       visible: this.isVisibleRemoveAllDisclaimer.bind(this),
-      icon: 'ph ph-eye-closed'
+      icon: 'an an-eye-closed'
     },
     {
       label: 'Show Remove All Disclaimer',
       action: this.onClickRemoveAllDisclaimer.bind(this),
       visible: this.isHideRemoveAllDisclaimer.bind(this),
-      icon: 'ph ph-eye'
+      icon: 'an an-eye'
     },
     {
       label: 'Hide Close City Disclaimer',
       action: this.onClickCloseCityDisclaimer.bind(this),
       visible: this.isVisibleCloseCityDisclaimer.bind(this),
-      icon: 'ph ph-eye-closed'
+      icon: 'an an-eye-closed'
     },
     {
       label: 'Show Close City Disclaimer',
       action: this.onClickCloseCityDisclaimer.bind(this),
       visible: this.isHideCloseCityDisclaimer.bind(this),
-      icon: 'ph ph-eye'
+      icon: 'an an-eye'
     }
   ];
 
   tableCustomActions: Array<PoPageDynamicTableCustomTableAction> = [
     {
       label: 'Details',
       action: this.onClickHotelDetail.bind(this),
-      icon: 'ph ph-user'
+      icon: 'an an-user'
     }
   ];
 

diff --git a/...amples/sample-po-page-dynamic-table-users/sample-po-page-dynamic-table-users.component.ts b/...amples/sample-po-page-dynamic-table-users/sample-po-page-dynamic-table-users.component.ts
@@ -81,41 +81,41 @@ export class SamplePoPageDynamicTableUsersComponent implements OnInit {
       label: 'Actions Right',
       action: this.onClickActionsSide.bind(this),
       visible: this.isVisibleActionsRight.bind(this),
-      icon: 'ph ph-caret-right'
+      icon: 'an an-caret-right'
     },
     {
       label: 'Actions Left',
       action: this.onClickActionsSide.bind(this),
       visible: this.isVisibleActionsLeft.bind(this),
-      icon: 'ph ph-caret-left'
+      icon: 'an an-caret-left'
     },
     {
       label: 'Fixed Filter',
       action: this.onClickFixedFilter.bind(this),
       visible: this.isVisibleFixedFilter.bind(this),
-      icon: 'ph ph-lock'
+      icon: 'an an-lock'
     },
     {
       label: 'Not Fixed Filter',
       action: this.onClickFixedFilter.bind(this),
       visible: this.isVisibleNotFixedFilter.bind(this),
-      icon: 'ph ph-lock-open'
+      icon: 'an an-lock-open'
     },
-    { label: 'Print', action: this.printPage.bind(this), icon: 'ph ph-printer' }
+    { label: 'Print', action: this.printPage.bind(this), icon: 'an an-printer' }
   ];
 
   tableCustomActions: Array<PoPageDynamicTableCustomTableAction> = [
     {
       label: 'Details',
       action: this.onClickUserDetail.bind(this),
       disabled: this.isUserInactive.bind(this),
-      icon: 'ph ph-user'
+      icon: 'an an-user'
     },
     {
       label: 'Dependents',
       action: this.onClickDependents.bind(this),
       visible: this.hasDependents.bind(this),
-      icon: 'ph ph-user'
+      icon: 'an an-user'
     }
   ];
 
@@ -127,7 +127,7 @@ export class SamplePoPageDynamicTableUsersComponent implements OnInit {
       {
         label: 'Download .csv',
         action: this.usersService.downloadCsv.bind(this.usersService, this.serviceApi),
-        icon: 'ph ph-download-simple'
+        icon: 'an an-download-simple'
       }
     ];
   }

diff --git a/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts b/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts
@@ -90,7 +90,7 @@ export class PoBadgeBaseComponent {
    * ```
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-badge p-icon="ph ph-user"></po-badge>
+   * <po-badge p-icon="an an-user"></po-badge>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```

diff --git a/...rc/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts b/...rc/lib/components/po-badge/samples/sample-po-badge-labs/sample-po-badge-labs.component.ts
@@ -18,9 +18,9 @@ export class SamplePoBadgeLabsComponent implements OnInit {
   propertiesOptions: Array<PoCheckboxGroupOption> = [{ value: 'showBorder', label: 'Show Border' }];
 
   iconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph-check', value: 'ph ph-check' },
-    { label: 'ph-check-circle', value: 'ph ph-check-circle' },
-    { label: 'ph ph-check', value: 'ph ph-check' },
+    { label: 'an-check', value: 'an an-check' },
+    { label: 'an-check-circle', value: 'an an-check-circle' },
+    { label: 'an an-check', value: 'an an-check' },
     { label: 'fa-minus', value: 'fa fa-minus' },
     { label: 'true (Enabled when status is settled)', value: 'true', disabled: true },
     { label: 'None', value: 'false' }

diff --git a/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts b/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts
@@ -25,7 +25,7 @@ export interface PoButtonGroupItem {
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
    * buttons: Array<PoButtonGroupItem> = [
-   *  { label: 'Button 1', action: this.action.bind(this), icon: 'ph ph-user' },
+   *  { label: 'Button 1', action: this.action.bind(this), icon: 'an an-user' },
    * ];
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:

diff --git a/.../samples/sample-po-button-group-attendance/sample-po-button-group-attendance.component.ts b/.../samples/sample-po-button-group-attendance/sample-po-button-group-attendance.component.ts
@@ -9,9 +9,9 @@ import { PoButtonGroupItem, PoNotificationService } from '@po-ui/ng-components';
 })
 export class SamplePoButtonGroupAttendanceComponent {
   attendances: Array<PoButtonGroupItem> = [
-    { label: 'Appointment', icon: 'ph ph-calendar-dots', action: this.getPassword.bind(this) },
-    { label: 'Emergency', icon: 'ph ph-syringe', action: this.getPassword.bind(this) },
-    { label: 'Exams', icon: 'ph ph-flask', action: this.getPassword.bind(this) }
+    { label: 'Appointment', icon: 'an an-calendar-dots', action: this.getPassword.bind(this) },
+    { label: 'Emergency', icon: 'an an-syringe', action: this.getPassword.bind(this) },
+    { label: 'Exams', icon: 'an an-flask', action: this.getPassword.bind(this) }
   ];
 
   constructor(private poNotification: PoNotificationService) {}

diff --git a/...button-group/samples/sample-po-button-group-labs/sample-po-button-group-labs.component.ts b/...button-group/samples/sample-po-button-group-labs/sample-po-button-group-labs.component.ts
@@ -19,8 +19,8 @@ export class SamplePoButtonGroupLabsComponent implements OnInit {
   toggle: PoButtonGroupToggle;
 
   iconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph ph-newspaper', value: 'ph ph-newspaper' },
-    { label: 'ph ph-calendar-dots', value: 'ph ph-calendar-dots' },
+    { label: 'an an-newspaper', value: 'an an-newspaper' },
+    { label: 'an an-calendar-dots', value: 'an an-calendar-dots' },
     { label: 'fa fa-podcast', value: 'fa fa-podcast' },
     { label: 'fa fa-calculator', value: 'fa fa-calculator' }
   ];

diff --git a/...button-group/samples/sample-po-button-group-post/sample-po-button-group-post.component.ts b/...button-group/samples/sample-po-button-group-post/sample-po-button-group-post.component.ts
@@ -15,20 +15,20 @@ export class SamplePoButtonGroupPostComponent {
   textArea: string = '"Luck is a thing that comes in many forms and who can recognize her?" - Ernest Hemingway';
 
   fontStyle: Array<PoButtonGroupItem> = [
-    { icon: 'ph ph-text-b', action: () => (this.setBold = !this.setBold), tooltip: 'Bold' },
-    { icon: 'ph ph-text-italic', action: () => (this.setItalic = !this.setItalic), tooltip: 'Italic' },
-    { icon: 'ph ph-text-underline', action: () => (this.setUnderline = !this.setUnderline), tooltip: 'Underline' }
+    { icon: 'an an-text-b', action: () => (this.setBold = !this.setBold), tooltip: 'Bold' },
+    { icon: 'an an-text-italic', action: () => (this.setItalic = !this.setItalic), tooltip: 'Italic' },
+    { icon: 'an an-text-underline', action: () => (this.setUnderline = !this.setUnderline), tooltip: 'Underline' }
   ];
 
   textAlign: Array<PoButtonGroupItem> = [
     {
-      icon: 'ph ph-text-align-left',
+      icon: 'an an-text-align-left',
       selected: true,
       action: () => (this.setTextAlignment = 'left'),
       tooltip: 'Left align'
     },
-    { icon: 'ph ph-text-align-center', action: () => (this.setTextAlignment = 'center'), tooltip: 'Center align' },
-    { icon: 'ph ph-text-align-right', action: () => (this.setTextAlignment = 'right'), tooltip: 'Right align' },
-    { icon: 'ph ph-text-align-justify', action: () => (this.setTextAlignment = 'justify'), tooltip: 'Justify' }
+    { icon: 'an an-text-align-center', action: () => (this.setTextAlignment = 'center'), tooltip: 'Center align' },
+    { icon: 'an an-text-align-right', action: () => (this.setTextAlignment = 'right'), tooltip: 'Right align' },
+    { icon: 'an an-text-align-justify', action: () => (this.setTextAlignment = 'justify'), tooltip: 'Justify' }
   ];
 }
diff --git a/projects/ui/src/lib/components/po-button/po-button-base.component.ts b/projects/ui/src/lib/components/po-button/po-button-base.component.ts
@@ -89,7 +89,7 @@ export class PoButtonBaseComponent {
    *
    * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons). conforme exemplo abaixo:
    * ```
-   * <po-button p-icon="ph ph-user" p-label="PO button"></po-button>
+   * <po-button p-icon="an an-user" p-label="PO button"></po-button>
    * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```

diff --git a/...nents/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.e2e-spec.ts b/...nents/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.e2e-spec.ts
@@ -19,10 +19,10 @@ describe('SamplePoButtonLabs E2E', () => {
     expect(button.poModal.isPresent()).toBeFalsy();
   });
 
-  it('Check `po-button` show icon `ph ph-newspaper` after select icon `ph ph-newspaper`', () => {
+  it('Check `po-button` show icon `an an-newspaper` after select icon `an an-newspaper`', () => {
     button.poRadioLogoPO.click();
 
-    expect(button.poButtonIcon.getAttribute('class')).toContain('ph ph-newspaper');
+    expect(button.poButtonIcon.getAttribute('class')).toContain('an an-newspaper');
   });
 
   it('Check `po-button` show icon `po-icon-user` after select icon `po-icon-user`', () => {

diff --git a/.../components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.po.ts b/.../components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.po.ts
@@ -28,15 +28,15 @@ export class SamplePoButtonLabsComponentPO {
   }
 
   get poRadioLogoPO() {
-    return this.getPoButtonIcon('ph ph-newspaper');
+    return this.getPoButtonIcon('an an-newspaper');
   }
 
   get poRadioCalendar() {
-    return this.getPoButtonIcon('ph ph-calendar-dots');
+    return this.getPoButtonIcon('an an-calendar-dots');
   }
 
   get poRadioUser() {
-    return this.getPoButtonIcon('ph ph-user');
+    return this.getPoButtonIcon('an an-user');
   }
   get poRadioNone() {
     return this.getPoButtonIcon('undefined');

diff --git a/...lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts b/...lib/components/po-button/samples/sample-po-button-labs/sample-po-button-labs.component.ts
@@ -22,9 +22,9 @@ export class SamplePoButtonLabsComponent implements OnInit {
   ];
 
   iconsOptions: Array<PoRadioGroupOption> = [
-    { label: 'ph ph-newspaper', value: 'ph ph-newspaper' },
-    { label: 'ph ph-calendar-dots', value: 'ph ph-calendar-dots' },
-    { label: 'ph ph-user', value: 'ph ph-user' },
+    { label: 'an an-newspaper', value: 'an an-newspaper' },
+    { label: 'an an-calendar-dots', value: 'an an-calendar-dots' },
+    { label: 'an an-user', value: 'an an-user' },
     { label: 'fa fa-podcast', value: 'fa fa-podcast' }
   ];