feat(ui/components): export and reuse overlay injection token

Introduce a shared InjectionToken for OverlayRef used by the multi-EPG
overlay component and export it from the components module.

- Add overlay-ref.token.ts defining COMPONENT_OVERLAY_REF to provide
  OverlayRef for dynamically created overlay components.
- Replace a locally created InjectionToken with an injected
  COMPONENT_OVERLAY_REF in multi-epg-container.component to avoid
  token duplication and ensure consistent DI across modules.
- Export the token from libs/ui/components/src/index.ts so other
  consumers can import and use the same token.

This reduces duplicated token definitions, fixes DI inconsistencies,
and makes the overlay ref reusable by external components.
This commit is contained in:
4gray committed 2025-11-22 11:26:22 +01:00
1 parent ba5662edaa
commit 028ccf1580
3 files changed
+12 -8

No files matched your search

+1
View File
@@ -9,6 +9,7 @@ export * from './lib/epg-list/epg-list.component';
export * from './lib/html-video-player/html-video-player.component';
export * from './lib/info-overlay/info-overlay.component';
export * from './lib/multi-epg/multi-epg-container.component';
export * from './lib/multi-epg/overlay-ref.token';
export * from './lib/recent-playlists/playlist-info/playlist-info.component';
export * from './lib/recent-playlists/playlist-item/playlist-item.component';
export * from './lib/recent-playlists/recent-playlists.component';
@@ -7,7 +7,6 @@ import {
Component,
ElementRef,
inject,
InjectionToken,
Input,
OnDestroy,
OnInit,
@@ -23,6 +22,7 @@ import { addDays, differenceInMinutes, format, parse, subDays } from 'date-fns';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { Channel, EpgChannel, EpgProgram } from 'shared-interfaces';
import { EpgItemDescriptionComponent } from '../epg-list/epg-item-description/epg-item-description.component';
import { COMPONENT_OVERLAY_REF } from './overlay-ref.token';
interface EnrichedProgram extends EpgProgram {
startDate: Date;
@@ -89,13 +89,7 @@ export class MultiEpgContainerComponent
private readonly dialog = inject(MatDialog);
private readonly cdr = inject(ChangeDetectorRef);
private readonly COMPONENT_OVERLAY_REF = new InjectionToken<OverlayRef>(
'COMPONENT_OVERLAY_REF'
);
private readonly overlayRef = inject<OverlayRef>(
this.COMPONENT_OVERLAY_REF
);
private readonly overlayRef = inject<OverlayRef>(COMPONENT_OVERLAY_REF);
ngOnInit() {
this.calculateCurrentTimeBar();
@@ -0,0 +1,9 @@
import { OverlayRef } from '@angular/cdk/overlay';
import { InjectionToken } from '@angular/core';
/**
* Injection token for providing OverlayRef to dynamically created overlay components
*/
export const COMPONENT_OVERLAY_REF = new InjectionToken<OverlayRef>(
'COMPONENT_OVERLAY_REF'
);