Chore: ditch the abandoned ngx-bootstrap-icons, roll our own (#14665)

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html

@@ -17,7 +17,7 @@
       @switch (objectForm.get('data_type').value) {
         @case (CustomFieldDataType.Select) {
           <button type="button" class="btn btn-sm btn-primary my-2" (click)="addSelectOption()">
-            <span i18n>Add option</span><i-bs class="ms-1" name="plus-circle"></i-bs>
+            <span i18n>Add option</span><pngx-bs-icon class="ms-1" name="plus-circle"></pngx-bs-icon>
           </button>
           <div formArrayName="select_options">
             @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts

@@ -6,7 +6,6 @@ import { ElementRef, QueryList } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -28,7 +27,6 @@ describe('CustomFieldEditDialogComponent', () => {
         ReactiveFormsModule,
         NgSelectModule,
         NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         CustomFieldEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts

@@ -15,8 +15,8 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import {
   CustomField,
   CustomFieldDataType,
@@ -41,7 +41,7 @@ const SELECT_OPTION_PAGE_SIZE = 8
     FormsModule,
     ReactiveFormsModule,
     NgbPaginationModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class CustomFieldEditDialogComponent

src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.spec.ts

@@ -4,7 +4,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -27,7 +26,6 @@ describe('GroupEditDialogComponent', () => {
         ReactiveFormsModule,
         NgSelectModule,
         NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         GroupEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,

src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.spec.ts

@@ -4,7 +4,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -28,7 +27,6 @@ describe('TagEditDialogComponent', () => {
         ReactiveFormsModule,
         NgSelectModule,
         NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         TagEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts

@@ -8,7 +8,6 @@ import {
 } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -39,7 +38,6 @@ describe('UserEditDialogComponent', () => {
         ReactiveFormsModule,
         NgSelectModule,
         NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         UserEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html

@@ -30,7 +30,7 @@
               <div class="d-flex">
                 <p class="p-2" i18n>Trigger Workflow On:</p>
                 <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addTrigger()">
-                  <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Trigger</ng-container>
+                  <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Trigger</ng-container>
                 </button>
               </div>
               <div ngbAccordion [closeOthers]="true">
@@ -72,7 +72,7 @@
               <div class="d-flex">
                 <p class="p-2" i18n>Apply Actions:</p>
                 <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addAction()">
-                  <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Action</ng-container>
+                  <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Action</ng-container>
                 </button>
               </div>
               <div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
@@ -80,7 +80,7 @@
                   <div ngbAccordionItem [formGroup]="actionFields.controls[i]">
                     <div ngbAccordionHeader cdkDrag>
                       <button ngbAccordionButton>
-                        <i-bs name="grip-vertical" class="ms-n3 pe-1"></i-bs>
+                        <pngx-bs-icon name="grip-vertical" class="ms-n3 pe-1"></pngx-bs-icon>
                         {{i + 1}}. {{getActionTypeOptionName(actionFields.controls[i].value.type)}}
                         @if(action.id) {
                           <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span>
@@ -187,7 +187,7 @@
                 (click)="addFilter(formGroup)"
                 [disabled]="!canAddFilter(formGroup)"
               >
-                <i-bs name="plus-circle" class="me-1"></i-bs><span i18n>Add filter</span>
+                <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><span i18n>Add filter</span>
               </button>
             </div>
             <ul class="mt-2 list-group filters" formArrayName="filters">
@@ -240,7 +240,7 @@
                       class="btn btn-link text-danger p-0"
                       (click)="removeFilter(formGroup, filterIndex)"
                     >
-                      <i-bs name="trash"></i-bs><span class="ms-1" i18n>Delete</span>
+                      <pngx-bs-icon name="trash"></pngx-bs-icon><span class="ms-1" i18n>Delete</span>
                     </button>
                   </div>
                 </li>

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts

@@ -15,8 +15,8 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subscription, catchError, map, of, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { DocumentType } from 'src/app/data/document-type'
@@ -496,7 +496,7 @@ const FILTER_HANDLERS: Record<TriggerFilterType, FilterHandler> = {
     NgbAccordionModule,
     NgTemplateOutlet,
     DragDropModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class WorkflowEditDialogComponent