#2748 Icons Kundentrefferliste und Details

apps/isa-app/src/app/app.module.ts

@@ -32,6 +32,7 @@ import { IsaErrorHandler } from './providers/isa.error-handler';
 import { ScanAdapterModule } from '@adapter/scan';
 import { RootStateService } from './store/root-state.service';
 import * as Commands from './commands';
+import { UiIconModule } from '@ui/icon';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
@@ -86,6 +87,12 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
     }),
     ScanAdapterModule.forRoot(!environment.production),
     PlatformModule,
+    UiIconModule.forRoot({
+      aliases: [
+        { alias: 'd-account', name: 'account' },
+        { alias: 'd-no-account', name: 'package-variant-closed' },
+      ],
+    }),
   ],
   providers: [
     {

apps/page/customer/src/lib/customer-details/customer-details.component.html

@@ -19,7 +19,7 @@
     <p class="info">Sind Ihre {{ (customerType$ | async) === 'b2b' ? 'Firmendaten' : 'Kundendaten' }} korrekt?</p>
     <div class="tags">
       <div class="tag" *ngFor="let feature of displayCustomerType$ | async">
-        <ui-icon icon="check" size="15px"></ui-icon>
+        <ui-svg-icon [icon]="feature.key"></ui-svg-icon>
         {{ feature.description }}
       </div>
     </div>

apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.html

@@ -32,7 +32,7 @@
   <ng-container>
     <ng-container *ngFor="let feature of customer?.features">
       <div class="feature" *ngIf="feature.group === 'd-customertype'">
-        <ui-icon icon="check" size="15px"></ui-icon>
+        <ui-svg-icon [icon]="feature.key"></ui-svg-icon>
         <span>{{ feature.description }}</span>
       </div>
     </ng-container>

apps/ui/icon/src/lib/defs/icon-alias.ts

@@ -0,0 +1,4 @@
+export interface IconAlias {
+  alias: string;
+  name: string;
+}

apps/ui/icon/src/lib/defs/index.ts

@@ -0,0 +1,2 @@
+export * from './icon-alias';
+export * from './svg-icon';

apps/ui/icon/src/lib/defs/svg-icon.ts

@@ -0,0 +1,4 @@
+export interface SvgIcon {
+  name: string;
+  data: string;
+}

apps/ui/icon/src/lib/icon-badge/index.ts

@@ -0,0 +1 @@
+export * from './icon-badge.component';

apps/ui/icon/src/lib/icon-config.ts

@@ -0,0 +1,7 @@
+import { IconAlias, SvgIcon } from './defs';
+
+export interface UiIconConfig {
+  fallback?: string;
+  icons?: SvgIcon[];
+  aliases?: IconAlias[];
+}

apps/ui/icon/src/lib/icon-registry.ts

@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { SvgIcon } from './defs';
+import { IconAlias } from './defs/icon-alias';
+
+@Injectable()
+export class IconRegistry {
+  private _icons = new Map<string, SvgIcon>();
+  private _aliases = new Map<string, string>();
+  private _fallback: string;
+
+  register(...icons: SvgIcon[]): IconRegistry {
+    icons?.forEach((icon) => {
+      this._icons.set(icon.name, icon);
+    });
+
+    return this;
+  }
+
+  alias(...aliases: IconAlias[]): IconRegistry {
+    aliases?.forEach((alias) => {
+      this._aliases.set(alias.alias, alias.name);
+    });
+
+    return this;
+  }
+
+  setFallback(name: string): void {
+    this._fallback = name;
+  }
+
+  get(name: string): SvgIcon | undefined {
+    const alias = this._aliases.get(name);
+    let iconName = name;
+    if (alias) {
+      iconName = alias;
+    }
+
+    let icon = this._icons.get(iconName);
+
+    if (!icon) {
+      if (alias) {
+        console.warn(`Not found: Icon with name ${name} (${iconName})`);
+      } else {
+        console.warn(`Unable to find icon: '${name}'`);
+      }
+    }
+
+    if (!icon && this._fallback) {
+      icon = this._icons.get(this._fallback);
+    }
+
+    return icon;
+  }
+}

apps/ui/icon/src/lib/index.ts

@@ -1,5 +1,8 @@
-// start:ng42.barrel
+export * from './defs';
+export * from './icon-badge';
+export * from './icon-config';
+export * from './icon-registry';
 export * from './icon.component';
-export * from './ui-icon.module';
+export * from './svg-icon.component';
 export * from './tokens';
-// end:ng42.barrel
+export * from './ui-icon.module';

apps/ui/icon/src/lib/svg-icon.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { IconRegistry } from './icon-registry';
+
+@Component({
+  selector: 'ui-svg-icon',
+  template: `
+    <svg [style.widht.px]="size" [style.height.px]="size" viewBox="0 0 24 24">
+      <path fill="currentColor" [attr.d]="data" />
+    </svg>
+  `,
+})
+export class UISvgIconComponent implements OnChanges {
+  @Input()
+  icon: string;
+
+  data: string;
+
+  @Input()
+  size: number = 24;
+
+  constructor(private readonly _iconRegistry: IconRegistry, private readonly _cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.icon) {
+      this.data = this._iconRegistry.get(this.icon)?.data;
+      this._cdr.markForCheck();
+    }
+  }
+}

apps/ui/icon/src/lib/tokens.ts

@@ -3,3 +3,5 @@ import { InjectionToken } from '@angular/core';
 export const UI_ICON_HREF = new InjectionToken<string>('UI_ICON_HREF');
 
 export const UI_ICON_VIEW_BOX = new InjectionToken<string>('UI_ICON_VIEW_BOX');
+
+export const UI_ICON_CFG = new InjectionToken('UiIconConfig');

apps/ui/icon/src/lib/ui-icon.module.ts

@@ -1,11 +1,54 @@
-import { NgModule } from '@angular/core';
+import { Inject, ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UiIconComponent } from './icon.component';
 import { UiIconBadgeComponent } from './icon-badge/icon-badge.component';
+import { UISvgIconComponent } from './svg-icon.component';
+import { IconRegistry } from './icon-registry';
+import { UI_ICON_CFG } from './tokens';
+import { UiIconConfig } from './icon-config';
+import * as allIcons from '@mdi/js';
+import { kebabCase } from 'lodash';
+
+export function _rootIconRegistryFactory(config: UiIconConfig): IconRegistry {
+  const registry = new IconRegistry();
+
+  if (config?.fallback) {
+    registry.setFallback(config.fallback);
+  }
+  if (config?.aliases) {
+    registry.alias(...config.aliases);
+  }
+  if (config?.icons) {
+    registry.register(...config.icons);
+  }
+
+  return registry;
+}
+
+const DEFAULT_ICON_CONFIG: UiIconConfig = {
+  icons: Object.keys(allIcons).map((name) => ({ name: kebabCase(name.substring(3)), data: allIcons[name] })),
+};
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [UiIconComponent, UiIconBadgeComponent],
-  exports: [UiIconComponent, UiIconBadgeComponent],
+  declarations: [UiIconComponent, UiIconBadgeComponent, UISvgIconComponent],
+  exports: [UiIconComponent, UiIconBadgeComponent, UISvgIconComponent],
 })
