diff --git a/projects/core/src/index.ts b/projects/core/src/index.ts index 97096c0..8b4c04e 100644 --- a/projects/core/src/index.ts +++ b/projects/core/src/index.ts @@ -1,5 +1,3 @@ -export * from './services/lazy-loader.service'; -export * from './services/dialog.service'; export * from './services/media.service'; export * from './directives/input-autosize.directive'; export * from './directives/single-click.directive'; diff --git a/projects/core/src/services/dialog.service.ts b/projects/core/src/services/dialog.service.ts deleted file mode 100644 index 037b02a..0000000 --- a/projects/core/src/services/dialog.service.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { inject, Type } from '@angular/core'; -import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog'; -import { Observable, ReplaySubject, switchMap, take, throttleTime } from 'rxjs'; - -import { NgxAbstractLazyModule, NgxLazyLoaderService } from './lazy-loader.service'; - -export abstract class NgxDialogService { - protected openDialogSub$ = new ReplaySubject>(1); - protected dialogResponse$: Observable; - protected dialogRef!: MatDialogRef; - - protected lazyLoaderService = inject(NgxLazyLoaderService); - protected dialog = inject(MatDialog); - - public constructor(matDialogConfig?: MatDialogConfig) { - this.dialogResponse$ = this.openDialogSub$.pipe( - throttleTime(11), - take(1), - switchMap(dialogConfig => this.lazyLoaderService.loadModule$(this.getModule(), dialogConfig.injector).pipe( - switchMap(moduleInfos => { - const config = { ...(matDialogConfig ?? {} as MatDialogConfig), ...dialogConfig }; - config.minWidth = config.minWidth || '400px'; - config.injector = moduleInfos.injector; - - this.dialogRef = this.dialog.open(moduleInfos.module.componentType, config); - - return this.dialogRef.afterClosed(); - }) - )) - ); - } - - public openDialog$(dialogData?: DataType, dialogConfig?: MatDialogConfig): Observable { - dialogConfig ??= {}; - dialogConfig.data = dialogData ?? {} as DataType; - this.openDialogSub$.next(dialogConfig); - return this.dialogResponse$; - } - - public closeDialog(): void { - this.dialogRef.close(); - } - - protected abstract getModule(): Promise>>; -} diff --git a/projects/core/src/services/lazy-loader.service.ts b/projects/core/src/services/lazy-loader.service.ts deleted file mode 100644 index 6756417..0000000 --- a/projects/core/src/services/lazy-loader.service.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { ComponentType } from '@angular/cdk/portal'; -import { inject, Injectable, Injector, ɵcreateInjector as createInjector, Type } from '@angular/core'; -import { from, map, Observable } from 'rxjs'; - -export interface LoadModuleInfos { - injector: Injector; - module: T; -} - -export abstract class NgxAbstractLazyModule { - public constructor( - public componentType: ComponentType - ) {} -} - -@Injectable({ - providedIn: 'root' -}) -export class NgxLazyLoaderService { - private injector = inject(Injector); - - public loadModule$>(path: Promise>, parentInjector?: Injector): Observable> { - return from(path).pipe( - map(elementModuleOrFactory => { - const injector = createInjector(elementModuleOrFactory, parentInjector ?? this.injector); - return { - injector, - module: injector.get(elementModuleOrFactory) - }; - }) - ); - } -} diff --git a/projects/layout/src/layout.component.scss b/projects/layout/src/layout.component.scss index 12cb38f..cb0b15a 100644 --- a/projects/layout/src/layout.component.scss +++ b/projects/layout/src/layout.component.scss @@ -7,7 +7,7 @@ ngx-layout { bottom: 0; left: 0; - &.no-left.no-right .main-content { + &.no-left[no-right='true'] .main-content { padding: 0; } diff --git a/projects/layout/src/layout.component.ts b/projects/layout/src/layout.component.ts index a902f01..dd464ea 100644 --- a/projects/layout/src/layout.component.ts +++ b/projects/layout/src/layout.component.ts @@ -1,6 +1,6 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { AsyncPipe, NgTemplateOutlet } from '@angular/common'; -import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostBinding, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { MatIconButton } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav'; @@ -52,12 +52,11 @@ export class NgxLayoutComponent { @ContentChild('layoutInfoBoxes') protected layoutInfoBoxesContent?: TemplateRef; @ContentChild('layoutRight') protected layoutRightContent?: TemplateRef; - @HostBinding('class.no-right') protected noRight = false; - @ViewChild('sideFilter') protected sideFilter?: MatDrawer; protected mediaService = inject(NgxMediaService); protected sidenavService = inject(NgxSidenavService); + protected elementRef = inject>(ElementRef); public get layoutToolbar(): TemplateRef | undefined { return this.layoutToolbarExternal ?? this.layoutToolbarContent; @@ -77,7 +76,11 @@ export class NgxLayoutComponent { public get layoutRight(): TemplateRef | undefined { const value = this.layoutRightExternal ?? this.layoutRightContent; - this.noRight = !value; + if (!value) { + this.elementRef.nativeElement.setAttribute('no-right', 'true'); + } else { + this.elementRef.nativeElement.removeAttribute('no-right'); + } return value; } diff --git a/projects/message-box-dialog/src/index.ts b/projects/message-box-dialog/src/index.ts index 11998d7..0aa259d 100644 --- a/projects/message-box-dialog/src/index.ts +++ b/projects/message-box-dialog/src/index.ts @@ -1,4 +1,3 @@ export * from './message-box-dialog.component'; export * from './message-box-dialog.service'; export * from './message-box-dialog.model'; -export * from './message-box-dialog.module'; diff --git a/projects/message-box-dialog/src/message-box-dialog.component.ts b/projects/message-box-dialog/src/message-box-dialog.component.ts index bb57afd..63ab821 100644 --- a/projects/message-box-dialog/src/message-box-dialog.component.ts +++ b/projects/message-box-dialog/src/message-box-dialog.component.ts @@ -1,5 +1,8 @@ import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core'; -import { MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button'; +import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { MatToolbarModule } from '@angular/material/toolbar'; import { NgxMessageBoxDialogButtons, NgxMessageBoxDialogData } from './message-box-dialog.model'; @@ -8,7 +11,14 @@ import { NgxMessageBoxDialogButtons, NgxMessageBoxDialogData } from './message-b templateUrl: './message-box-dialog.component.html', styleUrls: ['./message-box-dialog.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [ + MatButtonModule, + MatDialogModule, + MatIconModule, + MatToolbarModule + ] }) export class NgxMessageBoxDialogComponent { diff --git a/projects/message-box-dialog/src/message-box-dialog.module.ts b/projects/message-box-dialog/src/message-box-dialog.module.ts deleted file mode 100644 index 2a79fe1..0000000 --- a/projects/message-box-dialog/src/message-box-dialog.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatIconModule } from '@angular/material/icon'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { NgxAbstractLazyModule } from '@hug/ngx-core'; - -import { NgxMessageBoxDialogComponent } from './message-box-dialog.component'; - -@NgModule({ - declarations: [NgxMessageBoxDialogComponent], - exports: [NgxMessageBoxDialogComponent], - imports: [ - MatButtonModule, - MatDialogModule, - MatIconModule, - MatToolbarModule - ] -}) -export class NgxMessageBoxDialogModule extends NgxAbstractLazyModule { - public constructor() { - super(NgxMessageBoxDialogComponent); - } -} diff --git a/projects/message-box-dialog/src/message-box-dialog.service.ts b/projects/message-box-dialog/src/message-box-dialog.service.ts index 6d4d4de..05d82c2 100644 --- a/projects/message-box-dialog/src/message-box-dialog.service.ts +++ b/projects/message-box-dialog/src/message-box-dialog.service.ts @@ -1,34 +1,38 @@ -import { Injectable, Type } from '@angular/core'; -import { MatDialogConfig } from '@angular/material/dialog'; -import { NgxAbstractLazyModule, NgxDialogService } from '@hug/ngx-core'; -import { Observable, take } from 'rxjs'; +import { inject, Injectable } from '@angular/core'; +import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; +import { from, Observable, switchMap, take } from 'rxjs'; import { NgxMessageBoxDialogButtons, NgxMessageBoxDialogData, NgxMessageBoxDialogResponse } from './message-box-dialog.model'; @Injectable({ providedIn: 'root' }) -export class NgxMessageBoxDialogService extends NgxDialogService { - - public constructor() { - super({ - panelClass: 'no-padding-dialog' - } as MatDialogConfig); - } - - public override openDialog$(dialogData: string | NgxMessageBoxDialogData, dialogConfig?: MatDialogConfig): Observable { - let messageBoxDialogData: NgxMessageBoxDialogData; - if (typeof dialogData === 'string') { - messageBoxDialogData = { - text: dialogData, - buttons: NgxMessageBoxDialogButtons.OK - } as NgxMessageBoxDialogData; - } else { - messageBoxDialogData = dialogData; - } - messageBoxDialogData.title = messageBoxDialogData.title || 'Confirmation'; // Translate - - return super.openDialog$(messageBoxDialogData, dialogConfig); +export class NgxMessageBoxDialogService { + private dialog = inject(MatDialog); + + public open$(dialogData: NgxMessageBoxDialogData | string, additionalDialogConfig?: MatDialogConfig): Observable { + return from(import('./message-box-dialog.component')).pipe( + take(1), + switchMap(dialogComponent => { + let messageBoxDialogData: NgxMessageBoxDialogData; + if (typeof dialogData === 'string') { + messageBoxDialogData = { + text: dialogData, + buttons: NgxMessageBoxDialogButtons.OK + } as NgxMessageBoxDialogData; + } else { + messageBoxDialogData = dialogData; + } + messageBoxDialogData.title = messageBoxDialogData.title || 'Confirmation'; // Translate + + const dialogConfig = { + panelClass: 'no-padding-dialog', + data: dialogData + } as MatDialogConfig; + + return this.dialog.open(dialogComponent.NgxMessageBoxDialogComponent, { ...dialogConfig, ...(additionalDialogConfig ?? {}) }).afterClosed(); + }) + ); } public openConfirmation$(message: string, dialogConfig?: MatDialogConfig): Observable { @@ -37,12 +41,8 @@ export class NgxMessageBoxDialogService extends NgxDialogService>> { - return import('./message-box-dialog.module').then(m => m.NgxMessageBoxDialogModule); - } } diff --git a/projects/status/src/index.ts b/projects/status/src/index.ts index a136f7e..7e25d31 100644 --- a/projects/status/src/index.ts +++ b/projects/status/src/index.ts @@ -1,6 +1,5 @@ export * from './status-detail'; -export * from './status.module'; export * from './status.component'; export * from './status.service'; export * from './status.model'; diff --git a/projects/status/src/status-detail/index.ts b/projects/status/src/status-detail/index.ts index 86e2ea0..4b0474d 100644 --- a/projects/status/src/status-detail/index.ts +++ b/projects/status/src/status-detail/index.ts @@ -1,3 +1,2 @@ -export * from './status-detail.module'; export * from './status-detail.component'; export * from './status-detail-dialog.service'; diff --git a/projects/status/src/status-detail/status-detail-dialog.service.ts b/projects/status/src/status-detail/status-detail-dialog.service.ts index 350de36..082f04c 100644 --- a/projects/status/src/status-detail/status-detail-dialog.service.ts +++ b/projects/status/src/status-detail/status-detail-dialog.service.ts @@ -1,23 +1,29 @@ -import { Injectable, Type } from '@angular/core'; -import { MatDialogConfig } from '@angular/material/dialog'; -import { NgxAbstractLazyModule, NgxDialogService } from '@hug/ngx-core'; +import { inject, Injectable } from '@angular/core'; +import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; +import { from, Observable, switchMap, take } from 'rxjs'; import { NgxStatus } from '../status.model'; @Injectable({ providedIn: 'root' }) -export class NgxStatusDetailDialogService extends NgxDialogService { - public constructor() { - super({ - disableClose: false, - hasBackdrop: true, - width: '700px', - panelClass: 'ngx-status-panel' - } as MatDialogConfig); - } +export class NgxStatusDetailDialogService { + private dialog = inject(MatDialog); + + public open$(dialogData: NgxStatus): Observable { + return from(import('./status-detail.component')).pipe( + take(1), + switchMap(dialogComponent => { + const dialogConfig = { + disableClose: false, + hasBackdrop: true, + width: '700px', + panelClass: 'ngx-status-panel', + data: dialogData + } as MatDialogConfig; - protected getModule(): Promise>> { - return import('./status-detail.module').then(m => m.NgxStatusDetailModule); + return this.dialog.open(dialogComponent.NgxStatusDetailComponent, dialogConfig).afterClosed(); + }) + ); } } diff --git a/projects/status/src/status-detail/status-detail.component.ts b/projects/status/src/status-detail/status-detail.component.ts index fc17ac8..20435bb 100644 --- a/projects/status/src/status-detail/status-detail.component.ts +++ b/projects/status/src/status-detail/status-detail.component.ts @@ -1,6 +1,9 @@ +import { DatePipe } from '@angular/common'; import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core'; +import { MatIconButton } from '@angular/material/button'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { NgxMessageBoxType } from '@hug/ngx-message-box'; +import { MatIcon } from '@angular/material/icon'; +import { NgxMessageBoxComponent, NgxMessageBoxType } from '@hug/ngx-message-box'; import { NgxStatus } from '../status.model'; @@ -9,7 +12,14 @@ import { NgxStatus } from '../status.model'; styleUrls: ['./status-detail.component.scss'], templateUrl: './status-detail.component.html', changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [ + DatePipe, + MatIcon, + MatIconButton, + NgxMessageBoxComponent + ] }) export class NgxStatusDetailComponent { protected fullTextError: string; diff --git a/projects/status/src/status-detail/status-detail.module.ts b/projects/status/src/status-detail/status-detail.module.ts deleted file mode 100644 index ae8bc9d..0000000 --- a/projects/status/src/status-detail/status-detail.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { DatePipe } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { MatIconButton } from '@angular/material/button'; -import { MatIcon } from '@angular/material/icon'; -import { NgxAbstractLazyModule } from '@hug/ngx-core'; -import { NgxMessageBoxComponent } from '@hug/ngx-message-box'; - -import { NgxStatusDetailComponent } from './status-detail.component'; - -@NgModule({ - declarations: [NgxStatusDetailComponent], - exports: [NgxStatusDetailComponent], - imports: [ - DatePipe, - MatIcon, - MatIconButton, - NgxMessageBoxComponent - ] -}) -export class NgxStatusDetailModule extends NgxAbstractLazyModule { - public constructor() { - super(NgxStatusDetailComponent); - } -} diff --git a/projects/status/src/status.component.ts b/projects/status/src/status.component.ts index c4722c8..541f6bb 100644 --- a/projects/status/src/status.component.ts +++ b/projects/status/src/status.component.ts @@ -1,5 +1,8 @@ import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, inject, Input, ViewEncapsulation } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { MatButton } from '@angular/material/button'; +import { MatIcon } from '@angular/material/icon'; +import { NgxSnackbarComponent } from '@hug/ngx-snackbar'; import { catchError, EMPTY, Subject, switchMap, throttleTime } from 'rxjs'; import { NgxStatus, NgxStatusAction, NgxStatusType } from './status.model'; @@ -10,13 +13,13 @@ import { NgxStatusDetailDialogService } from './status-detail/status-detail-dial styleUrls: ['./status.component.scss'], templateUrl: './status.component.html', changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None - // standalone: true, - // imports: [ - // MatButton, - // MatIcon, - // NgxSnackbarComponent - // ] + encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [ + MatButton, + MatIcon, + NgxSnackbarComponent + ] }) export class NgxStatusComponent { @@ -45,7 +48,7 @@ export class NgxStatusComponent { this.displayDetailedStatus$.pipe( throttleTime(1000), - switchMap(status => this.statusDetailDialogService.openDialog$(status).pipe( + switchMap(status => this.statusDetailDialogService.open$(status).pipe( catchError(err => { console.error('Failed to open status detail dialog', err); return EMPTY; diff --git a/projects/status/src/status.module.ts b/projects/status/src/status.module.ts deleted file mode 100644 index 9b8a67e..0000000 --- a/projects/status/src/status.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { NgModule } from '@angular/core'; -import { MatButton } from '@angular/material/button'; -import { MatIcon } from '@angular/material/icon'; -import { NgxAbstractLazyModule } from '@hug/ngx-core'; -import { NgxSnackbarComponent } from '@hug/ngx-snackbar'; - -import { NgxStatusComponent } from './status.component'; - -@NgModule({ - declarations: [NgxStatusComponent], - exports: [NgxStatusComponent], - imports: [ - MatButton, - MatIcon, - NgxSnackbarComponent - ] -}) -export class NgxStatusModule extends NgxAbstractLazyModule { - public constructor() { - super(NgxStatusComponent); - } -} diff --git a/projects/status/src/status.service.ts b/projects/status/src/status.service.ts index 8f90a80..9560354 100644 --- a/projects/status/src/status.service.ts +++ b/projects/status/src/status.service.ts @@ -1,8 +1,7 @@ import { DOCUMENT } from '@angular/common'; -import { ApplicationRef, ComponentFactoryResolver, DestroyRef, EmbeddedViewRef, inject, Injectable, Injector } from '@angular/core'; +import { ApplicationRef, DestroyRef, EmbeddedViewRef, inject, Injectable, Injector, ViewContainerRef } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; -import { NgxLazyLoaderService } from '@hug/ngx-core'; -import { mergeWith, switchMap, take, tap, timer } from 'rxjs'; +import { from, mergeWith, switchMap, take, tap, timer } from 'rxjs'; import { NgxStatus, NgxStatusAction } from './status.model'; @@ -23,10 +22,9 @@ const durationShort = 8_000; export class NgxStatusService { protected document = inject(DOCUMENT); - protected lazyLoaderService = inject(NgxLazyLoaderService); protected injector = inject(Injector); - protected resolver = inject(ComponentFactoryResolver); private destroyRef = inject(DestroyRef); + private applicationRef = inject(ApplicationRef); /** * Display an information message to the screen. @@ -57,13 +55,13 @@ export class NgxStatusService { } public showStatus(status: NgxStatus): void { - this.lazyLoaderService.loadModule$( - import('./status.module').then(m => m.NgxStatusModule) - ).pipe( + from(import('./status.component')).pipe( take(1), - switchMap(moduleInfos => { - const factory = this.resolver.resolveComponentFactory(moduleInfos.module.componentType); - const componentRef = factory.create(this.injector); + switchMap(component => { + // Get the root view container ref of the application by injecting it into the root component + const rootViewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef); + // Insert the modal component into the root view container + const componentRef = rootViewContainerRef.createComponent(component.NgxStatusComponent); componentRef.instance.status = status; const applicationRef = this.injector.get(ApplicationRef); applicationRef.attachView(componentRef.hostView); diff --git a/projects/story-book/src/layout/layout-wrapper.component.html b/projects/story-book/src/layout/layout-wrapper.component.html index 5d7037d..66a3b43 100644 --- a/projects/story-book/src/layout/layout-wrapper.component.html +++ b/projects/story-book/src/layout/layout-wrapper.component.html @@ -27,7 +27,7 @@ - diff --git a/projects/story-book/src/layout/layout-wrapper.component.ts b/projects/story-book/src/layout/layout-wrapper.component.ts index af342f7..4931777 100644 --- a/projects/story-book/src/layout/layout-wrapper.component.ts +++ b/projects/story-book/src/layout/layout-wrapper.component.ts @@ -1,4 +1,5 @@ -import { ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, DestroyRef, inject, Input, ViewEncapsulation } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormsModule } from '@angular/forms'; import { MatFabButton, MatIconButton } from '@angular/material/button'; import { MatChipListbox, MatChipOption } from '@angular/material/chips'; @@ -6,6 +7,7 @@ import { MatIcon } from '@angular/material/icon'; import { MatTooltip } from '@angular/material/tooltip'; import { NgxLayoutComponent } from '../../../layout/src/layout.component'; +import { NgxMessageBoxDialogService } from '../../../message-box-dialog/src/message-box-dialog.service'; import { NgxSearchContainerComponent, NgxSearchInputDirective } from '../../../search-container/src/search-container.component'; import { NgxStatusService } from '../../../status/src/status.service'; @@ -39,6 +41,8 @@ export class StorybookLayoutWrapperComponent { protected search: string | undefined; private ngxStatusService = inject(NgxStatusService); + private ngxMessageBoxService = inject(NgxMessageBoxDialogService); + private destroyRef = inject(DestroyRef); protected log(msg: string): void { this.ngxStatusService.showStatus({ @@ -47,4 +51,10 @@ export class StorybookLayoutWrapperComponent { duration: 1000 }); } + + protected msg(msg: string): void { + this.ngxMessageBoxService.openConfirmation$(msg).pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe(); + } } diff --git a/projects/story-book/src/status/status.stories.ts b/projects/story-book/src/status/status.stories.ts index c86e5e8..96bdcf3 100644 --- a/projects/story-book/src/status/status.stories.ts +++ b/projects/story-book/src/status/status.stories.ts @@ -3,7 +3,6 @@ import { type Meta, moduleMetadata, type StoryObj } from '@storybook/angular'; import { NgxSnackbarComponent } from '../../../snackbar/src/snackbar.component'; import { NgxStatusComponent } from '../../../status/src/status.component'; -import { NgxStatusModule } from '../../../status/src/status.module'; import { NgxStatusService } from '../../../status/src/status.service'; const meta: Meta = { @@ -12,7 +11,7 @@ const meta: Meta = { decorators: [ moduleMetadata({ imports: [ - NgxSnackbarComponent, NgxStatusModule + NgxSnackbarComponent ], providers: [NgxStatusService] }) diff --git a/projects/tooltip/src/tooltip.service.ts b/projects/tooltip/src/tooltip.service.ts index ed35140..5d43e23 100644 --- a/projects/tooltip/src/tooltip.service.ts +++ b/projects/tooltip/src/tooltip.service.ts @@ -1,14 +1,14 @@ -import { ConnectedPosition } from '@angular/cdk/overlay'; -import { inject, Type } from '@angular/core'; +import { ComponentType, ConnectedPosition } from '@angular/cdk/overlay'; +import { inject } from '@angular/core'; import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog'; -import { NgxAbstractLazyModule, NgxLazyLoaderService, subscribeWith } from '@hug/ngx-core'; +import { subscribeWith } from '@hug/ngx-core'; import { merge } from 'lodash-es'; -import { debounceTime, delay, EMPTY, filter, fromEvent, map, mergeWith, Observable, shareReplay, Subject, switchMap, tap, withLatestFrom } from 'rxjs'; +import { debounceTime, delay, EMPTY, filter, fromEvent, map, mergeWith, Observable, shareReplay, Subject, switchMap, take, tap, withLatestFrom } from 'rxjs'; import { NgxTooltipConfig } from './tooltip.model'; import { NgxTooltipComponentInterface } from './tooltip-component.interface'; -export abstract class NgxTooltipService { +export abstract class NgxTooltipService { protected close$ = new Subject(); protected positions: readonly ConnectedPosition[] = [ @@ -76,7 +76,6 @@ export abstract class NgxTooltipService { } ]; - protected lazyLoaderService = inject(NgxLazyLoaderService); protected dialog = inject(MatDialog); public constructor(private tooltipConfig?: MatDialogConfig) { @@ -147,20 +146,20 @@ export abstract class NgxTooltipService { } protected openRef$(tooltipData: D, triggerElement: HTMLElement, tooltipConfig: Partial>): Observable> { - return this.lazyLoaderService.loadModule$(this.getModule()).pipe( - switchMap(moduleInfos => { + return this.loadComponent$().pipe( + take(1), + switchMap(component => { const config = merge({}, this.tooltipConfig, tooltipConfig || {} as Partial>); config.data = tooltipData || {} as D; config.minWidth = config.minWidth || '100px'; - config.injector = moduleInfos.injector; - const dialogRef = this.dialog.open(moduleInfos.module.componentType, config); + const dialogRef = this.dialog.open(component, config); return dialogRef.afterOpened().pipe( map(() => dialogRef) ); }), - tap(dialogRef => { - const componentInstance = dialogRef.componentInstance; + tap(tooltipRef => { + const componentInstance = tooltipRef.componentInstance; const tooltipBounds = componentInstance.elementRef?.nativeElement.parentElement?.getBoundingClientRect(); const triggerBounds = triggerElement?.getBoundingClientRect(); const bodyBounds = document.body.getBoundingClientRect(); @@ -238,11 +237,11 @@ export abstract class NgxTooltipService { left = bodyBounds.left; } - dialogRef.updatePosition({ + tooltipRef.updatePosition({ left: `${left}px`, top: `${top}px` }); - dialogRef.addPanelClass('ngx-tooltip-opened'); + tooltipRef.addPanelClass('ngx-tooltip-opened'); return true; }); @@ -253,5 +252,5 @@ export abstract class NgxTooltipService { ); } - protected abstract getModule(): Promise>>; + protected abstract loadComponent$(): Observable>; } diff --git a/projects/user-tooltip/src/index.ts b/projects/user-tooltip/src/index.ts index 7cf56cb..491359a 100644 --- a/projects/user-tooltip/src/index.ts +++ b/projects/user-tooltip/src/index.ts @@ -1,3 +1,2 @@ -export * from './user-tooltip.module'; export * from './user-tooltip.component'; export * from './user-tooltip.service'; diff --git a/projects/user-tooltip/src/user-tooltip.component.ts b/projects/user-tooltip/src/user-tooltip.component.ts index f0c915d..a1124fe 100644 --- a/projects/user-tooltip/src/user-tooltip.component.ts +++ b/projects/user-tooltip/src/user-tooltip.component.ts @@ -1,12 +1,16 @@ import { ChangeDetectionStrategy, Component, ElementRef, inject } from '@angular/core'; import { MAT_DIALOG_DATA } from '@angular/material/dialog'; import { NgxTooltipComponentInterface } from '@hug/ngx-tooltip'; -import { NgxUserCard } from '@hug/ngx-user-card'; +import { NgxUserCard, NgxUserCardComponent } from '@hug/ngx-user-card'; @Component({ selector: 'ngx-user-tooltip', templateUrl: './user-tooltip.component.html', - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [ + NgxUserCardComponent + ] }) export class NgxUserTooltipComponent implements NgxTooltipComponentInterface { public elementRef = inject>(ElementRef); diff --git a/projects/user-tooltip/src/user-tooltip.module.ts b/projects/user-tooltip/src/user-tooltip.module.ts deleted file mode 100644 index 4f840da..0000000 --- a/projects/user-tooltip/src/user-tooltip.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { NgModule } from '@angular/core'; -import { NgxAbstractLazyModule } from '@hug/ngx-core'; -import { NgxUserCardComponent } from '@hug/ngx-user-card'; - -import { NgxUserTooltipComponent } from './user-tooltip.component'; - -@NgModule({ - declarations: [NgxUserTooltipComponent], - exports: [NgxUserTooltipComponent], - imports: [ - NgxUserCardComponent - ] -}) -export class NgxUserTooltipModule extends NgxAbstractLazyModule { - public constructor() { - super(NgxUserTooltipComponent); - } -} diff --git a/projects/user-tooltip/src/user-tooltip.service.ts b/projects/user-tooltip/src/user-tooltip.service.ts index 9098880..d923183 100644 --- a/projects/user-tooltip/src/user-tooltip.service.ts +++ b/projects/user-tooltip/src/user-tooltip.service.ts @@ -1,13 +1,16 @@ -import { Injectable, Type } from '@angular/core'; +import { Injectable } from '@angular/core'; import { MatDialogConfig } from '@angular/material/dialog'; -import { NgxAbstractLazyModule } from '@hug/ngx-core'; -import { NgxTooltipComponentInterface, NgxTooltipService } from '@hug/ngx-tooltip'; +import { NgxTooltipService } from '@hug/ngx-tooltip'; import { NgxUserCard } from '@hug/ngx-user-card'; +import { from, map, Observable } from 'rxjs'; + +import { NgxUserTooltipComponent } from './user-tooltip.component'; @Injectable({ providedIn: 'root' }) -export class NgxUserTooltipService extends NgxTooltipService { +export class NgxUserTooltipService extends NgxTooltipService { + public constructor() { super({ width: 'auto', @@ -16,7 +19,9 @@ export class NgxUserTooltipService extends NgxTooltipService { } as MatDialogConfig); } - protected override async getModule(): Promise>> { - return (await import('./user-tooltip.module')).NgxUserTooltipModule; + protected override loadComponent$(): Observable { + return from(import('./user-tooltip.component')).pipe( + map(ref => ref.NgxUserTooltipComponent) + ); } }