feat(app-switcher): added iconSrc (#DS-4580)

angular.json

@@ -478,6 +478,13 @@
                 "build": {
                     "builder": "@angular-devkit/build-angular:application",
                     "options": {
+                        "assets": [
+                            {
+                                "glob": "**/*",
+                                "input": "packages/components-dev/app-switcher/assets",
+                                "output": "/assets"
+                            }
+                        ],
                         "outputPath": {
                             "base": "dist/components-dev/app-switcher"
                         },

packages/components-dev/app-switcher/module.ts

@@ -9,6 +9,7 @@ import { DevThemeToggle } from '../theme-toggle';
     template: `
         <app-switcher-overview-example />
         <br />
+        <br />
         <app-switcher-sites-example />
     `,
     changeDetection: ChangeDetectionStrategy.OnPush

packages/components-dev/app-switcher/template.html

@@ -1,4 +1,6 @@
 <dev-theme-toggle />
+<br />
+<br />
 
 <dev-examples />
 

packages/components/app-switcher/app-switcher-dropdown-app.ts

@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { KBQ_TITLE_TEXT_REF } from '@koobiq/components/core';
@@ -8,10 +9,20 @@ import { KbqAppSwitcherApp } from './app-switcher';
 /** @docs-private */
 @Component({
     selector: '[kbq-app-switcher-dropdown-app]',
-    imports: [KbqIcon],
+    imports: [KbqIcon, NgOptimizedImage],
     template: `
         <i class="kbq kbq-icon" [className]=""></i>
-        <span class="kbq-app-switcher-dropdown-app__icon" [innerHtml]="getIcon(app.icon)"></span>
+        @if (app.icon) {
+            <span class="kbq-app-switcher-dropdown-app__icon" [innerHtml]="getIcon(app.icon)"></span>
+        } @else if (app.iconSrc) {
+            <img
+                alt="{{ app.type }}"
+                width="24"
+                height="24"
+                class="kbq-app-switcher-dropdown-app__icon"
+                [ngSrc]="app.iconSrc"
+            />
+        }
 
         <div class="kbq-app-switcher-dropdown-app__container">
             <div class="kbq-app-switcher-dropdown-app__name">

packages/components/app-switcher/app-switcher.ts

@@ -60,7 +60,8 @@ export interface KbqAppSwitcherApp {
     name: string;
     id: string | number;
     type?: string | number;
-    icon: string;
+    icon?: string;
+    iconSrc?: string;
     caption?: string;
     aliases?: KbqAppSwitcherApp[];
     link?: string;
@@ -71,6 +72,7 @@ export interface KbqAppSwitcherSite {
     id: string | number;
     status?: string;
     icon?: string;
+    iconSrc?: string;
     apps: KbqAppSwitcherApp[];
 }
 
@@ -92,6 +94,7 @@ export function defaultGroupBy(
                 name: appType,
                 aliases: [app],
                 icon: app.icon,
+                iconSrc: app.iconSrc,
                 id: ''
             };
         }

packages/components/app-switcher/kbq-app-switcher-list-item.ts

@@ -1,18 +1,30 @@
+import { NgOptimizedImage } from '@angular/common';
 import { booleanAttribute, ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { KBQ_TITLE_TEXT_REF } from '@koobiq/components/core';
 import { KbqDropdownItem } from '@koobiq/components/dropdown';
-import { KbqIcon } from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqAppSwitcherApp } from './app-switcher';
 
 /** @docs-private */
 @Component({
     selector: '[kbq-app-switcher-list-item]',
     imports: [
-        KbqIcon
+        KbqIconModule,
+        NgOptimizedImage
     ],
     template: `
-        <span class="kbq-app-switcher-list-item__icon" [innerHtml]="getIcon(app.icon)"></span>
+        @if (app.icon) {
+            <span class="kbq-app-switcher-list-item__icon" [innerHtml]="getIcon(app.icon)"></span>
+        } @else if (app.iconSrc) {
+            <img
+                alt="{{ app.type }}"
+                class="kbq-app-switcher-list-item__icon"
+                width="24"
+                height="24"
+                [ngSrc]="app.iconSrc"
+            />
+        }
 
         <div class="kbq-app-switcher-list-item__container">
             <div class="kbq-app-switcher-list-item__name">{{ app.name }}</div>

packages/docs-examples/components/app-switcher/app-switcher-overview/app-switcher-overview-example.ts

@@ -44,18 +44,18 @@ export class AppSwitcherOverviewExample {
                     name: 'Byte Sentinel',
                     caption: 'Byte 001',
                     id: 'SZFO_01',
-                    icon: this.SVGIcon
+                    iconSrc: 'assets/icon.svg'
                 },
                 {
                     name: 'CryptoWall',
                     id: 'SZFO_02',
-                    icon: this.SVGIcon
+                    iconSrc: 'assets/icon.svg'
                 },
                 {
                     name: 'App Instance 1',
                     caption: 'Instance Alias One',
                     id: 'SZFO_03',
-                    icon: this.SVGIcon
+                    iconSrc: 'assets/icon.svg'
                 },
                 {
                     name: 'App Instance 2',

packages/docs-examples/components/app-switcher/app-switcher-sites/app-switcher-sites-example.ts

@@ -45,7 +45,7 @@ export class AppSwitcherSitesExample {
                     caption: 'Byte 001',
                     id: 'SZFO_01',
                     type: 'NAD',
-                    icon: this.SVGIcon
+                    iconSrc: 'assets/icon.svg'
                 },
                 {
                     name: 'CryptoWall',
@@ -110,7 +110,7 @@ export class AppSwitcherSitesExample {
                     caption: 'Byte 001',
                     id: 'UFO_01',
                     type: 'SIEM',
-                    icon: this.SVGIcon
+                    iconSrc: 'assets/icon.svg'
                 },
                 {
                     name: 'CryptoWall',