diff --git a/apps/dfx-bootstrap-icons-demo/src/app/app.config.ts b/apps/dfx-bootstrap-icons-demo/src/app/app.config.ts index d030c271..77d85849 100644 --- a/apps/dfx-bootstrap-icons-demo/src/app/app.config.ts +++ b/apps/dfx-bootstrap-icons-demo/src/app/app.config.ts @@ -1,15 +1,15 @@ import { ApplicationConfig } from '@angular/core'; import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router'; import { appRoutes } from './app.routes'; -import { allIcons, biCacheInterceptor, provideBi, withHeight, withIcons, withWidth } from 'dfx-bootstrap-icons'; +import { allIcons, provideBi, withHeight, withIcons, withWidth } from 'dfx-bootstrap-icons'; import { provideDfxHelper, withWindow } from 'dfx-helper'; -import { provideHttpClient, withInterceptors } from '@angular/common/http'; +import { provideHttpClient } from '@angular/common/http'; export const appConfig: ApplicationConfig = { providers: [ provideRouter(appRoutes, withEnabledBlockingInitialNavigation()), provideDfxHelper(withWindow()), - provideHttpClient(withInterceptors([biCacheInterceptor])), + provideHttpClient(), provideBi(withIcons(allIcons), withWidth('32'), withHeight('48')), ], }; diff --git a/apps/dfx-bootstrap-icons-demo/src/app/load-icon.component.ts b/apps/dfx-bootstrap-icons-demo/src/app/load-icon.component.ts index 23a9e835..9536bbe6 100644 --- a/apps/dfx-bootstrap-icons-demo/src/app/load-icon.component.ts +++ b/apps/dfx-bootstrap-icons-demo/src/app/load-icon.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; -import { BiComponent, provideBi, withCDN } from 'dfx-bootstrap-icons'; +import { BiComponent, provideBi, withCDN, withIcons } from 'dfx-bootstrap-icons'; @Component({ template: ` @@ -12,7 +12,7 @@ import { BiComponent, provideBi, withCDN } from 'dfx-bootstrap-icons'; `, standalone: true, imports: [BiComponent], - providers: [provideBi(withCDN('https://playground.dafnik.me/bootstrap-icons/icons'))], + providers: [provideBi(withIcons({}), withCDN('https://playground.dafnik.me/bootstrap-icons/icons'))], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-load-icon', }) diff --git a/libs/dfx-bootstrap-icons/src/lib/icon.component.spec.ts b/libs/dfx-bootstrap-icons/src/lib/icon.component.spec.ts index eb5a8bf4..efb0b5a0 100644 --- a/libs/dfx-bootstrap-icons/src/lib/icon.component.spec.ts +++ b/libs/dfx-bootstrap-icons/src/lib/icon.component.spec.ts @@ -22,14 +22,14 @@ describe('SVG Icons', () => { nativeElement = fixture.nativeElement as HTMLElement; }); - // for (const name of BiNameList) { - // it(`load right svg for ${name} icon`, () => { - // component.name = name; - // fixture.detectChanges(); - // // @ts-ignore - // expect(nativeElement.querySelector('svg')?.outerHTML).toBe(allIcons[toEscapedName(name)]); - // }); - // } + for (const name of BiNameList) { + it(`load right svg for ${name} icon`, () => { + component.name = name; + fixture.detectChanges(); + // @ts-ignore + expect(nativeElement.querySelector('svg')?.outerHTML).toBe(allIcons[toEscapedName(name)]); + }); + } it(`load right svg changes`, () => { component.name = 'x-circle-fill'; diff --git a/libs/dfx-bootstrap-icons/src/lib/icon.component.ts b/libs/dfx-bootstrap-icons/src/lib/icon.component.ts index 95984319..af925a56 100644 --- a/libs/dfx-bootstrap-icons/src/lib/icon.component.ts +++ b/libs/dfx-bootstrap-icons/src/lib/icon.component.ts @@ -1,18 +1,10 @@ -import { - booleanAttribute, - ChangeDetectionStrategy, - Component, - ElementRef, - inject, - Input, - OnChanges, - Renderer2, -} from '@angular/core'; +import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, inject, Input, OnChanges, Renderer2 } from '@angular/core'; import { BiName, BiNamesEnum } from './generated'; -import { DEFAULT_COLOR, DEFAULT_ICON_SIZE, ICON_COLOR, ICON_HEIGHT, ICON_WIDTH, ICONS_LOADER } from './icons.config'; -import { ColorValueHex } from './types'; -import { distinctUntilChanged, take } from "rxjs"; +import { DEFAULT_COLOR, DEFAULT_ICON_SIZE, ICON_COLOR, ICON_HEIGHT, ICON_WIDTH, ICONS_LOADER, ICONS_PICKED } from './icons.config'; +import { ColorValueHex, IconsType } from './types'; +import { take } from 'rxjs'; +import { toEscapedName } from './internal/toEscapedName'; @Component({ selector: 'bi, *[bi]', @@ -20,54 +12,93 @@ import { distinctUntilChanged, take } from "rxjs"; changeDetection: ChangeDetectionStrategy.OnPush, template: '', }) -export class BiComponent implements OnChanges { - @Input({ required: true }) name!: BiName | BiNamesEnum; +export class BiComponent { + @Input({ required: true }) set name(it: BiName | BiNamesEnum) { + this._name = it; + this.setIcon(); + } + _name!: BiName | BiNamesEnum; - @Input() width: string = inject(ICON_WIDTH); + @Input() set width(it: string) { + this._width = it; + this.setIcon(); + } + _width: string = inject(ICON_WIDTH); - @Input() height: string = inject(ICON_HEIGHT); + @Input() set height(it: string) { + this._height = it; + this.setIcon(); + } + _height: string = inject(ICON_HEIGHT); - @Input() size?: string; + @Input() set size(it: string) { + this._size = it; + this.setIcon(); + } + _size?: string; - @Input() color?: ColorValueHex = inject(ICON_COLOR); + @Input() set color(it: ColorValueHex) { + this._color = it; + this.setIcon(); + } + _color?: ColorValueHex = inject(ICON_COLOR); - @Input({ transform: booleanAttribute }) clearDimensions = false; + @Input({ transform: booleanAttribute }) set clearDimensions(it: boolean) { + this._clearDimensions = it; + this.setIcon(); + } + _clearDimensions = false; - @Input() ariaLabel?: string; + @Input() set ariaLabel(it: string) { + this._ariaLabel = it; + this.setIcon(); + } + _ariaLabel?: string; private elementRef = inject(ElementRef); private renderer = inject(Renderer2); - private iconsLoader = inject(ICONS_LOADER); + iconsLoader = inject(ICONS_LOADER); - ngOnChanges(): void { - this.renderIcon(); + pickedIcons = Object.assign({}, ...(inject(ICONS_PICKED) as unknown as object[])) as IconsType | undefined; + + setIcon(): void { + let svg = undefined; + if (this.pickedIcons) { + svg = this.pickedIcons[toEscapedName(this._name)] || undefined; + } + if (!svg && this.iconsLoader) { + this.iconsLoader(this._name) + .pipe(take(1)) + .subscribe((it) => this.renderIcon(it)); + return; + } + + this.renderIcon(svg); } - renderIcon(): void { - this.iconsLoader(this.name).pipe(take(1), distinctUntilChanged()).subscribe((svg) => { - if (!svg) { - console.warn(`BiComponent: Icon ${this.name} not found`); - return; - } - - if (!this.clearDimensions) { - svg = setSize(svg, 'width', this.size ?? this.width); - svg = setSize(svg, 'height', this.size ?? this.height); - } - - if (this.color) { - svg = setFillColor(svg, this.color); - } - - this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-label', this.ariaLabel ?? ''); - if (this.ariaLabel) { - this.renderer.setAttribute(this.elementRef.nativeElement, 'role', 'img'); - } - - this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', svg); - }); + private renderIcon(icon?: string) { + if (!icon) { + console.warn(`BiComponent: Icon ${this._name} not found`); + return; + } + + if (!this._clearDimensions) { + icon = setSize(icon, 'width', this.size ?? this._width); + icon = setSize(icon, 'height', this.size ?? this._height); + } + + if (this._color) { + icon = setFillColor(icon, this._color); + } + + this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-label', this._ariaLabel ?? ''); + if (this._ariaLabel) { + this.renderer.setAttribute(this.elementRef.nativeElement, 'role', 'img'); + } + + this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', icon); } } diff --git a/libs/dfx-bootstrap-icons/src/lib/icons-cache.interceptor.ts b/libs/dfx-bootstrap-icons/src/lib/icons-cache.interceptor.ts index b832e7d9..37790bba 100644 --- a/libs/dfx-bootstrap-icons/src/lib/icons-cache.interceptor.ts +++ b/libs/dfx-bootstrap-icons/src/lib/icons-cache.interceptor.ts @@ -1,11 +1,5 @@ -import { - HttpContextToken, - HttpEvent, - HttpHandlerFn, - HttpRequest, - HttpResponse -} from "@angular/common/http"; -import { Observable, of, share, tap } from "rxjs"; +import { HttpContextToken, HttpEvent, HttpHandlerFn, HttpRequest, HttpResponse } from '@angular/common/http'; +import { Observable, of, share, tap } from 'rxjs'; export const ICON_CACHE_INTERCEPTOR = new HttpContextToken(() => false); @@ -14,27 +8,27 @@ const DEBUG = false; const cache: Map>> = new Map(); export function biCacheInterceptor(req: HttpRequest, next: HttpHandlerFn): Observable> { - if (DEBUG) console.warn('cache interceptor run') - if (req.method !== "GET" || !req.context.get(ICON_CACHE_INTERCEPTOR)) { + if (DEBUG) console.warn('cache interceptor run'); + if (req.method !== 'GET' || !req.context.get(ICON_CACHE_INTERCEPTOR)) { return next(req); } const url = req.url; const cachedResponse = cache.get(url); - if (DEBUG) console.log(`reading cache of ${url}`, cachedResponse) + if (DEBUG) console.log(`reading cache of ${url}`, cachedResponse); if (cachedResponse) { return cachedResponse; } else { - if (DEBUG) console.log(`trying new request ${url}`) + if (DEBUG) console.log(`trying new request ${url}`); const newRequest = next(req).pipe( - tap(stateEvent => { + tap((stateEvent) => { if (stateEvent instanceof HttpResponse) { - if (DEBUG) console.log(`setting response to cache ${url}`) + if (DEBUG) console.log(`setting response to cache ${url}`); cache.set(url, of(stateEvent.clone()).pipe(share())); } }), - share() + share(), ); - if (DEBUG) console.log(`setting new request ${url} to cache`) + if (DEBUG) console.log(`setting new request ${url} to cache`); cache.set(url, newRequest); return newRequest; diff --git a/libs/dfx-bootstrap-icons/src/lib/icons.config.ts b/libs/dfx-bootstrap-icons/src/lib/icons.config.ts index 00d2671e..f1c94a85 100644 --- a/libs/dfx-bootstrap-icons/src/lib/icons.config.ts +++ b/libs/dfx-bootstrap-icons/src/lib/icons.config.ts @@ -1,13 +1,16 @@ import { InjectionToken } from '@angular/core'; import { ColorValueHex, IconsType } from './types'; -import { Observable } from 'rxjs'; +import { Observable, of } from 'rxjs'; +import { factory } from '@schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript'; export const ICONS_PICKED = new InjectionToken('DFX_ICONS_PICKED', { factory: () => ({}), }); -export const ICONS_LOADER = new InjectionToken<(name: string) => Observable>('DFX_ICONS_LOADER'); +export const ICONS_LOADER = new InjectionToken<((name: string) => Observable) | undefined>('DFX_ICONS_LOADER', { + factory: () => undefined, +}); export const DEFAULT_ICON_SIZE = '16'; export const DEFAULT_COLOR = 'currentColor'; diff --git a/libs/dfx-bootstrap-icons/src/lib/icons.feature.ts b/libs/dfx-bootstrap-icons/src/lib/icons.feature.ts index 71d383ac..34fa5e49 100644 --- a/libs/dfx-bootstrap-icons/src/lib/icons.feature.ts +++ b/libs/dfx-bootstrap-icons/src/lib/icons.feature.ts @@ -1,4 +1,4 @@ -import { Provider } from "@angular/core"; +import { Provider } from '@angular/core'; export enum IconFeatureKind { ICON_PICK, diff --git a/libs/dfx-bootstrap-icons/src/lib/icons.provider.spec.ts b/libs/dfx-bootstrap-icons/src/lib/icons.provider.spec.ts index 502ee340..870e045b 100644 --- a/libs/dfx-bootstrap-icons/src/lib/icons.provider.spec.ts +++ b/libs/dfx-bootstrap-icons/src/lib/icons.provider.spec.ts @@ -1,11 +1,12 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion,@typescript-eslint/ban-ts-comment */ +// noinspection DuplicatedCode,ES6PreferShortImport import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BiComponent } from './icon.component'; import { provideBi, provideIcons, withColor, withHeight, withIcons, withWidth } from './icons.provider'; import { allIcons, xCircleFill, zeroCircle } from './generated'; import { IconFeatures } from './icons.feature'; -import { DEFAULT_ICON_SIZE, ICONS_PICKED } from "./icons.config"; +import { DEFAULT_ICON_SIZE, ICONS_PICKED } from './icons.config'; import { toEscapedName } from './internal/toEscapedName'; describe('IconFeatures ', () => { @@ -27,7 +28,7 @@ describe('IconFeatures ', () => { it('test withIcons', () => { const { fixture, component, nativeElement } = getNewConfiguration(withIcons({ xCircleFill, zeroCircle })); - const pickedIcons = TestBed.inject(ICONS_PICKED); + const pickedIcons = component.pickedIcons!; expect(pickedIcons['xCircleFill']).toBeDefined(); expect(pickedIcons['zeroCircle']).toBeDefined(); expect(pickedIcons['xCircle']).toBeUndefined(); @@ -45,100 +46,100 @@ describe('IconFeatures ', () => { expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); }); - // it('test withWidth', () => { - // const { fixture, component, nativeElement } = getNewConfiguration(withIcons({ xCircleFill }), withWidth('32')); - // - // component.name = 'x-circle-fill'; - // - // fixture.detectChanges(); - // - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe('32'); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe(DEFAULT_ICON_SIZE); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); - // }); - // - // it('test withHeight', () => { - // const { fixture, component, nativeElement } = getNewConfiguration(withIcons({ xCircleFill }), withHeight('32')); - // - // component.name = 'x-circle-fill'; - // - // fixture.detectChanges(); - // - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe(DEFAULT_ICON_SIZE); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe('32'); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); - // }); - // - // it('test withColor', () => { - // const { fixture, component, nativeElement } = getNewConfiguration(withIcons({ xCircleFill }), withColor('#123456')); - // - // component.name = 'x-circle-fill'; - // - // fixture.detectChanges(); - // - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe(DEFAULT_ICON_SIZE); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe(DEFAULT_ICON_SIZE); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('#123456'); - // }); - // - // it('test provideIcons', () => { - // void TestBed.configureTestingModule({ - // imports: [BiComponent], - // providers: [provideIcons({ xCircleFill, zeroCircle })], - // }).compileComponents(); - // - // const fixture = TestBed.createComponent(BiComponent) as ComponentFixture; - // - // const component = fixture.componentInstance, - // nativeElement = fixture.nativeElement as HTMLElement; - // - // expect(component.pickedIcons['xCircleFill']).toBeDefined(); - // expect(component.pickedIcons['zeroCircle']).toBeDefined(); - // expect(component.pickedIcons['xCircle']).toBeUndefined(); - // - // component.name = 'x-circle-fill'; - // - // fixture.detectChanges(); - // - // // @ts-ignore - // expect(nativeElement.querySelector('svg')?.outerHTML).toBe(allIcons[toEscapedName('x-circle-fill')]); - // - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe(DEFAULT_ICON_SIZE); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe(DEFAULT_ICON_SIZE); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); - // }); - // - // it('test withIcons & provideIcons', () => { - // void TestBed.configureTestingModule({ - // imports: [BiComponent], - // providers: [provideBi(withIcons({ zeroCircle })), provideIcons({ xCircleFill })], - // }).compileComponents(); - // - // const fixture = TestBed.createComponent(BiComponent) as ComponentFixture; - // - // const component = fixture.componentInstance, - // nativeElement = fixture.nativeElement as HTMLElement; - // - // expect(component.pickedIcons['xCircleFill']).toBeDefined(); - // expect(component.pickedIcons['zeroCircle']).toBeDefined(); - // expect(component.pickedIcons['xCircle']).toBeUndefined(); - // - // component.name = 'x-circle-fill'; - // - // fixture.detectChanges(); - // - // // @ts-ignore - // expect(nativeElement.querySelector('svg')?.outerHTML).toBe(allIcons[toEscapedName('x-circle-fill')]); - // - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe(DEFAULT_ICON_SIZE); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe(DEFAULT_ICON_SIZE); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); - // expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); - // }); + it('test withWidth', () => { + const { fixture, component, nativeElement } = getNewConfiguration(withIcons({ xCircleFill }), withWidth('32')); + + component.name = 'x-circle-fill'; + + fixture.detectChanges(); + + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe('32'); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe(DEFAULT_ICON_SIZE); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); + }); + + it('test withHeight', () => { + const { fixture, component, nativeElement } = getNewConfiguration(withIcons({ xCircleFill }), withHeight('32')); + + component.name = 'x-circle-fill'; + + fixture.detectChanges(); + + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe(DEFAULT_ICON_SIZE); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe('32'); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); + }); + + it('test withColor', () => { + const { fixture, component, nativeElement } = getNewConfiguration(withIcons({ xCircleFill }), withColor('#123456')); + + component.name = 'x-circle-fill'; + + fixture.detectChanges(); + + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe(DEFAULT_ICON_SIZE); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe(DEFAULT_ICON_SIZE); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('#123456'); + }); + + it('test provideIcons', () => { + void TestBed.configureTestingModule({ + imports: [BiComponent], + providers: [provideIcons({ xCircleFill, zeroCircle })], + }).compileComponents(); + + const fixture = TestBed.createComponent(BiComponent) as ComponentFixture; + + const component = fixture.componentInstance, + nativeElement = fixture.nativeElement as HTMLElement; + + expect(component.pickedIcons!['xCircleFill']).toBeDefined(); + expect(component.pickedIcons!['zeroCircle']).toBeDefined(); + expect(component.pickedIcons!['xCircle']).toBeUndefined(); + + component.name = 'x-circle-fill'; + + fixture.detectChanges(); + + // @ts-ignore + expect(nativeElement.querySelector('svg')?.outerHTML).toBe(allIcons[toEscapedName('x-circle-fill')]); + + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe(DEFAULT_ICON_SIZE); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe(DEFAULT_ICON_SIZE); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); + }); + + it('test withIcons & provideIcons', () => { + void TestBed.configureTestingModule({ + imports: [BiComponent], + providers: [provideBi(withIcons({ zeroCircle })), provideIcons({ xCircleFill })], + }).compileComponents(); + + const fixture = TestBed.createComponent(BiComponent) as ComponentFixture; + + const component = fixture.componentInstance, + nativeElement = fixture.nativeElement as HTMLElement; + + expect(component.pickedIcons!['xCircleFill']).toBeDefined(); + expect(component.pickedIcons!['zeroCircle']).toBeDefined(); + expect(component.pickedIcons!['xCircle']).toBeUndefined(); + + component.name = 'x-circle-fill'; + + fixture.detectChanges(); + + // @ts-ignore + expect(nativeElement.querySelector('svg')?.outerHTML).toBe(allIcons[toEscapedName('x-circle-fill')]); + + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'width')).toBe(DEFAULT_ICON_SIZE); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'height')).toBe(DEFAULT_ICON_SIZE); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'viewBox')).toBe('0 0 16 16'); + expect(getAttributeValue(nativeElement.querySelector('svg')?.outerHTML, 'fill')).toBe('currentColor'); + }); }); function getAttributeValue(text: string | undefined, attributeName: string): string | undefined { diff --git a/libs/dfx-bootstrap-icons/src/lib/icons.provider.ts b/libs/dfx-bootstrap-icons/src/lib/icons.provider.ts index eeab74bd..888149b6 100644 --- a/libs/dfx-bootstrap-icons/src/lib/icons.provider.ts +++ b/libs/dfx-bootstrap-icons/src/lib/icons.provider.ts @@ -10,10 +10,9 @@ import { } from './icons.feature'; import { ICON_COLOR, ICON_HEIGHT, ICON_WIDTH, ICONS_LOADER, ICONS_PICKED } from './icons.config'; import { ColorValueHex, IconsType } from './types'; -import { Observable, of } from 'rxjs'; -import { HttpClient, HttpContext, HttpHeaders } from "@angular/common/http"; -import { toEscapedName } from './internal/toEscapedName'; -import { ICON_CACHE_INTERCEPTOR } from "./icons-cache.interceptor"; +import { Observable } from 'rxjs'; +import { HttpClient, HttpContext, HttpHeaders } from '@angular/common/http'; +import { ICON_CACHE_INTERCEPTOR } from './icons-cache.interceptor'; export function provideBi(...features: IconFeatures[]): Provider[] { return features.map((it) => it.providers); @@ -23,16 +22,6 @@ export function provideIcons(icons: IconsType): Provider { return { provide: ICONS_PICKED, multi: true, useValue: icons }; } -export function provideLocalIconsLoader(): Provider { - return { - provide: ICONS_LOADER, - useFactory: (): ((name: string) => Observable) => { - const pickedIcons: IconsType = Object.assign({}, ...(inject(ICONS_PICKED) as unknown as object[])) as IconsType; - return (name: string) => of(pickedIcons[toEscapedName(name)] || undefined); - }, - }; -} - export function provideCDNIconsLoader(...cdnUrls: string[]): Provider { const randomCDNUrl = cdnUrls[Math.floor(Math.random() * cdnUrls.length)]; return { @@ -55,16 +44,14 @@ export function provideCDNIconsLoader(...cdnUrls: string[]): Provider { export function withCDN(...cdnUrls: string[]): IconCDNFeature { return { kind: IconFeatureKind.ICON_CDN, - providers: [ - provideCDNIconsLoader(...cdnUrls) - ], + providers: [provideCDNIconsLoader(...cdnUrls)], }; } export function withIcons(icons: IconsType): IconPickFeature { return { kind: IconFeatureKind.ICON_PICK, - providers: [provideIcons(icons), provideLocalIconsLoader()], + providers: [provideIcons(icons)], }; } diff --git a/libs/playground-lib/src/lib/theme-picker.ts b/libs/playground-lib/src/lib/theme-picker.ts index 48b68f9f..4df816c3 100644 --- a/libs/playground-lib/src/lib/theme-picker.ts +++ b/libs/playground-lib/src/lib/theme-picker.ts @@ -1,12 +1,6 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; -import { - BiComponent, - BiName, - provideBi, - withCDN, - withColor, -} from 'dfx-bootstrap-icons'; +import { BiComponent, BiName, provideBi, withCDN, withColor } from 'dfx-bootstrap-icons'; interface Theme { id: 'auto' | 'dark' | 'light';