feat(core): refactor dialogs to no longer require module import

projects/addon-mobile/components/mobile-dialog/mobile-dialog.module.ts

@@ -1,17 +1,14 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiRippleModule} from '@taiga-ui/addon-mobile/directives/ripple';
-import {tuiAsDialog} from '@taiga-ui/cdk';
 import {TuiButtonModule} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiMobileDialogComponent} from './mobile-dialog.component';
-import {TuiMobileDialogService} from './mobile-dialog.service';
 
 @NgModule({
     imports: [CommonModule, TuiButtonModule, TuiRippleModule, PolymorpheusModule],
     declarations: [TuiMobileDialogComponent],
-    providers: [tuiAsDialog(TuiMobileDialogService)],
     exports: [TuiMobileDialogComponent],
 })
 export class TuiMobileDialogModule {}

projects/addon-mobile/components/mobile-dialog/mobile-dialog.service.ts

@@ -1,23 +1,23 @@
 import {inject, Injectable} from '@angular/core';
-import {AbstractTuiDialogService, TuiBaseDialogContext} from '@taiga-ui/cdk';
+import {TuiBaseDialogContext, TuiPopoverService} from '@taiga-ui/cdk';
+import {TUI_DIALOGS} from '@taiga-ui/core';
 import {PolymorpheusComponent, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
 
 import {TuiMobileDialogComponent} from './mobile-dialog.component';
 import {TUI_MOBILE_DIALOG_OPTIONS} from './mobile-dialog.options';
 import {TuiMobileDialogOptions} from './mobile-dialog-options';
 
-const DIALOG = new PolymorpheusComponent(TuiMobileDialogComponent);
-
 @Injectable({
     providedIn: 'root',
 })
-export class TuiMobileDialogService extends AbstractTuiDialogService<
+export class TuiMobileDialogService extends TuiPopoverService<
     TuiMobileDialogOptions<any>,
     number
 > {
-    protected readonly component = DIALOG;
-    protected readonly defaultOptions: TuiMobileDialogOptions<any> = {
+    protected readonly items$ = inject(TUI_DIALOGS);
+    protected readonly component = new PolymorpheusComponent(TuiMobileDialogComponent);
+    protected readonly options = {
         ...inject(TUI_MOBILE_DIALOG_OPTIONS),
         data: undefined,
     };

projects/addon-mobile/components/sheet-dialog/sheet-dialog.directive.ts

@@ -1,5 +1,5 @@
 import {Directive} from '@angular/core';
-import {AbstractTuiDialogDirective, AbstractTuiDialogService} from '@taiga-ui/cdk';
+import {TuiPopoverDirective, TuiPopoverService} from '@taiga-ui/cdk';
 
 import {TuiSheetDialogOptions} from './sheet-dialog.options';
 import {TuiSheetDialogService} from './sheet-dialog.service';
@@ -10,9 +10,9 @@ import {TuiSheetDialogService} from './sheet-dialog.service';
     outputs: ['openChange: tuiSheetDialogChange'],
     providers: [
         {
-            provide: AbstractTuiDialogService,
+            provide: TuiPopoverService,
             useExisting: TuiSheetDialogService,
         },
     ],
 })
-export class TuiSheetDialogDirective extends AbstractTuiDialogDirective<TuiSheetDialogOptions> {}
+export class TuiSheetDialogDirective extends TuiPopoverDirective<TuiSheetDialogOptions> {}

projects/addon-mobile/components/sheet-dialog/sheet-dialog.module.ts

@@ -1,17 +1,15 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {tuiAsDialog, TuiClickOutsideModule} from '@taiga-ui/cdk';
+import {TuiClickOutsideModule} from '@taiga-ui/cdk';
 import {TuiButtonModule} from '@taiga-ui/core';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiSheetDialogComponent} from './sheet-dialog.component';
 import {TuiSheetDialogDirective} from './sheet-dialog.directive';
-import {TuiSheetDialogService} from './sheet-dialog.service';
 
 @NgModule({
     imports: [CommonModule, PolymorpheusModule, TuiClickOutsideModule, TuiButtonModule],
     declarations: [TuiSheetDialogComponent, TuiSheetDialogDirective],
-    providers: [tuiAsDialog(TuiSheetDialogService)],
     exports: [TuiSheetDialogComponent, TuiSheetDialogDirective],
 })
 export class TuiSheetDialogModule {}

projects/addon-mobile/components/sheet-dialog/sheet-dialog.service.ts

@@ -1,20 +1,18 @@
 import {inject, Injectable} from '@angular/core';
-import {AbstractTuiDialogService} from '@taiga-ui/cdk';
+import {TuiPopoverService} from '@taiga-ui/cdk';
+import {TUI_DIALOGS} from '@taiga-ui/core';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 
 import {TuiSheetDialogComponent} from './sheet-dialog.component';
 import {TUI_SHEET_DIALOG_OPTIONS, TuiSheetDialogOptions} from './sheet-dialog.options';
 
-const DIALOG = new PolymorpheusComponent(TuiSheetDialogComponent);
-
 @Injectable({
     providedIn: 'root',
 })
