po-ui · anliben · Apr 1, 2024
diff --git a/projects/app/src/app/app.component.html b/projects/app/src/app/app.component.html
@@ -0,0 +1,3 @@
+<po-page-default>
+  <sample-po-table-airfare></sample-po-table-airfare>
+</po-page-default>
diff --git a/projects/app/src/app/app.component.ts b/projects/app/src/app/app.component.ts
@@ -1,7 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, Injector } from '@angular/core';
+import { PoIconComponent, PoIconService } from '../../../ui/src/lib';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
-export class AppComponent {}
+export class AppComponent {
+
+  icon: any;
+
+  constructor(
+    public iconsService: PoIconService
+  ) {
+    this.icon = this.iconsService.icons.address_book
+  }
+}
diff --git a/projects/app/src/app/app.module.ts b/projects/app/src/app/app.module.ts
@@ -4,12 +4,12 @@ import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { PoModule } from '@po-ui/ng-components';
+import { PoModule } from '../../../ui/src/lib';
 
 import { AppComponent } from './app.component';
-
+import { SamplePoTableAirfareComponent } from 'projects/ui/src/lib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component'
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, SamplePoTableAirfareComponent],
   imports: [BrowserModule, FormsModule, HttpClientModule, RouterModule.forRoot([], {}), PoModule],
   bootstrap: [AppComponent]
 })

diff --git a/projects/app/src/index.html b/projects/app/src/index.html
@@ -10,5 +10,6 @@
   </head>
   <body>
     <app-root></app-root>
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
   </body>
 </html>
diff --git a/projects/ui/src/lib/components/po-icon/index.ts b/projects/ui/src/lib/components/po-icon/index.ts
@@ -1,3 +1,4 @@
 export * from './po-icon.component';
 
 export * from './po-icon.module';
