TSK-1510: Update angular-svg-icon from 7.2.1 to 9.2.0

web/package-lock.json

@@ -3559,12 +3559,9 @@
       "dev": true
     },
     "angular-svg-icon": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/angular-svg-icon/-/angular-svg-icon-7.2.1.tgz",
-      "integrity": "sha512-N31QL1IejPqpeMQnuCx92yFLpTZLLsi3ffQ/8HpuP3chevVBbydd5kSmPBYR++awhVUxBB7IOt0VjCJL5TV7xQ==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/angular-svg-icon/-/angular-svg-icon-9.2.0.tgz",
+      "integrity": "sha512-ca7dT27kmJYy8vLcRuM8kOzQhLkS+2WOs1kkNw6MoUSyYtYQe0StKAP634Zl/xICPWcka2QtcQ/zSGT7D/jovw=="
     },
     "angular-tree-component": {
       "version": "8.5.6",

web/package.json

@@ -30,7 +30,7 @@
     "@angular/router": "9.1.12",
     "@ngxs/devtools-plugin": "3.7.1",
     "@ngxs/store": "3.7.1",
-    "angular-svg-icon": "7.2.1",
+    "angular-svg-icon": "9.2.0",
     "angular-tree-component": "8.5.6",
     "bootstrap": "4.6.0",
     "core-js": "3.8.3",

web/src/app/administration/components/access-items-management/access-items-management.component.spec.ts

@@ -4,7 +4,6 @@ import { FormsValidatorService } from '../../../shared/services/forms-validator/
 import { Actions, NgxsModule, ofActionDispatched, Store } from '@ngxs/store';
 import { Component, DebugElement, EventEmitter, Input, Output } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { AngularSvgIconModule } from 'angular-svg-icon';
 import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
 import { NotificationService } from '../../../shared/services/notifications/notification.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -54,6 +53,9 @@ const mockDialogRef = {
   close: jasmine.createSpy('close')
 };
 
