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

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -14,7 +14,7 @@
               <div class="d-flex justify-content-between align-items-center">
                 <div class="d-flex">
                   <div class="ms-n2 me-1">
-                    <i-bs name="grip-vertical"></i-bs>
+                    <pngx-bs-icon name="grip-vertical"></pngx-bs-icon>
                   </div>
                   <h6 class="card-title mb-0"></h6>
                 </div>
@@ -37,7 +37,7 @@
             <div class="card shadow-sm bg-light opacity-50">
               <div class="card-body">
                 <div class="text-center">
-                  <p class="mb-0 fst-italic"><i-bs name="info-circle" class="me-2"></i-bs><ng-container i18n>Hint: saved views can be created from the <a routerLink="/documents">documents list</a></ng-container></p>
+                  <p class="mb-0 fst-italic"><pngx-bs-icon name="info-circle" class="me-2"></pngx-bs-icon><ng-container i18n>Hint: saved views can be created from the <a routerLink="/documents">documents list</a></ng-container></p>
                 </div>
               </div>
             </div>

src-ui/src/app/components/dashboard/dashboard.component.spec.ts

@@ -5,7 +5,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
-import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
   provideUiTour,
   TourNgBootstrap,
@@ -81,7 +80,6 @@ describe('DashboardComponent', () => {
         RouterTestingModule,
         TourNgBootstrap,
         DragDropModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         DashboardComponent,
         StatisticsWidgetComponent,
         PageHeaderComponent,

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -7,8 +7,8 @@ import {
 } from '@angular/cdk/drag-drop'
 import { Component, inject, signal } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourNgBootstrap, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { SavedView } from 'src/app/data/saved-view'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
@@ -35,7 +35,7 @@ import { WelcomeWidgetComponent } from './widgets/welcome-widget/welcome-widget.
     IfPermissionsDirective,
     DragDropModule,
     TourNgBootstrap,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     RouterModule,
   ],
 })

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -108,7 +108,7 @@
                       @if (doc.notes.length) {
                         <a routerLink="/documents/{{doc.id}}/notes" class="btn btn-sm p-0">
                           <span class="badge rounded-pill bg-light border text-primary">
-                            <i-bs width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></i-bs>
+                            <pngx-bs-icon width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></pngx-bs-icon>
                           {{doc.notes.length}}</span>
                         </a>
                       }
@@ -120,10 +120,10 @@
                   @if (j === displayFields().length - 1) {
                     <div class="btn-group position-absolute top-50 end-0 translate-middle-y" (mouseleave)="popupPreview.close()">
                       <pngx-preview-popup [document]="doc" linkClasses="btn px-4 btn-dark border-dark-subtle" #popupPreview>
-                        <i-bs width="0.8em" height="0.8em" name="eye"></i-bs>
+                        <pngx-bs-icon width="0.8em" height="0.8em" name="eye"></pngx-bs-icon>
                       </pngx-preview-popup>
                       <a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
-                        <i-bs width="0.8em" height="0.8em" name="download"></i-bs>
+                        <pngx-bs-icon width="0.8em" height="0.8em" name="download"></pngx-bs-icon>
                       </a>
                     </div>
                   }

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts

@@ -11,7 +11,6 @@ import { By } from '@angular/platform-browser'
 import { Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject, of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import { CustomFieldDisplayComponent } from 'src/app/components/common/custom-field-display/custom-field-display.component'
@@ -121,7 +120,6 @@ describe('SavedViewWidgetComponent', () => {
         NgbModule,
         RouterTestingModule.withRoutes(routes),
         DragDropModule,
-        NgxBootstrapIconsModule.pick(allIcons),
         SavedViewWidgetComponent,
         WidgetFrameComponent,
         IfPermissionsDirective,

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -11,8 +11,8 @@ import {
 } from '@angular/core'
 import { Router, RouterModule } from '@angular/router'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, takeUntil } from 'rxjs'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { CustomFieldDisplayComponent } from 'src/app/components/common/custom-field-display/custom-field-display.component'
 import { PreviewPopupComponent } from 'src/app/components/common/preview-popup/preview-popup.component'
 import { TagComponent } from 'src/app/components/common/tag/tag.component'
@@ -80,7 +80,7 @@ import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
     NgClass,
     NgStyle,
     RouterModule,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
   ],
 })
 export class SavedViewWidgetComponent

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -2,7 +2,7 @@
   <div content tourAnchor="tour.upload-widget">
     <form class="justify-content-center d-flex flex-column align-items-center">
       <button type="button" class="btn btn-outline-dark bg-light shadow-sm w-100 h-100 pt-3 pb-3" (click)="fileUpload.click()">
-        <i-bs class="text-primary me-1" name="plus-circle"></i-bs>
+        <pngx-bs-icon class="text-primary me-1" name="plus-circle"></pngx-bs-icon>
         <span class="text-primary" i18n>Upload documents</span>
         <div class="text-muted smaller fst-italic" i18n>or drop files anywhere</div>
       </button>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss

@@ -1,4 +1,4 @@
-:host ::ng-deep i-bs svg {
+:host ::ng-deep pngx-bs-icon svg {
   margin-top: -3px;
 }
 

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts

@@ -3,7 +3,6 @@ import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { routes } from 'src/app/app-routing.module'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
@@ -20,7 +19,6 @@ describe('UploadFileWidgetComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule.withRoutes(routes),
-        NgxBootstrapIconsModule.pick(allIcons),
         UploadFileWidgetComponent,
       ],
       providers: [

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject } from '@angular/core'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
@@ -13,7 +13,7 @@ import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
   imports: [
     WidgetFrameComponent,
     IfPermissionsDirective,
-    NgxBootstrapIconsModule,
+    BootstrapIconComponent,
     TourNgBootstrap,
   ],
 })

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -5,12 +5,12 @@
         <div class="d-flex align-items-center">
           @if (draggable()) {
             <div class="ms-n2 me-1" cdkDragHandle>
-              <i-bs name="grip-vertical"></i-bs>
+              <pngx-bs-icon name="grip-vertical"></pngx-bs-icon>
             </div>
           }
           <h6 class="card-title mb-0">
             @if (titleIcon()) {
-              <i-bs class="me-2" [name]="titleIcon()"></i-bs>
+              <pngx-bs-icon class="me-2" [name]="titleIcon()"></pngx-bs-icon>
             }
             {{title()}}
           </h6>

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss

@@ -1,4 +1,4 @@
-i-bs {
+pngx-bs-icon {
     cursor: move;
 }
 

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -1,13 +1,13 @@
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { NgTemplateOutlet } from '@angular/common'
 import { AfterViewInit, Component, input, signal } from '@angular/core'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 
 @Component({
   selector: 'pngx-widget-frame',
   templateUrl: './widget-frame.component.html',
   styleUrls: ['./widget-frame.component.scss'],
-  imports: [DragDropModule, NgxBootstrapIconsModule, NgTemplateOutlet],
+  imports: [DragDropModule, BootstrapIconComponent, NgTemplateOutlet],
 })
 export class WidgetFrameComponent implements AfterViewInit {
   readonly show = signal(false)