-export class UiIconModule {}
+export class UiIconModule {
+  static forRoot(config: UiIconConfig = {}): ModuleWithProviders<UiIconModule> {
+    return {
+      ngModule: UiIconModule,
+      providers: [
+        {
+          provide: UI_ICON_CFG,
+          useValue: { ...DEFAULT_ICON_CONFIG, ...config },
+        },
+        {
+          provide: IconRegistry,
+          useFactory: _rootIconRegistryFactory,
+          deps: [UI_ICON_CFG],
+        },
+      ],
+    };
+  }
+}

package-lock.json

@@ -2331,6 +2331,11 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "@mdi/js": {
+      "version": "7.0.96",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.0.96.tgz",
+      "integrity": "sha512-lNqhkV3cpPfYb/Avh+vXLFukUTbHbyHoFo4Jdc7Oc9UvURGVhamFIpgOVvEf2bNA78zvjXTZeVWExUTR+DLBfQ=="
+    },
     "@microsoft/signalr": {
       "version": "5.0.17",
       "resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-5.0.17.tgz",

package.json

@@ -52,6 +52,7 @@
     "@angular/platform-browser-dynamic": "~12.2.14",
     "@angular/router": "~12.2.14",
     "@angular/service-worker": "~12.2.14",
+    "@mdi/js": "^7.0.96",
     "@microsoft/signalr": "~5.0.10",
     "@ngneat/tailwind": "^7.0.3",
     "@ngrx/component-store": "^12.5.1",