feat(gui): add GUI_ICONS_CONFIG injection token

acrodata · Aug 3, 2024 · 8db2520 · 8db2520
1 parent c7e5f85
commit 8db2520
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 16 deletions.
diff --git a/projects/gui/file-uploader/file-uploader.ts b/projects/gui/file-uploader/file-uploader.ts
@@ -21,14 +21,13 @@ import {
 } from '@angular/forms';
 import { MatIconButton } from '@angular/material/button';
 import { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';
-import { MatIcon, MatIconRegistry } from '@angular/material/icon';
+import { MatIcon } from '@angular/material/icon';
 import { MatInput } from '@angular/material/input';
-import { DomSanitizer } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { catchError, finalize } from 'rxjs/operators';
 
 import { GuiFieldLabel } from '../field-label/field-label';
-import { svgIcons } from '../gui-icons';
+import { GuiIconsRegistry } from '../gui-icons';
 import { GuiControl } from '../interface';
 import { GuiFileUploaderConfig } from './file-uploader-config';
 
@@ -93,12 +92,9 @@ export class GuiFileUploader implements ControlValueAccessor, OnChanges {
   constructor(
     private fileUploaderCfg: GuiFileUploaderConfig,
     private cdr: ChangeDetectorRef,
-    iconRegistry: MatIconRegistry,
-    sanitizer: DomSanitizer
+    iconsRegistry: GuiIconsRegistry
   ) {
-    ['link', 'clear', 'file', 'file_upload'].forEach(k => {
-      iconRegistry.addSvgIconLiteral(k, sanitizer.bypassSecurityTrustHtml(svgIcons[k]));
-    });
+    iconsRegistry.add('link', 'clear', 'file', 'file_upload');
   }
 
   ngOnChanges(changes: SimpleChanges): void {

diff --git a/projects/gui/gui-form.ts b/projects/gui/gui-form.ts
@@ -18,9 +18,8 @@ import {
   MatExpansionPanelContent,
   MatExpansionPanelHeader,
 } from '@angular/material/expansion';
-import { MatIcon, MatIconRegistry } from '@angular/material/icon';
+import { MatIcon } from '@angular/material/icon';
 import { MatTab, MatTabContent, MatTabGroup, MatTabLabel } from '@angular/material/tabs';
-import { DomSanitizer } from '@angular/platform-browser';
 import { Subscription, mergeWith, of } from 'rxjs';
 
 import { GuiButtonToggle } from './button-toggle/button-toggle';
@@ -39,7 +38,7 @@ import { GuiSlider } from './slider/slider';
 import { GuiSwitch } from './switch/switch';
 import { GuiTextarea } from './textarea/textarea';
 
-import { svgIcons } from './gui-icons';
+import { GuiIconsRegistry } from './gui-icons';
 
 let nextUniqueId = 0;
 
@@ -113,10 +112,8 @@ export class GuiForm implements OnChanges, OnInit, OnDestroy {
   // Unique id for this form
   uid = `gui-form-${nextUniqueId++}`;
 
-  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
-    ['horizontal', 'vertical', 'copy', 'add', 'delete'].forEach(k => {
-      iconRegistry.addSvgIconLiteral(k, sanitizer.bypassSecurityTrustHtml(svgIcons[k]));
-    });
+  constructor(iconsRegistry: GuiIconsRegistry) {
+    iconsRegistry.add('horizontal', 'vertical', 'copy', 'add', 'delete');
   }
 
   ngOnChanges(changes: SimpleChanges): void {

diff --git a/projects/gui/gui-icons.ts b/projects/gui/gui-icons.ts
@@ -1,4 +1,8 @@
-export const svgIcons: { [key: string]: string } = {
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+export const svgIcons = {
   horizontal: `
   <svg viewBox="0 0 24 24">
     <path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"></path>
@@ -45,3 +49,28 @@ export const svgIcons: { [key: string]: string } = {
   </svg>
   `,
 };
+
+export type GuiIconType = keyof typeof svgIcons;
+
+export type GuiIconsType = {
+  [k in GuiIconType]: string;
+};
+
+/** Injection token that can be used to provide the default icons. */
+export const GUI_ICONS_CONFIG = new InjectionToken<GuiIconsType>('GUI_ICONS_CONFIG');
+
+@Injectable({ providedIn: 'root' })
+export class GuiIconsRegistry {
+  constructor(
+    private _iconRegistry: MatIconRegistry,
+    private _sanitizer: DomSanitizer,
+    @Optional() @Inject(GUI_ICONS_CONFIG) private _defaultIcons?: GuiIconsType
+  ) {}
+
+  add(...iconNames: GuiIconType[]) {
+    const icons = Object.assign(svgIcons, this._defaultIcons);
+    iconNames.forEach(k => {
+      this._iconRegistry.addSvgIconLiteral(k, this._sanitizer.bypassSecurityTrustHtml(icons[k]));
+    });
+  }
+}
diff --git a/projects/gui/public-api.ts b/projects/gui/public-api.ts
@@ -20,4 +20,5 @@ export * from './slider/slider';
 export * from './switch/switch';
 export * from './textarea/textarea';
 export * from './gui-utils';
+export * from './gui-icons';
 export * from './interface';