+export * from './po-icon-provider.service'
diff --git a/projects/ui/src/lib/components/po-icon/po-icon-provider.service.spec.ts b/projects/ui/src/lib/components/po-icon/po-icon-provider.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { PoIconService } from './po-icon-provider.service';
+
+describe('Service: PoIconProvider', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PoIconService]
+    });
+  });
+
+  it('should ...', inject([PoIconService], (service: PoIconService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/projects/ui/src/lib/components/po-icon/po-icon-provider.service.ts b/projects/ui/src/lib/components/po-icon/po-icon-provider.service.ts
@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PoIconService {
+  private iconDefault = {
+    po_icon_a11y_elderly: 'po-icon-a11y-elderly',
+    po_icon_a11y_pregnant: 'po-icon-a11y-pregnant',
+    po_icon_a11y_wheelchair: 'po-icon-a11y-wheelchair',
+    po_icon_agro_business: 'po-icon-agro-business',
+    po_icon_align_center: 'po-icon-align-center',
+    po_icon_align_justify: 'po-icon-align-justify',
+    po_icon_align_left: 'po-icon-align-left',
+    po_icon_align_right: 'po-icon-align-right',
+    po_icon_anchor: 'po-icon-anchor',
+    po_icon_archive: 'po-icon-archive',
+    po_icon_arrow_down: 'po-icon-arrow-down',
+    po_icon_arrow_left: 'po-icon-arrow-left',
+    po_icon_arrow_right: 'po-icon-arrow-right',
+    po_icon_arrow_up: 'po-icon-arrow-up',
+    po_icon_attach: 'po-icon-attach',
+    po_icon_automatic_barrier: 'po-icon-automatic-barrier',
+    po_icon_balance: 'po-icon-balance',
+    po_icon_balance_weight: 'po-icon-balance-weight',
+    po_icon_bar_code: 'po-icon-bar-code',
+    po_icon_basket: 'po-icon-basket',
+    po_icon_bluetooth: 'po-icon-bluetooth',
+    po_icon_book: 'po-icon-book',
+    po_icon_calculator: 'po-icon-calculator',
+    po_icon_calendar: 'po-icon-calendar',
+    po_icon_calendar_ok: 'po-icon-calendar-ok',
+    po_icon_calendar_settings: 'po-icon-calendar-settings',
+    po_icon_camera: 'po-icon-camera',
+    po_icon_cart: 'po-icon-cart',
+    po_icon_change: 'po-icon-change',
+    po_icon_chart_area: 'po-icon-chart-area',
+    po_icon_chart_columns: 'po-icon-chart-columns',
+    po_icon_chat: 'po-icon-chat',
+    po_icon_clear_content: 'po-icon-clear-content',
+    po_icon_delete: 'po-icon-delete',
+    po_icon_settings: 'po-icon-settings',
+    po_icon_finance: 'po-icon-finance',
+  };
+
+  private iconParttern = {
+    address_book: 'ph ph-address-book',
+    air_traffic_control: 'ph ph-air_traffic_control',
+    airplane: 'ph ph-airplane',
+    airplane_in_flight: 'ph ph-airplane_in_flight',
+    airplane_landing: 'ph ph-airplane_landing',
+    airplane_takeoff: 'ph ph-airplane_takeoff',
+    airplay: 'ph ph-airplay',
+    alarm: 'ph ph-alarm',
+    alien: 'ph ph-alien',
+    align_bottom: 'ph ph-align_bottom',
+    align_bottom_simple: 'ph ph-align_bottom_simple',
+    align_center_horizontal: 'ph ph-align_center_horizontal',
+    align_center_horizontal_simple: 'ph ph-align_center_horizontal_simple',
+    align_center_vertical: 'ph ph-align_center_vertical',
+    align_center_vertical_simple: 'ph ph-align_center_vertical_simple',
+    align_left: 'ph ph-align_left',
+    align_left_simple: 'ph ph-align_left_simple',
+    align_right: 'ph ph-align_right',
+    align_top: 'ph ph-align_top',
+    question: 'ph ph-question',
+    arrow_down: 'ph ph-arrow-down',
+    arrow_up: 'ph ph-arrow-up'
+  };
+
+  get icons() {
+    return {
+      ...this.iconDefault,
+      ...this.iconParttern
+    };
+  }
+}
diff --git a/...ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html b/...ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html
@@ -52,7 +52,7 @@
       <po-button
         [p-tooltip]="literals.up"
         p-tooltip-position="left"
-        p-icon="po-icon po-icon-arrow-up"
+        [p-icon]="iconService.icons.arrow_up"
         [p-disabled]="verifyArrowDisabled(option, 'up') || isFixed(option)"
         (p-click)="emitChangePosition(option, 'up')"
       >
@@ -61,7 +61,7 @@
       <po-button
         [p-tooltip]="literals.down"
         p-tooltip-position="top"
-        p-icon="po-icon po-icon-arrow-down"
+        [p-icon]="iconService.icons.arrow_down"
         [p-disabled]="verifyArrowDisabled(option, 'down') || isFixed(option)"
         (p-click)="emitChangePosition(option, 'down')"
       >

diff --git a/...s/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.ts b/...s/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.ts
@@ -6,6 +6,7 @@ import { PoLanguageService } from '../../../services/po-language/po-language.ser
 import { convertToBoolean } from '../../../utils/util';
 import { PoCheckboxGroupComponent } from '../../po-field/po-checkbox-group/po-checkbox-group.component';
 import { PoTableColumn } from '../interfaces/po-table-column.interface';
+import { PoIconService } from '../../po-icon';
 
 export const poTableListManagerLiterals = {
   en: {
@@ -60,7 +61,7 @@ export class PoTableListManagerComponent extends PoCheckboxGroupComponent {
 
   literals;
 
-  constructor(languageService: PoLanguageService, changeDetector: ChangeDetectorRef) {
+  constructor(languageService: PoLanguageService, changeDetector: ChangeDetectorRef, private iconService: PoIconService) {
     super(changeDetector);
 
     const language = languageService.getShortLanguage();

diff --git a/projects/ui/src/lib/components/po-table/po-table.component.html b/projects/ui/src/lib/components/po-table/po-table.component.html
@@ -14,7 +14,7 @@
 
     <div class="po-table-actions-batch-actions__buttons">
       <po-button
-        p-icon="po-icon-delete"
+        [p-icon]="iconService.icons.po_icon_delete"
         [p-danger]="true"
         [p-disabled]="itemsSelected.length > 1 && serviceDeleteApi !== undefined"
         [p-label]="literals.delete"
@@ -26,7 +26,7 @@
   <div #columnManager *ngIf="hasValidColumns && !hideColumnsManager" class="po-table-actions-column-manager">
     <po-button
       #columnManagerTarget
-      p-icon="po-icon-settings"
+      [p-icon]="iconService.icons.po_icon_settings"
       p-kind="tertiary"
       p-tooltip-position="left"
       [p-aria-label]="literals.columnsManager"

diff --git a/projects/ui/src/lib/components/po-table/po-table.component.ts b/projects/ui/src/lib/components/po-table/po-table.component.ts
@@ -42,6 +42,7 @@ import { PoTableColumnTemplateDirective } from './po-table-column-template/po-ta
 import { PoTableRowTemplateDirective } from './po-table-row-template/po-table-row-template.directive';
 import { PoTableSubtitleColumn } from './po-table-subtitle-footer/po-table-subtitle-column.interface';
 import { PoTableService } from './services/po-table.service';
+import { PoIconService } from '../po-icon';
 
 /**
  * @docsExtends PoTableBaseComponent
@@ -199,7 +200,8 @@ export class PoTableComponent extends PoTableBaseComponent implements AfterViewI
     private changeDetector: ChangeDetectorRef,
     private decimalPipe: DecimalPipe,
     private router: Router,
-    private defaultService: PoTableService
+    private defaultService: PoTableService,
+    private iconService: PoIconService
   ) {
     super(poDate, poLanguageService, defaultService);
     this.JSON = JSON;

diff --git a/.../components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.ts b/.../components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.component.ts
@@ -1,13 +1,14 @@
-import { AfterViewInit, Component, ViewChild, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ViewChild, OnInit, inject } from '@angular/core';
 
 import {
   PoDialogService,
   PoModalComponent,
   PoTableAction,
   PoTableColumn,
   PoTableComponent,
-  PoNotificationService
-} from '@po-ui/ng-components';
+  PoNotificationService,
+  PoIconService
+} from '../../../../';
 
 import { SamplePoTableAirfareService } from './sample-po-table-airfare.service';
 
@@ -20,15 +21,17 @@ export class SamplePoTableAirfareComponent implements AfterViewInit, OnInit {
   @ViewChild(PoModalComponent, { static: true }) poModal: PoModalComponent;
   @ViewChild(PoTableComponent, { static: true }) poTable: PoTableComponent;
 
+  iconService = inject(PoIconService)
+
   actions: Array<PoTableAction> = [
     {
       action: this.discount.bind(this),
-      icon: 'po-icon-finance',
+      icon: this.iconService.icons.po_icon_finance,
       label: 'Apply Discount',
       disabled: this.validateDiscount.bind(this)
     },
-    { action: this.details.bind(this), icon: 'po-icon-info', label: 'Details' },
-    { action: this.remove.bind(this), icon: 'po-icon po-icon-delete', label: 'Remove' }
+    { action: this.details.bind(this), icon: this.iconService.icons.question, label: 'Details' },
+    { action: this.remove.bind(this), icon: this.iconService.icons.po_icon_delete, label: 'Remove' }
   ];
   columns: Array<PoTableColumn>;
   columnsDefault: Array<PoTableColumn>;

diff --git a/...ib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.service.ts b/...ib/components/po-table/samples/sample-po-table-airfare/sample-po-table-airfare.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { PoTableColumn, PoTableDetail } from '@po-ui/ng-components';
+import { PoTableColumn, PoTableDetail } from '../../';
 
 @Injectable()
 export class SamplePoTableAirfareService {