feat(cdk)!: refactor the way new custom dialogs are created

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

@@ -2,4 +2,3 @@ export * from './mobile-dialog.component';
 export * from './mobile-dialog.module';
 export * from './mobile-dialog.options';
 export * from './mobile-dialog.service';
-export * from './mobile-dialog-options';

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

@@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
 import {TUI_IS_IOS, TuiDialog} from '@taiga-ui/cdk';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 
-import {TuiMobileDialogOptions} from './mobile-dialog-options';
+import {TuiMobileDialogOptions} from './mobile-dialog.options';
 
 @Component({
     selector: 'tui-mobile-dialog',

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

@@ -1,13 +1,16 @@
 import {Provider} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
 
-import {TuiMobileDialogOptions} from './mobile-dialog-options';
-
-type TuiMobileDialogDefaultOptions = Omit<TuiMobileDialogOptions<unknown>, 'data'>;
+export interface TuiMobileDialogOptions<I = undefined> {
+    readonly actions: readonly string[];
+    readonly data: I;
+    readonly label: string;
+}
 
-export const TUI_MOBILE_DIALOG_DEFAULT_OPTIONS: TuiMobileDialogDefaultOptions = {
+export const TUI_MOBILE_DIALOG_DEFAULT_OPTIONS: TuiMobileDialogOptions = {
     label: '',
     actions: ['OK'],
+    data: undefined,
 };
 
 /**
@@ -18,7 +21,7 @@ export const TUI_MOBILE_DIALOG_OPTIONS = tuiCreateToken(
 );
 
 export function tuiMobileDialogOptionsProvider(
-    options: Partial<TuiMobileDialogDefaultOptions>,
+    options: Partial<TuiMobileDialogOptions<unknown>>,
 ): Provider {
     return tuiProvideOptions(
         TUI_MOBILE_DIALOG_OPTIONS,

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

@@ -1,27 +1,25 @@
 import {inject, Injectable} from '@angular/core';
 import {TuiBaseDialogContext, TuiPopoverService} from '@taiga-ui/cdk';
 import {TUI_DIALOGS} from '@taiga-ui/core';
-import {PolymorpheusComponent, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {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';
+import {TUI_MOBILE_DIALOG_OPTIONS, TuiMobileDialogOptions} from './mobile-dialog.options';
 
 @Injectable({
     providedIn: 'root',
+    useFactory: () =>
+        new TuiMobileDialogService(
+            TUI_DIALOGS,
+            TuiMobileDialogComponent,
+            inject(TUI_MOBILE_DIALOG_OPTIONS),
+        ),
 })
 export class TuiMobileDialogService extends TuiPopoverService<
     TuiMobileDialogOptions<any>,
     number
 > {
-    protected readonly items$ = inject(TUI_DIALOGS);
-    protected readonly component = new PolymorpheusComponent(TuiMobileDialogComponent);
-    protected readonly options = {
-        ...inject(TUI_MOBILE_DIALOG_OPTIONS),
-        data: undefined,
-    };
-
     override open(
         content: PolymorpheusContent<
             TuiBaseDialogContext<number> & TuiMobileDialogOptions<any>

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

@@ -1,5 +1,5 @@
 import {Directive} from '@angular/core';
-import {TuiPopoverDirective, TuiPopoverService} from '@taiga-ui/cdk';
+import {tuiAsPopover, TuiPopoverDirective} from '@taiga-ui/cdk';
 
 import {TuiSheetDialogOptions} from './sheet-dialog.options';
 import {TuiSheetDialogService} from './sheet-dialog.service';
@@ -8,11 +8,6 @@ import {TuiSheetDialogService} from './sheet-dialog.service';
     selector: 'ng-template[tuiSheetDialog]',
     inputs: ['options: tuiSheetDialogOptions', 'open: tuiSheetDialog'],
     outputs: ['openChange: tuiSheetDialogChange'],
-    providers: [
-        {
-            provide: TuiPopoverService,
-            useExisting: TuiSheetDialogService,
-        },
-    ],
+    providers: [tuiAsPopover(TuiSheetDialogService)],
 })
 export class TuiSheetDialogDirective extends TuiPopoverDirective<TuiSheetDialogOptions> {}

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

@@ -2,9 +2,7 @@ import {Provider} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-type TuiSheetDialogDefaultOptions = Omit<TuiSheetDialogOptions<unknown>, 'data'>;
-
-export interface TuiSheetDialogOptions<I = never> {
+export interface TuiSheetDialogOptions<I = undefined> {
     readonly closeable: boolean;
     readonly data: I;
     readonly initial: number;
@@ -13,12 +11,13 @@ export interface TuiSheetDialogOptions<I = never> {
     readonly stops: readonly string[];
 }
 
-export const TUI_SHEET_DIALOG_DEFAULT_OPTIONS: TuiSheetDialogDefaultOptions = {
+export const TUI_SHEET_DIALOG_DEFAULT_OPTIONS: TuiSheetDialogOptions = {
     label: '',
     stops: [],
     initial: 0,
     offset: 16,
     closeable: true,
+    data: undefined,
 };
 
 /**
@@ -27,7 +26,7 @@ export const TUI_SHEET_DIALOG_DEFAULT_OPTIONS: TuiSheetDialogDefaultOptions = {
 export const TUI_SHEET_DIALOG_OPTIONS = tuiCreateToken(TUI_SHEET_DIALOG_DEFAULT_OPTIONS);
 
 export function tuiSheetDialogOptionsProvider(
-    options: Partial<TuiSheetDialogDefaultOptions>,
+    options: Partial<TuiSheetDialogOptions>,
 ): Provider {
     return tuiProvideOptions(
         TUI_SHEET_DIALOG_OPTIONS,

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

@@ -1,19 +1,19 @@
 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 {TuiSheetDialogComponent} from './sheet-dialog.component';
 import {TUI_SHEET_DIALOG_OPTIONS, TuiSheetDialogOptions} from './sheet-dialog.options';
 
 @Injectable({
     providedIn: 'root',
+    useFactory: () =>
+        new TuiSheetDialogService(
+            TUI_DIALOGS,
+            TuiSheetDialogComponent,
+            inject(TUI_SHEET_DIALOG_OPTIONS),
+        ),
 })
-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,
-    };
-}
+export class TuiSheetDialogService extends TuiPopoverService<
+    TuiSheetDialogOptions<any>
+> {}

projects/addon-mobile/const/mobile-alert-options.ts

@@ -7,12 +7,12 @@ const MOBILE_ALERT_OPTIONS: TuiMobileAlertOptions = {
 
 export type TuiMobileAlertOptions = Omit<
     TuiDialogOptions<unknown>,
-    'data' | 'dismissible' | 'header' | 'label' | 'required'
+    'appearance' | 'data' | 'dismissible' | 'header' | 'label' | 'required'
 >;
 
 export type TuiIosAlertOptions = Omit<
     TuiDialogOptions<unknown>,
-    'data' | 'header' | 'label' | 'required'
+    'appearance' | 'data' | 'header' | 'label' | 'required'
 >;
 
 export const TUI_IOS_ALERT_OPTIONS: TuiIosAlertOptions = {

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

@@ -1,13 +1,11 @@
-import {inject, Injectable} from '@angular/core';
+import {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 TuiPopoverService<unknown> {
-    protected readonly items$ = inject(TUI_DIALOGS);
-    protected readonly options = {};
-    protected readonly component = new PolymorpheusComponent(TuiPreviewDialogComponent);
-}
+@Injectable({
+    providedIn: 'root',
+    useFactory: () => new TuiPreviewDialogService(TUI_DIALOGS, TuiPreviewDialogComponent),
+})
+export class TuiPreviewDialogService extends TuiPopoverService<unknown> {}

projects/cdk/services/popover.service.ts

@@ -1,4 +1,4 @@
-import {inject, Injectable} from '@angular/core';
+import {inject, Injectable, Provider, ProviderToken, Type} from '@angular/core';
 import {TuiContext} from '@taiga-ui/cdk/interfaces';
 import {PolymorpheusComponent, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {BehaviorSubject, Observable, Observer} from 'rxjs';
@@ -20,32 +20,36 @@ export type TuiPopover<T, O> = T &
 @Injectable()
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export abstract class TuiPopoverService<T, K = void> {
-    protected abstract readonly component: PolymorpheusComponent<any>;
-    protected abstract readonly options: T;
-    protected abstract readonly items$: BehaviorSubject<
-        ReadonlyArray<TuiPopover<T, any>>
-    >;
-
+    private readonly component: PolymorpheusComponent<any>;
+    private readonly items$: BehaviorSubject<ReadonlyArray<TuiPopover<T, any>>>;
     private readonly id = inject(TuiIdService);
 
+    constructor(
+        items: ProviderToken<BehaviorSubject<ReadonlyArray<TuiPopover<T, any>>>>,
+        component: Type<any>,
+        protected readonly options: T = {} as T,
+    ) {
+        this.component = new PolymorpheusComponent(component);
+        this.items$ = inject(items);
+    }
+
     open<G = void>(
         content: PolymorpheusContent<T & TuiPopoverContext<K extends void ? G : K>>,
         options: Partial<T> = {},
     ): Observable<K extends void ? G : K> {
         return new Observable(observer => {
-            const completeWith = (result: K extends void ? G : K): void => {
-                observer.next(result);
-                observer.complete();
-            };
             const item = {
                 ...this.options,
                 ...options,
                 content,
-                completeWith,
                 $implicit: observer,
                 component: this.component,
                 createdAt: Date.now(),
                 id: this.id.generate(),
+                completeWith: (result: K extends void ? G : K): void => {
+                    observer.next(result);
+                    observer.complete();
+                },
             };
 
             this.items$.next([...this.items$.value, item]);
@@ -56,3 +60,10 @@ export abstract class TuiPopoverService<T, K = void> {
         });
     }
 }
+
+export function tuiAsPopover(useExisting: Type<TuiPopoverService<any>>): Provider {
+    return {
+        provide: TuiPopoverService,
+        useExisting,
+    };
+}

projects/core/components/dialog/dialog.component.ts

@@ -13,14 +13,12 @@ import {
     TuiDialog,
 } from '@taiga-ui/cdk';
 import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations';
-import {TuiDialogOptions} from '@taiga-ui/core/interfaces';
 import {
     TUI_ANIMATIONS_SPEED,
     TUI_CLOSE_WORD,
     TUI_COMMON_ICONS,
     TuiCommonIcons,
 } from '@taiga-ui/core/tokens';
-import {TuiDialogSize} from '@taiga-ui/core/types';
 import {tuiGetDuration} from '@taiga-ui/core/utils';
 import {POLYMORPHEUS_CONTEXT, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {
@@ -35,6 +33,7 @@ import {
     takeUntil,
 } from 'rxjs';
 
+import {TuiDialogOptions, TuiDialogSize} from './dialog.interfaces';
 import {TUI_DIALOGS_CLOSE} from './dialog.tokens';
 import {TuiDialogCloseService} from './dialog-close.service';
 

projects/core/components/dialog/dialog.directive.ts

@@ -1,18 +1,13 @@
 import {Directive} from '@angular/core';
-import {TuiPopoverDirective, TuiPopoverService} from '@taiga-ui/cdk';
-import {TuiDialogOptions} from '@taiga-ui/core/interfaces';
+import {tuiAsPopover, TuiPopoverDirective} from '@taiga-ui/cdk';
 
+import {TuiDialogOptions} from './dialog.interfaces';
 import {TuiDialogService} from './dialog.service';
 
 @Directive({
     selector: 'ng-template[tuiDialog]',
     inputs: ['options: tuiDialogOptions', 'open: tuiDialog'],
     outputs: ['openChange: tuiDialogChange'],
-    providers: [
-        {
-            provide: TuiPopoverService,
-            useExisting: TuiDialogService,
-        },
-    ],
+    providers: [tuiAsPopover(TuiDialogService)],
 })
 export class TuiDialogDirective<T> extends TuiPopoverDirective<TuiDialogOptions<T>> {}

projects/core/interfaces/dialog-options.ts → projects/core/components/dialog/dialog.interfaces.ts

@@ -1,11 +1,14 @@
-import {TuiDialog} from '@taiga-ui/cdk';
-import {TuiDialogSize} from '@taiga-ui/core/types';
+import {TuiDialog, TuiPopoverContext} from '@taiga-ui/cdk';
+import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
 
+export type TuiDialogSize = TuiSizeL | TuiSizeS | 'auto' | 'fullscreen' | 'page';
+
 /**
  * Options for a dialog
  *
+ * appearance - data-appearance attribute of the dialog ('' by default)
  * size - size of the dialog ('m' by default)
  * required - closing dialog throws (false by default)
  * closeable - show close button (true by default)
@@ -14,9 +17,8 @@ import {Observable} from 'rxjs';
  * header - content above title ('' by default)
  * data - arbitrary data for dialog (undefined by default)
  */
-export interface TuiDialogOptions<I> {
-    // TODO: change type in v4.0 ('' by default)
-    readonly appearance?: string;
+export interface TuiDialogOptions<I = undefined> {
+    readonly appearance: string;
     readonly closeable: Observable<boolean> | boolean;
     readonly data: I;
     readonly dismissible: Observable<boolean> | boolean;
@@ -25,3 +27,7 @@ export interface TuiDialogOptions<I> {
     readonly required: boolean;
     readonly size: TuiDialogSize;
 }
+
+export interface TuiDialogContext<O = void, I = undefined>
+    extends TuiPopoverContext<O>,
+        TuiDialogOptions<I> {}

projects/core/components/dialog/dialog.service.ts

@@ -1,19 +1,13 @@
 import {inject, Injectable} from '@angular/core';
 import {TuiPopoverService} from '@taiga-ui/cdk';
-import type {TuiDialogOptions} from '@taiga-ui/core/interfaces';
-import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
 
 import {TuiDialogComponent} from './dialog.component';
+import {TuiDialogOptions} from './dialog.interfaces';
 import {TUI_DIALOG_OPTIONS, TUI_DIALOGS} from './dialog.tokens';
 
 @Injectable({
     providedIn: 'root',
+    useFactory: () =>
+        new TuiDialogService(TUI_DIALOGS, TuiDialogComponent, inject(TUI_DIALOG_OPTIONS)),
 })
-export class TuiDialogService extends TuiPopoverService<TuiDialogOptions<any>> {
-    protected readonly items$ = inject(TUI_DIALOGS);
-    protected readonly component = new PolymorpheusComponent(TuiDialogComponent);
-    protected readonly options: TuiDialogOptions<any> = {
-        ...inject(TUI_DIALOG_OPTIONS),
-        data: undefined,
-    };
-}
+export class TuiDialogService extends TuiPopoverService<TuiDialogOptions<any>> {}