+@Component({ selector: 'svg-icon', template: '' })
+class SvgIconStub {}
+
 describe('AccessItemsManagementComponent', () => {
   let fixture: ComponentFixture<AccessItemsManagementComponent>;
   let debugElement: DebugElement;
@@ -80,7 +82,6 @@ describe('AccessItemsManagementComponent', () => {
         NgxsModule.forRoot([EngineConfigurationState, AccessItemsManagementState]),
         FormsModule,
         ReactiveFormsModule,
-        AngularSvgIconModule,
         MatSnackBarModule,
         MatDialogModule,
         TypeaheadModule.forRoot(),
@@ -102,7 +103,8 @@ describe('AccessItemsManagementComponent', () => {
         AccessItemsManagementComponent,
         TypeAheadComponent,
         TaskanaSharedSortStub,
-        TaskanaSharedSpinnerStub
+        TaskanaSharedSpinnerStub,
+        SvgIconStub
       ],
       providers: [
         { provide: FormsValidatorService, useClass: formValidatorServiceSpy },

web/src/app/administration/components/classification-list/classification-list.component.html

@@ -27,7 +27,6 @@
 
           <mat-icon *ngIf="selectedCategory == ''">filter_list</mat-icon>
           <svg-icon class="classification-list__icons" [src]="(getCategoryIcon(selectedCategory) | async)?.left"
-                    [title]="(getCategoryIcon(selectedCategory) | async)?.right"
                     *ngIf="selectedCategory != ''">
           </svg-icon>
         </button>
@@ -38,7 +37,7 @@
           </button>
           <button mat-menu-item *ngFor="let category of categories$ | async" (click)="selectCategory(category)">
             <svg-icon class="classification-list__categories" [src]="(getCategoryIcon(category) | async)?.left"
-                      [title]="(getCategoryIcon(category) | async)?.right"></svg-icon>
+                      matTooltip="{{(getCategoryIcon(category) | async)?.right}}"></svg-icon>
             <span> {{category}} </span>
           </button>
         </mat-menu>

web/src/app/administration/components/classification-list/classification-list.component.spec.ts

@@ -40,6 +40,7 @@ class TreeStub {
 @Component({ selector: 'svg-icon', template: '' })
 class SvgIconStub {
   @Input() src;
+  @Input() matTooltip;
 }
 
 @Component({ selector: 'input', template: '' })

web/src/app/administration/components/tree/tree.component.html

@@ -2,8 +2,12 @@
            (moveNode)="onMoveNode($event)" (treeDrop)="onDrop($event)">
     <ng-template #treeNodeTemplate let-node let-index="index">
         <span class="text-top">
-            <svg-icon *ngIf="node.data.category" class="fa-fw pr-1" [src]="(getCategoryIcon(node.data.category) | async)?.left" data-toggle="tooltip"
-                [title]="(getCategoryIcon(node.data.category) | async)?.right"></svg-icon>
+            <svg-icon
+              *ngIf="node.data.category"
+              class="fa-fw pr-1"
+              [src]="(getCategoryIcon(node.data.category) | async)?.left"
+              matTooltip="{{(getCategoryIcon(node.data.category) | async)?.right}}">
+            </svg-icon>
         </span>
         <span>
             <strong>{{ node.data.key }}</strong>

web/src/app/administration/components/type-icon/icon-type.component.html

@@ -1,3 +1,6 @@
-<svg-icon class="{{selected? 'white': 'gray' }} {{size}}" src="./assets/icons/{{getIconPath(type)}}"
-    [title]="!type? 'All' : type"></svg-icon>
+<svg-icon
+  [svgStyle]="{'width.px': iconSize, 'fill': iconColor, 'position': 'relative', 'top.px': '3' }"
+  src="./assets/icons/{{getIconPath(type)}}"
+  matTooltip="{{tooltip? type : ''}}">
+</svg-icon>
 {{text}}

web/src/app/administration/components/type-icon/icon-type.component.scss

@@ -1,10 +0,0 @@
-.large {
-  height: 24px;
-  width: 24px;
-}
-
-.gray {
-    fill: #555;
-    top: -3px;
-}
-

web/src/app/administration/components/type-icon/icon-type.component.spec.ts

@@ -1,12 +1,13 @@
 import { Component, DebugElement, Input } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IconTypeComponent } from './icon-type.component';
-import { SvgIconComponent, SvgIconRegistryService } from 'angular-svg-icon';
 import { WorkbasketType } from '../../../shared/models/workbasket-type';
 
 @Component({ selector: 'svg-icon', template: '' })
 class SvgIconStub {
   @Input() src;
+  @Input() svgStyle;
+  @Input() matTooltip;
 }
 
 describe('IconTypeComponent', () => {

web/src/app/administration/components/type-icon/icon-type.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { WorkbasketType } from 'app/shared/models/workbasket-type';
 
 @Component({
@@ -6,7 +6,7 @@ import { WorkbasketType } from 'app/shared/models/workbasket-type';
   templateUrl: './icon-type.component.html',
   styleUrls: ['./icon-type.component.scss']
 })
-export class IconTypeComponent {
+export class IconTypeComponent implements OnInit, OnChanges {
   @Input()
   type: WorkbasketType;
 
@@ -22,6 +22,17 @@ export class IconTypeComponent {
   @Input()
   size = 'small';
 
+  iconSize: string;
+  iconColor: string;
+
+  ngOnInit() {
+    this.iconSize = this.size === 'large' ? '24' : '16';
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.iconColor = changes['selected']?.currentValue ? 'white' : '#555';
+  }
+
   getIconPath(type: WorkbasketType) {
     switch (type) {
       case WorkbasketType.PERSONAL:

web/src/app/app.module.ts

@@ -68,7 +68,7 @@ const MODULES = [
   BrowserModule,
   FormsModule,
   AppRoutingModule,
-  AngularSvgIconModule,
+  AngularSvgIconModule.forRoot(),
   HttpClientModule,
   BrowserAnimationsModule,
   ReactiveFormsModule,

web/src/app/shared/components/nav-bar/nav-bar.component.spec.ts

@@ -1,9 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 import { NavBarComponent } from './nav-bar.component';
 import { SelectedRouteService } from '../../services/selected-route/selected-route';
 import { SidenavService } from '../../services/sidenav/sidenav.service';
-import { AngularSvgIconModule } from 'angular-svg-icon';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs/internal/observable/of';
@@ -22,6 +21,9 @@ const SelectedRouteServiceSpy = jest.fn().mockImplementation(
   })
 );
 
+@Component({ selector: 'svg-icon', template: '' })
+class SvgIconStub {}
+
 describe('NavBarComponent', () => {
   let component: NavBarComponent;
   let fixture: ComponentFixture<NavBarComponent>;
@@ -30,8 +32,8 @@ describe('NavBarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [NavBarComponent],
-      imports: [MatIconModule, HttpClientTestingModule, AngularSvgIconModule, MatToolbarModule],
+      declarations: [NavBarComponent, SvgIconStub],
+      imports: [MatIconModule, HttpClientTestingModule, MatToolbarModule],
       providers: [
         { provide: SidenavService, useClass: SidenavServiceSpy },
         { provide: SelectedRouteService, useClass: SelectedRouteServiceSpy }

web/src/app/shared/components/user-information/user-information.component.spec.ts

@@ -1,15 +1,12 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, Input } from '@angular/core';
 import { UserInformationComponent } from './user-information.component';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TaskanaEngineService } from '../../services/taskana-engine/taskana-engine.service';
 import { TaskanaEngineServiceMock } from '../../services/taskana-engine/taskana-engine.mock.service';
 import { of } from 'rxjs/internal/observable/of';
-import { expandDown } from '../../animations/expand.animation';
-import { AngularSvgIconModule } from 'angular-svg-icon';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { fromEventPattern } from 'rxjs';
 
 const TaskanaEngingeServiceSpy = jest.fn().mockImplementation(
   (): Partial<TaskanaEngineServiceMock> => ({
@@ -18,6 +15,9 @@ const TaskanaEngingeServiceSpy = jest.fn().mockImplementation(
   })
 );
 
+@Component({ selector: 'svg-icon', template: '' })
+class SvgIconStub {}
+
 describe('UserInformationComponent', () => {
   let component: UserInformationComponent;
   let fixture: ComponentFixture<UserInformationComponent>;
@@ -25,8 +25,8 @@ describe('UserInformationComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [UserInformationComponent],
-      imports: [BrowserModule, AngularSvgIconModule, HttpClientTestingModule, BrowserAnimationsModule],
+      declarations: [UserInformationComponent, SvgIconStub],
+      imports: [BrowserModule, HttpClientTestingModule, BrowserAnimationsModule],
       providers: [{ provide: TaskanaEngineService, useClass: TaskanaEngingeServiceSpy }]
     }).compileComponents();
   }));