feat(icon): permite chavear lib de ícones

Permite chavear qual lib de ícones deverá ser utilizada

Fixes DTHFUI-9157

Author: anderson-gregorio-totvs

projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.html

@@ -17,6 +17,7 @@
       aria-label=" "
       [id]="id"
       class="po-checkbox"
+      [ngClass]="iconNameLib === 'PhosphorIcon' ? 'po-checkbox-phosphor' : 'po-checkbox-poicon'"
       [attr.aria-disabled]="disabled"
       [attr.required]="checkBoxRequired"
     >

projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts

@@ -1,15 +1,18 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
-  forwardRef,
+  Inject,
+  Optional,
   ViewChild,
-  AfterViewInit
+  forwardRef
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { PoKeyCodeEnum } from './../../../enums/po-key-code.enum';
+import { ICONS_DICTIONARY, PoIconDictionary } from '../../po-icon';
 
 import { PoCheckboxBaseComponent } from './po-checkbox-base.component';
 
@@ -46,10 +49,17 @@ import { PoCheckboxBaseComponent } from './po-checkbox-base.component';
   ]
 })
 export class PoCheckboxComponent extends PoCheckboxBaseComponent implements AfterViewInit {
+  private _iconToken: { [key: string]: string };
+
   @ViewChild('checkboxLabel', { static: true }) checkboxLabel: ElementRef;
 
-  constructor(private changeDetector: ChangeDetectorRef) {
+  constructor(
+    @Optional() @Inject(ICONS_DICTIONARY) value: { [key: string]: string },
+    private changeDetector: ChangeDetectorRef
+  ) {
     super();
+
+    this._iconToken = value ?? PoIconDictionary;
   }
 
   /**
@@ -103,4 +113,8 @@ export class PoCheckboxComponent extends PoCheckboxBaseComponent implements Afte
     }
     this.changeDetector.detectChanges();
   }
+
+  get iconNameLib() {
+    return this._iconToken.NAME_LIB;
+  }
 }

projects/ui/src/lib/components/po-field/po-select/po-select.component.html

@@ -10,6 +10,7 @@
     <select
       #select
       class="po-select"
+      [ngClass]="iconNameLib === 'PhosphorIcon' ? 'po-select-phosphor' : 'po-select-poicon'"
       [attr.name]="name"
       [class.po-select-placeholder]="!selectedValue?.toString() && !!placeholder"
       [disabled]="disabled"

projects/ui/src/lib/components/po-field/po-select/po-select.component.ts

@@ -4,13 +4,15 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  forwardRef,
+  Inject,
   Input,
   OnChanges,
+  Optional,
   Output,
   Renderer2,
   SimpleChanges,
-  ViewChild
+  ViewChild,
+  forwardRef
 } from '@angular/core';
 import { AbstractControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -23,6 +25,7 @@ import {
   validValue
 } from '../../../utils/util';
 
+import { ICONS_DICTIONARY, PoIconDictionary } from '../../po-icon';
 import { PoFieldValidateModel } from '../po-field-validate.model';
 import { PoSelectOptionGroup } from './po-select-option-group.interface';
 import { PoSelectOption } from './po-select-option.interface';
@@ -90,6 +93,8 @@ const PO_SELECT_FIELD_VALUE_DEFAULT = 'value';
   ]
 })
 export class PoSelectComponent extends PoFieldValidateModel<any> implements OnChanges {
+  private _iconToken: { [key: string]: string };
+
   @ViewChild('select', { read: ElementRef, static: true }) selectElement: ElementRef;
 
   /**
@@ -244,12 +249,19 @@ export class PoSelectComponent extends PoFieldValidateModel<any> implements OnCh
     return this._fieldValue;
   }
 
+  get iconNameLib() {
+    return this._iconToken.NAME_LIB;
+  }
+
   /* istanbul ignore next */
   constructor(
+    @Optional() @Inject(ICONS_DICTIONARY) value: { [key: string]: string },
     private changeDetector: ChangeDetectorRef,
     public renderer: Renderer2
   ) {
     super();
+
+    this._iconToken = value ?? PoIconDictionary;
   }
 
   ngOnChanges(changes: SimpleChanges): void {

projects/ui/src/lib/components/po-icon/index.ts

@@ -1,3 +1,5 @@
 export * from './po-icon.component';
 
 export * from './po-icon.module';
+
+export * from './po-icon-dictionary';

projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts

@@ -0,0 +1,240 @@
+import { InjectionToken } from '@angular/core';
+
+export const ICONS_DICTIONARY = new InjectionToken<{ [key: string]: string }>('ICONS_TOKEN');
+
+export const PoIconDictionary: { [key: string]: string } = {
+  NAME_LIB: 'PoIcon',
+  ICON_A11Y_ELDERLY: 'po-icon po-icon-a11y-elderly',
+  ICON_A11Y_PREGNANT: 'po-icon po-icon-a11y-pregnant',
+  ICON_A11Y_WHEELCHAIR: 'po-icon po-icon-a11y-wheelchair',
+  ICON_AGRO_BUSINESS: 'po-icon po-icon-agro-business',
+  ICON_ALIGN_CENTER: 'po-icon po-icon-align-center',
+  ICON_ALIGN_JUSTIFY: 'po-icon po-icon-align-justify',
+  ICON_ALIGN_LEFT: 'po-icon po-icon-align-left',
+  ICON_ALIGN_RIGHT: 'po-icon po-icon-align-right',
+  ICON_ANCHOR: 'po-icon po-icon-anchor',
+  ICON_ARCHIVE: 'po-icon po-icon-archive',
+  ICON_ARROW_DOWN: 'po-icon po-icon-arrow-down',
+  ICON_ARROW_LEFT: 'po-icon po-icon-arrow-left',
+  ICON_ARROW_RIGHT: 'po-icon po-icon-arrow-right',
+  ICON_ARROW_UP: 'po-icon po-icon-arrow-up',
+  ICON_ATTACH: 'po-icon po-icon-attach',
+  ICON_AUTOMATIC_BARRIER: 'po-icon po-icon-automatic-barrier',
+  ICON_BALANCE: 'po-icon po-icon-balance',
+  ICON_BALANCE_WEIGHT: 'po-icon po-icon-balance-weight',
+  ICON_BAR_CODE: 'po-icon po-icon-bar-code',
+  ICON_BASKET: 'po-icon po-icon-basket',
+  ICON_BLUETOOTH: 'po-icon po-icon-bluetooth',
+  ICON_BOOK: 'po-icon po-icon-book',
+  ICON_CALCULATOR: 'po-icon po-icon-calculator',
+  ICON_CALENDAR: 'po-icon po-icon-calendar',
+  ICON_CALENDAR_OK: 'po-icon po-icon-calendar-ok',
+  ICON_CALENDAR_SETTINGS: 'po-icon po-icon-calendar-settings',
+  ICON_CAMERA: 'po-icon po-icon-camera',
+  ICON_CART: 'po-icon po-icon-cart',
+  ICON_CHANGE: 'po-icon po-icon-change',
+  ICON_CHART_AREA: 'po-icon po-icon-chart-area',
+  ICON_CHART_COLUMNS: 'po-icon po-icon-chart-columns',
+  ICON_CHAT: 'po-icon po-icon-chat',
+  ICON_CLEAR_CONTENT: 'po-icon po-icon-clear-content',
+  ICON_CLIPBOARD: 'po-icon po-icon-clipboard',
+  ICON_CLOCK: 'po-icon po-icon-clock',
+  ICON_CLOSE: 'po-icon po-icon-close',
+  ICON_COMPANY: 'po-icon po-icon-company',
+  ICON_CONSTRUCTION: 'po-icon po-icon-construction',
+  ICON_COPY: 'po-icon po-icon-copy',
+  ICON_COTTON: 'po-icon po-icon-cotton',
+  ICON_CREDIT_PAYMENT: 'po-icon po-icon-credit-payment',
+  ICON_CUT: 'po-icon po-icon-cut',
+  ICON_DATABASE: 'po-icon po-icon-database',
+  ICON_DEBIT_PAYMENT: 'po-icon po-icon-debit-payment',
+  ICON_DELETE: 'po-icon po-icon-delete',
+  ICON_DEVICE_DESKTOP: 'po-icon po-icon-device-desktop',
+  ICON_DEVICE_NOTEBOOK: 'po-icon po-icon-device-notebook',
+  ICON_DEVICE_SMARTPHONE: 'po-icon po-icon-device-smartphone',
+  ICON_DEVICE_TABLET: 'po-icon po-icon-device-tablet',
+  ICON_DOC_XLS: 'po-icon po-icon-doc-xls',
+  ICON_DOCUMENT: 'po-icon po-icon-document',
+  ICON_DOCUMENT_DOUBLE: 'po-icon po-icon-document-double',
+  ICON_DOCUMENT_FILLED: 'po-icon po-icon-document-filled',
+  ICON_DOWNLOAD: 'po-icon po-icon-download',
+  ICON_EDIT: 'po-icon po-icon-edit',
+  ICON_EXAM: 'po-icon po-icon-exam',
+  ICON_EXCLAMATION: 'po-icon po-icon-exclamation',
+  ICON_EXIT: 'po-icon po-icon-exit',
+  ICON_EXPORT: 'po-icon po-icon-export',
+  ICON_EYE: 'po-icon po-icon-eye',
+  ICON_EYE_OFF: 'po-icon po-icon-eye-off',
+  ICON_FILTER: 'po-icon po-icon-filter',
+  ICON_FINANCE: 'po-icon po-icon-finance',
+  ICON_FINANCE_BITCOIN: 'po-icon po-icon-finance-bitcoin',
+  ICON_FINANCE_SECURE: 'po-icon po-icon-finance-secure',
+  ICON_FIRST_PAGE: 'po-icon po-icon-first-page',
+  ICON_FOLDER: 'po-icon po-icon-folder',
+  ICON_FOOD: 'po-icon po-icon-food',
+  ICON_FOOD_MENU: 'po-icon po-icon-food-menu',
+  ICON_GAS: 'po-icon po-icon-gas',
+  ICON_GIFT: 'po-icon po-icon-gift',
+  ICON_GRID: 'po-icon po-icon-grid',
+  ICON_HANDSHAKE: 'po-icon po-icon-handshake',
+  ICON_HDD: 'po-icon po-icon-hdd',
+  ICON_HELP: 'po-icon po-icon-help',
+  ICON_HISTORY: 'po-icon po-icon-history',
+  ICON_HOME: 'po-icon po-icon-home',
+  ICON_IMAGE_ALIGN_INLINE: 'po-icon po-icon-image-align-inline',
+  ICON_IMAGE_ALIGN_LEFT: 'po-icon po-icon-image-align-left',
+  ICON_IMAGE_ALIGN_RIGHT: 'po-icon po-icon-image-align-right',
+  ICON_INFO: 'po-icon po-icon-info',
+  ICON_INJECTOR: 'po-icon po-icon-injector',
+  ICON_KEYBOARD: 'po-icon po-icon-keyboard',
+  ICON_LAST_PAGE: 'po-icon po-icon-last-page',
+  ICON_LAYERS: 'po-icon po-icon-layers',
+  ICON_LIGHT: 'po-icon po-icon-light',
+  ICON_LIKE: 'po-icon po-icon-like',
+  ICON_LINK: 'po-icon po-icon-link',
+  ICON_LIST: 'po-icon po-icon-list',
+  ICON_LOCK: 'po-icon po-icon-lock',
+  ICON_LOCK_OFF: 'po-icon po-icon-lock-off',
+  ICON_MAIL: 'po-icon po-icon-mail',
+  ICON_MANUFACTURE: 'po-icon po-icon-manufacture',
+  ICON_MAP: 'po-icon po-icon-map',
+  ICON_MENU: 'po-icon po-icon-menu',
+  ICON_MENU_CLOSE: 'po-icon po-icon-menu-close',
+  ICON_MENU_OPEN: 'po-icon po-icon-menu-open',
+  ICON_MESSAGE: 'po-icon po-icon-message',
+  ICON_MICROPHONE: 'po-icon po-icon-microphone',
+  ICON_MINUS: 'po-icon po-icon-minus',
+  ICON_MINUS_CIRCLE: 'po-icon po-icon-minus-circle',
+  ICON_MONEY: 'po-icon po-icon-money',
+  ICON_MORE: 'po-icon po-icon-more',
+  ICON_MORE_VERT: 'po-icon po-icon-more-vert',
+  ICON_NEWS: 'po-icon po-icon-news',
+  ICON_NO_SIGNAL: 'po-icon po-icon-no-signal',
+  ICON_NOTIFICATION: 'po-icon po-icon-notification',
+  ICON_OIL: 'po-icon po-icon-oil',
+  ICON_OIL_ANALYSIS: 'po-icon po-icon-oil-analysis',
+  ICON_OK: 'po-icon po-icon-ok',
+  ICON_PALLET_FULL: 'po-icon po-icon-pallet-full',
+  ICON_PALLET_PARTIAL: 'po-icon po-icon-pallet-partial',
+  ICON_PARAMETERS: 'po-icon po-icon-parameters',
+  ICON_PASTE: 'po-icon po-icon-paste',
+  ICON_PAYMENT: 'po-icon po-icon-payment',
+  ICON_PDF: 'po-icon po-icon-pdf',
+  ICON_PICKER: 'po-icon po-icon-picker',
+  ICON_PICTURE: 'po-icon po-icon-picture',
+  ICON_PIN: 'po-icon po-icon-pin',
+  ICON_PIX_LOGO: 'po-icon po-icon-pix-logo',
+  ICON_PLUS: 'po-icon po-icon-plus',
+  ICON_PLUS_CIRCLE: 'po-icon po-icon-plus-circle',
+  ICON_PRINT: 'po-icon po-icon-print',
+  ICON_PUSHCART: 'po-icon po-icon-pushcart',
+  ICON_QR_CODE: 'po-icon po-icon-qr-code',
+  ICON_REFRESH: 'po-icon po-icon-refresh',
+  ICON_SALE: 'po-icon po-icon-sale',
+  ICON_SCREEN_FULL: 'po-icon po-icon-screen-full',
+  ICON_SCREEN_MINIMIZE: 'po-icon po-icon-screen-minimize',
+  ICON_SEARCH: 'po-icon po-icon-search',
+  ICON_SECURITY_GUARD: 'po-icon po-icon-security-guard',
+  ICON_SERVER: 'po-icon po-icon-server',
+  ICON_SETTINGS: 'po-icon po-icon-settings',
+  ICON_SHARE: 'po-icon po-icon-share',
+  ICON_SIGNAL: 'po-icon po-icon-signal',
+  ICON_SMS: 'po-icon po-icon-sms',
+  ICON_SOCIAL_GITHUB: 'po-icon po-icon-social-github',
+  ICON_SOCIAL_INSTAGRAM: 'po-icon po-icon-social-instagram',
+  ICON_SOCIAL_TWITTER: 'po-icon po-icon-social-twitter',
+  ICON_SOCIAL_WHATSAPP: 'po-icon po-icon-social-whatsapp',
+  ICON_SORT: 'po-icon po-icon-sort',
+  ICON_SORT_ASC: 'po-icon po-icon-sort-asc',
+  ICON_SORT_ASCENDING: 'po-icon po-icon-sort-ascending',
+  ICON_SORT_DESC: 'po-icon po-icon-sort-desc',
+  ICON_SORT_DESCENDING: 'po-icon po-icon-sort-descending',
+  ICON_STAR: 'po-icon po-icon-star',
+  ICON_STAR_FILLED: 'po-icon po-icon-star-filled',
+  ICON_STAR_HALF: 'po-icon po-icon-star-half',
+  ICON_STEERING_WHEEL: 'po-icon po-icon-steering-wheel',
+  ICON_STOCK: 'po-icon po-icon-stock',
+  ICON_TABLE: 'po-icon po-icon-table',
+  ICON_TARGET: 'po-icon po-icon-target',
+  ICON_TELEPHONE: 'po-icon po-icon-telephone',
+  ICON_TEXT_BOLD: 'po-icon po-icon-text-bold',
+  ICON_TEXT_ITALIC: 'po-icon po-icon-text-italic',
+  ICON_TEXT_UNDERLINE: 'po-icon po-icon-text-underline',
+  ICON_TOUCH: 'po-icon po-icon-touch',
+  ICON_TRAVEL: 'po-icon po-icon-travel',
+  ICON_TRUCK: 'po-icon po-icon-truck',
+  ICON_UPLOAD: 'po-icon po-icon-upload',
+  ICON_UPLOAD_CLOUD: 'po-icon po-icon-upload-cloud',
+  ICON_USER: 'po-icon po-icon-user',
+  ICON_USER_ADD: 'po-icon po-icon-user-add',
+  ICON_USER_DELETE: 'po-icon po-icon-user-delete',
+  ICON_USERS: 'po-icon po-icon-users',
+  ICON_VIDEO_CALL: 'po-icon po-icon-video-call',
+  ICON_WAITER: 'po-icon po-icon-waiter',
+  ICON_WALLET: 'po-icon po-icon-wallet',
+  ICON_WAREHOUSE: 'po-icon po-icon-warehouse',
+  ICON_WARNING: 'po-icon po-icon-warning',
+  ICON_WEIGHT: 'po-icon po-icon-weight',
+  ICON_WORLD: 'po-icon po-icon-world',
+  ICON_XML: 'po-icon po-icon-xml',
+  ICON_ZOOM_IN: 'po-icon po-icon-zoom-in',
+  ICON_ZOOM_OUT: 'po-icon po-icon-zoom-out'
+};
+
+export const PhosphorIconDictionary: { [key: string]: string } = {
+  NAME_LIB: 'PhosphorIcon',
+  ICON_ALIGN_CENTER: 'ph ph-text-align-center',
+  ICON_ALIGN_JUSTIFY: 'ph ph-text-align-justify',
+  ICON_ALIGN_LEFT: 'ph ph-text-align-left',
+  ICON_ALIGN_RIGHT: 'ph ph-text-align-right',
+  ICON_ARROW_DOWN: 'ph ph-caret-down',
+  ICON_ARROW_LEFT: 'ph ph-caret-left',
+  ICON_ARROW_RIGHT: 'ph ph-caret-right',
+  ICON_ARROW_UP: 'ph ph-caret-up',
+  ICON_CALENDAR: 'ph ph-calendar-blank',
+  ICON_CLEAR_CONTENT: 'ph ph-x-circle',
+  ICON_CLOCK: 'ph ph-clock',
+  ICON_CLOSE: 'ph ph-x',
+  ICON_DELETE: 'ph ph-trash',
+  ICON_DRAG: 'ph ph-dots-six-vertical',
+  ICON_EDIT: 'ph ph-pencil-simple',
+  ICON_EXCLAMATION: 'ph ph-warning-circle',
+  ICON_EXIT: 'ph ph-sign-out',
+  ICON_EYE: 'ph ph-eye',
+  ICON_EYE_OFF: 'ph ph-eye-closed',
+  ICON_FILTER: 'ph ph-funnel',
+  ICON_HELP: 'ph ph-question',
+  ICON_INFO: 'ph ph-info',
+  ICON_LAST_PAGE: 'ph ph-caret-double-right',
+  ICON_LINK: 'ph ph-link',
+  ICON_LIST: 'ph ph-list-dashes',
+  ICON_LOCK: 'ph ph-lock',
+  ICON_MAIL: 'ph ph-envelope-simple',
+  ICON_MENU: 'ph ph-list',
+  ICON_MENU_CLOSE: 'ph ph-caret-circle-left',
+  ICON_MENU_OPEN: 'ph ph-caret-circle-right',
+  ICON_MINUS: 'ph ph-minus',
+  ICON_MORE: 'ph ph-dots-three',
+  ICON_MORE_VERT: 'ph ph-dots-three-vertical',
+  ICON_NOTIFICATION: 'ph ph-bell',
+  ICON_OK: 'ph ph-check',
+  ICON_PARAMETERS: 'ph ph-sliders-horizontal',
+  ICON_PICTURE: 'ph ph-image',
+  ICON_PUSH_PIN: 'ph ph-push-pin',
+  ICON_PUSH_PIN_SLASH: 'ph ph-push-pin-slash',
+  ICON_REFRESH: 'ph ph-arrow-clockwise',
+  ICON_SEARCH: 'ph ph-magnifying-glass',
+  ICON_SETTINGS: 'ph ph-gear-six',
+  ICON_SORT: 'ph ph-caret-up-down ',
+  ICON_SORT_ASC: 'ph ph-caret-up',
+  ICON_SORT_DESC: 'ph ph-caret-down',
+  ICON_STAR: 'ph ph-star',
+  ICON_TELEPHONE: 'ph ph-phone',
+  ICON_TEXT_BOLD: 'ph ph-text-b',
+  ICON_TEXT_ITALIC: 'ph ph-text-italic',
+  ICON_TEXT_UNDERLINE: 'ph ph-text-underline',
+  ICON_UPLOAD_CLOUD: 'ph ph-cloud-arrow-up',
+  ICON_USER: 'ph ph-user',
+  ICON_WARNING: 'ph ph-exclamation-mark',
+  ICON_WORLD: 'ph ph-globe-simple'
+};