refactor: migrate icons in TS to PrimeIcons

libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.spec.ts

@@ -9,6 +9,7 @@ import { ButtonDialogComponent } from './button-dialog.component'
 import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
 import { ButtonDialogHarness, DivHarness } from '../../../../../testing'
 import { ButtonDialogConfig } from '../../../model/button-dialog'
+import { PrimeIcons } from 'primeng/api'
 
 @Component({
   template: `<ocx-button-dialog>
@@ -20,12 +21,12 @@ class TestBaseHostComponent {}
 const config: ButtonDialogConfig = {
   primaryButtonDetails: {
     key: 'inlineMain',
-    icon: 'pi pi-plus',
+    icon: PrimeIcons.PLUS,
   },
   secondaryButtonIncluded: true,
   secondaryButtonDetails: {
     key: 'inlineSide',
-    icon: 'pi pi-times',
+    icon: PrimeIcons.TIMES,
   },
 }
 
@@ -121,21 +122,21 @@ describe('ButtonDialogComponent', () => {
       component.dialogData.config = {
         primaryButtonDetails: {
           key: 'CustomMain',
-          icon: 'pi pi-check',
+          icon: PrimeIcons.CHECK,
         },
         secondaryButtonIncluded: true,
         secondaryButtonDetails: {
           key: 'CustomSide',
-          icon: 'pi pi-times',
+          icon: PrimeIcons.TIMES,
         },
       }
 
       // expect correct label
       expect(await buttonDialogHarness.getPrimaryButtonLabel()).toBe('CustomMain')
       expect(await buttonDialogHarness.getSecondaryButtonLabel()).toBe('CustomSide')
       // expect correct icon
-      expect(await buttonDialogHarness.getPrimaryButtonIcon()).toBe('pi pi-check')
-      expect(await buttonDialogHarness.getSecondaryButtonIcon()).toBe('pi pi-times')
+      expect(await buttonDialogHarness.getPrimaryButtonIcon()).toBe(PrimeIcons.CHECK)
+      expect(await buttonDialogHarness.getSecondaryButtonIcon()).toBe(PrimeIcons.TIMES)
     })
 
     it('should translate button keys', async () => {
@@ -317,9 +318,9 @@ describe('ButtonDialogComponent', () => {
       buttonDialogHarness = await harnessLoader.getHarness(ButtonDialogHarness)
 
       expect(await buttonDialogHarness.getPrimaryButtonLabel()).toBe('inlineMain')
-      expect(await buttonDialogHarness.getPrimaryButtonIcon()).toBe('pi pi-plus')
+      expect(await buttonDialogHarness.getPrimaryButtonIcon()).toBe(PrimeIcons.PLUS)
       expect(await buttonDialogHarness.getSecondaryButtonLabel()).toBe('inlineSide')
-      expect(await buttonDialogHarness.getSecondaryButtonIcon()).toBe('pi pi-times')
+      expect(await buttonDialogHarness.getSecondaryButtonIcon()).toBe(PrimeIcons.TIMES)
     })
 
     it('should use default emitter inline', async () => {

libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts

@@ -1,16 +1,17 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { PrimeIcons } from 'primeng/api'
 
 interface ViewingLayouts {
-  icon: string
+  icon: PrimeIcons
   layout: 'grid' | 'list' | 'table'
   title?: string
   titleKey: string
 }
 
 const ALL_VIEW_LAYOUTS: ViewingLayouts[] = [
-  { icon: 'pi pi-list', layout: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' },
-  { icon: 'pi pi-th-large', layout: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' },
-  { icon: 'pi pi-table', layout: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' },
+  { icon: PrimeIcons.LIST, layout: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' },
+  { icon: PrimeIcons.TH_LARGE, layout: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' },
+  { icon: PrimeIcons.TABLE, layout: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' },
 ]
 
 @Component({
@@ -38,7 +39,7 @@ export class DataLayoutSelectionComponent implements OnInit {
     this.layout = 'table'
   }
 
-  onDataViewLayoutChange(event: { icon: string; layout: 'grid' | 'list' | 'table' }): void {
+  onDataViewLayoutChange(event: { icon: PrimeIcons; layout: 'grid' | 'list' | 'table' }): void {
     this.dataViewLayoutChange.emit(event.layout)
   }
 }

libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.ts

@@ -13,7 +13,7 @@ import {
 } from '@angular/core'
 import { Router } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
-import { MenuItem } from 'primeng/api'
+import { MenuItem, PrimeIcons } from 'primeng/api'
 import { BehaviorSubject, Observable, combineLatest, map, mergeMap } from 'rxjs'
 import { DataAction } from '../../../model/data-action'
 import { DataSortDirection } from '../../../model/data-sort-direction'
@@ -259,21 +259,21 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
         if (this.viewItem.observed && this.userService.hasPermission(this.viewPermission || '')) {
           menuItems.push({
             label: translations[this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW'],
-            icon: 'pi pi-eye',
+            icon: PrimeIcons.EYE,
             command: () => this.viewItem.emit(this.selectedItem),
           })
         }
         if (this.editItem.observed && this.userService.hasPermission(this.editPermission || '')) {
           menuItems.push({
             label: translations[this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT'],
-            icon: 'pi pi-pencil',
+            icon: PrimeIcons.PENCIL,
             command: () => this.editItem.emit(this.selectedItem),
           })
         }
         if (this.deleteItem.observed && this.userService.hasPermission(this.deletePermission || '')) {
           menuItems.push({
             label: translations[this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE'],
-            icon: 'pi pi-trash',
+            icon: PrimeIcons.TRASH,
             command: () => this.deleteItem.emit(this.selectedItem),
           })
         }

libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts

@@ -5,18 +5,19 @@ import { Column } from '../../../model/column'
 import { ColumnViewTemplate } from '../../../model/column-view-template'
 import { ColumnTogglerComponent } from './column-toggler-component/column-toggler.component'
 import { ViewTemplatePickerComponent } from './view-template-picker/view-template-picker.component'
+import { PrimeIcons } from 'primeng/api'
 
 interface ViewingModes {
-  icon: string
+  icon: PrimeIcons
   mode: string
   title?: string
   titleKey?: string
 }
 
 const ALL_VIEW_MODES = [
-  { icon: 'pi pi-list', mode: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' },
-  { icon: 'pi pi-th-large', mode: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' },
-  { icon: 'pi pi-table', mode: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' },
+  { icon: PrimeIcons.LIST, mode: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' },
+  { icon: PrimeIcons.TH_LARGE, mode: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' },
+  { icon: PrimeIcons.TABLE, mode: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' },
 ]
 
 interface DefaultColumnDefinition {
@@ -248,7 +249,7 @@ export class DataViewControlsComponent implements OnInit, OnChanges {
       })
   }
 
-  viewModeChange(event: { icon: string; mode: string }): void {
+  viewModeChange(event: { icon: PrimeIcons; mode: string }): void {
     this.dataViewChange.emit(event.mode)
     this.enableToggleColumnButton(event.mode)
   }

libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts

@@ -8,7 +8,7 @@ import { DiagramType } from '../../../model/diagram-type'
 import { ColorUtils } from '../../utils/colorutils'
 
 export interface DiagramLayouts {
-  icon: string
+  icon: PrimeIcons
   layout: DiagramType
   title?: string
   titleKey: string

libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.stories.ts

@@ -65,7 +65,7 @@ const demoActions: Action[] = [
     },
     title: 'Tooltip for Reload',
     show: 'always',
-    icon: 'pi pi-refresh',
+    icon: PrimeIcons.REFRESH,
   },
   {
     label: 'Delete',
@@ -75,7 +75,7 @@ const demoActions: Action[] = [
     },
     title: 'Tooltip for Delete',
     show: 'always',
-    icon: 'pi pi-trash',
+    icon: PrimeIcons.TRASH,
   },
   {
     label: 'Some action',

libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts

@@ -124,8 +124,8 @@ export class PageHeaderComponent implements OnInit, OnChanges {
   ) {
     this.breadcrumbs = breadcrumbs
     this.home$ = concat(
-      of({ icon: 'pi pi-home', routerLink: '/' }),
-      this.appStateService.currentPortal$.pipe(map((portal) => ({ icon: 'pi pi-home', routerLink: portal.baseUrl })))
+      of({ icon: PrimeIcons.HOME, routerLink: '/' }),
+      this.appStateService.currentPortal$.pipe(map((portal) => ({ icon: PrimeIcons.HOME, routerLink: portal.baseUrl })))
     )
   }
   ngOnChanges(changes: SimpleChanges): void {

libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.html

@@ -62,7 +62,7 @@
                 [pTooltip]="item.label || ''"
                 tooltipPosition="bottom"
               >
-                <i [ngClass]="'pi-' + item.icon || ''" class="pi fs-large"></i>
+                <i [ngClass]="item.icon || ''" class="fs-large"></i>
               </a>
             </li>
           </ng-container>

libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.ts

@@ -14,6 +14,7 @@ import { ThemeService } from '../../../services/theme.service'
 import { ImageLogoUrlUtils } from '../../utils/image-logo-url.utils'
 import { UserService } from '../../../services/user.service'
 import { AppStateService } from '../../../services/app-state.service'
+import { PrimeIcons } from 'primeng/api'
 
 type MenuItemPerm = MenuItem & { permission: string }
 @Component({
@@ -137,42 +138,42 @@ export class HeaderComponent implements OnInit {
     this.moreMenuItems = [
       {
         command: (e) => this.onOpenFeedback(e),
-        icon: 'comment',
+        icon: PrimeIcons.COMMENT,
         label: 'Feedback',
         disabled: this.feedbackDisabled,
         permission: 'PORTAL_HEADER_GIVE_FEEDBACK#VIEW',
       },
       {
         command: (e) => this.onAddToFavourites(e),
-        icon: 'star',
+        icon: PrimeIcons.STAR,
         label: 'Add to Favorites',
         disabled: this.favoritesDisabled,
         permission: 'PORTAL_HEADER_ADD_TO_MY_FAVORITES#VIEW',
       },
       {
         command: (e) => this.onOpenSupportTicket(e),
-        icon: 'ticket',
+        icon: PrimeIcons.TICKET,
         label: 'Create Support Ticket',
         disabled: this.supportTicketDisabled,
         permission: 'PORTAL_HEADER_CREATE_SUPPORT_TICKET#VIEW',
       },
       {
         command: (e) => this.onTopbarItemClick(e, 'search'),
-        icon: 'search',
+        icon: PrimeIcons.SEARCH,
         label: 'Search',
         disabled: this.searchDisabled,
         permission: 'PORTAL_HEADER_ENTERPRISE_SEARCH#VIEW',
       },
       {
         command: (e) => this.onOpenHelpPage(e),
-        icon: 'question-circle',
+        icon: PrimeIcons.QUESTION_CIRCLE,
         label: 'Show Help for this article',
         disabled: this.helpDisabled,
         permission: 'PORTAL_HEADER_HELP#VIEW',
       },
       {
         command: (e) => this.onOpenHelpPageEditor(e),
-        icon: 'pencil',
+        icon: PrimeIcons.PENCIL,
         label: 'Edit Help for this article',
         disabled: this.helpEditorDisabled,
         permission: 'PORTAL_HEADER_HELP_ITEM_EDITOR#VIEW',

libs/portal-integration-angular/src/lib/model/button-dialog.ts

@@ -1,4 +1,5 @@
 import { Type } from '@angular/core'
+import { PrimeIcons } from 'primeng/api'
 
 /**
  * Object describing details for button rendering containing key for translation, optional icon and optional parameters for translation
@@ -21,7 +22,7 @@ import { Type } from '@angular/core'
  */
 export interface ButtonDialogButtonDetails {
   key: string
-  icon?: string
+  icon?: PrimeIcons
   parameters?: Record<string, unknown>
 }
 

libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts

@@ -20,6 +20,7 @@ import {
   PortalDialogService,
 } from './portal-dialog.service'
 import { DivHarness, InputHarness, ButtonDialogHarness } from '../../../testing/index'
+import { PrimeIcons } from 'primeng/api'
 
 @Component({
   template: `<h1>BaseTestComponent</h1>`,
@@ -336,41 +337,41 @@ describe('PortalDialogService', () => {
     fixture.componentInstance.show(
       'title',
       'message',
-      { key: 'BUTTON', icon: 'pi pi-times' },
-      { key: 'BUTTON', icon: 'pi pi-trash' }
+      { key: 'BUTTON', icon: PrimeIcons.TIMES },
+      { key: 'BUTTON', icon: PrimeIcons.TRASH }
     )
 
     const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness)
     const primaryButtonLabel = await dialogHarness.getPrimaryButtonLabel()
     const primaryButtonIcon = await dialogHarness.getPrimaryButtonIcon()
     expect(primaryButtonLabel).toBe(translations['BUTTON'])
-    expect(primaryButtonIcon).toBe('pi pi-times')
+    expect(primaryButtonIcon).toBe(PrimeIcons.TIMES)
 
     const secondaryButtonLabel = await dialogHarness.getSecondaryButtonLabel()
     const secondaryButtonIcon = await dialogHarness.getSecondaryButtonIcon()
     expect(secondaryButtonLabel).toBe(translations['BUTTON'])
-    expect(secondaryButtonIcon).toBe('pi pi-trash')
+    expect(secondaryButtonIcon).toBe(PrimeIcons.TRASH)
   })
 
   it('should display dialog with message and icon if DialogMessage provided as string and icon', async () => {
     jest.spyOn(pDialogService, 'open')
 
-    fixture.componentInstance.show('title', { message: 'MESSAGE', icon: 'pi pi-times' }, 'button1', 'button2')
+    fixture.componentInstance.show('title', { message: 'MESSAGE', icon: PrimeIcons.TIMES }, 'button1', 'button2')
 
     const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness)
     const dialogMessageContentHarness = await dialogHarness.getDialogMessageContent()
     const message = await dialogMessageContentHarness?.getMessageContent()
     expect(message).toEqual(translations['MESSAGE'])
     const icon = await dialogMessageContentHarness?.getIconValue()
-    expect(icon).toContain('pi pi-times')
+    expect(icon).toContain(PrimeIcons.TIMES)
   })
 
   it('should display dialog with message and icon if DialogMessage provided as TranslationKey and icon', async () => {
     jest.spyOn(pDialogService, 'open')
 
     fixture.componentInstance.show(
       'title',
-      { message: { key: 'MESSAGE_PARAM', parameters: { val: 'dialogMessageParam' } }, icon: 'pi pi-times' },
+      { message: { key: 'MESSAGE_PARAM', parameters: { val: 'dialogMessageParam' } }, icon: PrimeIcons.TIMES },
       'button1',
       'button2'
     )
@@ -380,7 +381,7 @@ describe('PortalDialogService', () => {
     const message = await dialogMessageContentHarness?.getMessageContent()
     expect(message).toEqual('myMessage dialogMessageParam')
     const icon = await dialogMessageContentHarness?.getIconValue()
-    expect(icon).toContain('pi pi-times')
+    expect(icon).toContain(PrimeIcons.TIMES)
   })
 
   it('should display dialog with custom component if provided', async () => {

libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts

@@ -6,6 +6,7 @@ import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dy
 import { ButtonDialogComponent } from '../core/components/button-dialog/button-dialog.component'
 import { ButtonDialogButtonDetails, ButtonDialogData } from '../model/button-dialog'
 import { DialogMessageContentComponent } from '../core/components/button-dialog/dialog-message-content/dialog-message-content.component'
+import { PrimeIcons } from 'primeng/api'
 
 /**
  * Object containing key for translation with parameters object for translation
@@ -61,7 +62,7 @@ type TranslationKey = string | TranslationKeyWithParameters
  * }
  * ```
  */
-type DialogMessage = { message: TranslationKey; icon: string }
+type DialogMessage = { message: TranslationKey; icon: PrimeIcons }
 
 /**
  * Implement via component class to be displayed by {@link PortalDialogService.openDialog}

libs/portal-integration-angular/testing/data-layout-selection.harness.ts

@@ -1,5 +1,6 @@
 import { ContentContainerComponentHarness, TestElement } from '@angular/cdk/testing'
 import { PSelectButtonHarness } from './primeng/p-selectButton.harness'
+import { PrimeIcons } from 'primeng/api'
 
 export class DataLayoutSelectionHarness extends ContentContainerComponentHarness {
   static hostSelector = 'ocx-data-layout-selection'
@@ -9,15 +10,15 @@ export class DataLayoutSelectionHarness extends ContentContainerComponentHarness
   }
 
   async getListLayoutSelectionButton() {
-    return await this.isDesiredButton(await this.getAllSelectionButtons(), 'pi pi-list')
+    return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.LIST)
   }
 
   async getGridLayoutSelectionButton() {
-    return await this.isDesiredButton(await this.getAllSelectionButtons(), 'pi pi-th-large')
+    return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.TH_LARGE)
   }
 
   async getTableLayoutSelectionButton() {
-    return await this.isDesiredButton(await this.getAllSelectionButtons(), 'pi pi-table')
+    return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.TABLE)
   }
 
   async getCurrentLayout() {
@@ -28,7 +29,7 @@ export class DataLayoutSelectionHarness extends ContentContainerComponentHarness
     await (await this.getListLayoutSelectionButton())?.click()
   }
 
-  private async isDesiredButton(value: TestElement[], icon: string) {
+  private async isDesiredButton(value: TestElement[], icon: PrimeIcons) {
     for (let index = 0; index < value.length; index++) {
       if ((await value[index].getAttribute('aria-labelledby')) === icon) {
         return value[index]