-export class TuiSheetDialogService extends AbstractTuiDialogService<
-    TuiSheetDialogOptions<any>
-> {
-    protected readonly component = DIALOG;
-    protected readonly defaultOptions: TuiSheetDialogOptions<any> = {
+export class TuiSheetDialogService extends TuiPopoverService<TuiSheetDialogOptions<any>> {
+    protected readonly items$ = inject(TUI_DIALOGS);
+    protected readonly component = new PolymorpheusComponent(TuiSheetDialogComponent);
+    protected readonly options = {
         ...inject(TUI_SHEET_DIALOG_OPTIONS),
         data: undefined,
     };

projects/addon-preview/components/preview-dialog/preview-dialog.service.ts

@@ -1,11 +1,13 @@
-import {Injectable} from '@angular/core';
-import {AbstractTuiDialogService} from '@taiga-ui/cdk';
+import {inject, Injectable} from '@angular/core';
+import {TuiPopoverService} from '@taiga-ui/cdk';
+import {TUI_DIALOGS} from '@taiga-ui/core';
 import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 
 import {TuiPreviewDialogComponent} from './preview-dialog.component';
 
 @Injectable({providedIn: 'root'})
-export class TuiPreviewDialogService extends AbstractTuiDialogService<unknown> {
-    readonly defaultOptions = {};
-    readonly component = new PolymorpheusComponent(TuiPreviewDialogComponent);
+export class TuiPreviewDialogService extends TuiPopoverService<unknown> {
+    protected readonly items$ = inject(TUI_DIALOGS);
+    protected readonly options = {};
+    protected readonly component = new PolymorpheusComponent(TuiPreviewDialogComponent);
 }

projects/addon-preview/components/preview/preview.module.ts

@@ -3,8 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MutationObserverModule} from '@ng-web-apis/mutation-observer';
 import {ResizeObserverModule} from '@ng-web-apis/resize-observer';
-import {TuiPreviewDialogService} from '@taiga-ui/addon-preview/components/preview-dialog';
-import {tuiAsDialog, TuiDragModule, TuiPanModule, TuiZoomModule} from '@taiga-ui/cdk';
+import {TuiDragModule, TuiPanModule, TuiZoomModule} from '@taiga-ui/cdk';
 import {
     TuiButtonModule,
     TuiHintModule,
@@ -44,7 +43,6 @@ import {TuiPreviewZoomComponent} from './zoom/preview-zoom.component';
         TuiPreviewPaginationComponent,
         TuiPreviewZoomComponent,
     ],
-    providers: [tuiAsDialog(TuiPreviewDialogService)],
     exports: [
         TuiPreviewComponent,
         TuiPreviewActionDirective,

projects/cdk/components/index.ts

@@ -1,4 +1,3 @@
 export * from '@taiga-ui/cdk/components/alert-host';
-export * from '@taiga-ui/cdk/components/dialog-host';
 export * from '@taiga-ui/cdk/components/dropdown-host';
 export * from '@taiga-ui/cdk/components/scroll-controls';

projects/cdk/directives/index.ts

@@ -22,6 +22,7 @@ export * from '@taiga-ui/cdk/directives/obscured';
 export * from '@taiga-ui/cdk/directives/overscroll';
 export * from '@taiga-ui/cdk/directives/pan';
 export * from '@taiga-ui/cdk/directives/platform';
+export * from '@taiga-ui/cdk/directives/popover';
 export * from '@taiga-ui/cdk/directives/portal';
 export * from '@taiga-ui/cdk/directives/pressed';
 export * from '@taiga-ui/cdk/directives/prevent-default';

projects/cdk/directives/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover.directive';

projects/cdk/directives/popover/popover.directive.ts

@@ -0,0 +1,30 @@
+import {Directive, inject, OnChanges} from '@angular/core';
+import {tuiIfMap} from '@taiga-ui/cdk/observables';
+import {TuiPopover, TuiPopoverService} from '@taiga-ui/cdk/services';
+import {PolymorpheusTemplate} from '@tinkoff/ng-polymorpheus';
+import {distinctUntilChanged, endWith, ignoreElements, share, Subject} from 'rxjs';
+
+@Directive()
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export abstract class TuiPopoverDirective<T>
+    extends PolymorpheusTemplate<TuiPopover<T, void>>
+    implements OnChanges
+{
+    private readonly service = inject(TuiPopoverService<T>);
+    private readonly open$ = new Subject<boolean>();
+
+    options: Partial<T> = {};
+    open = false;
+
+    readonly openChange = this.open$.pipe(
+        distinctUntilChanged(),
+        tuiIfMap(() =>
+            this.service.open(this, this.options).pipe(ignoreElements(), endWith(false)),
+        ),
+        share(),
+    );
+
+    ngOnChanges(): void {
+        this.open$.next(this.open);
+    }
+}

projects/cdk/interfaces/base-dialog-context.ts

@@ -1,7 +1,7 @@
 import {Observer} from 'rxjs';
 
 import {TuiAriaDialogContext} from './aria-dialog-context';
-import {TuiContext} from './context-with-implicit';
+import {TuiContext} from './context';
 
 export interface TuiBaseDialogContext<O>
     extends TuiContext<Observer<O>>,