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/mobile-dialog/test/mobile-dialog.component.spec.ts

@@ -1,7 +1,6 @@
 import {Component, DebugElement} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {TuiIdService} from '@taiga-ui/cdk';
 import {TuiRootModule} from '@taiga-ui/core';
 import {TuiPageObject} from '@taiga-ui/testing';
 
@@ -31,14 +30,7 @@ describe('Mobile Dialog with TUI_MOBILE_DIALOG_OPTIONS', () => {
         TestBed.configureTestingModule({
             imports: [NoopAnimationsModule, TuiRootModule, TuiMobileDialogModule],
             declarations: [TestComponent],
-            providers: [
-                tuiMobileDialogOptionsProvider({label}),
-                {
-                    provide: TuiMobileDialogService,
-                    useFactory: () =>
-                        new TuiMobileDialogService(TestBed.inject(TuiIdService)),
-                },
-            ],
+            providers: [tuiMobileDialogOptionsProvider({label})],
         });
         await TestBed.compileComponents();
         fixture = TestBed.createComponent(TestComponent);

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';
@@ -18,34 +18,37 @@ 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 +59,10 @@ export abstract class TuiPopoverService<T, K = void> {
         });
     }
 }
+
+export function tuiAsPopover(useExisting: Type<TuiPopoverService<any>>): Provider {
+    return {
+        provide: TuiPopoverService,
+        useExisting,
+    };
+}

projects/core/abstract/driver.ts

@@ -1,7 +1,6 @@
 import {ExistingProvider, Type} from '@angular/core';
 import {Observable} from 'rxjs';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 export abstract class TuiDriver extends Observable<boolean> {
     abstract readonly type: string;
 }

projects/core/abstract/position-accessor.ts

@@ -1,10 +1,9 @@
 import {ExistingProvider, FactoryProvider, Optional, SkipSelf, Type} from '@angular/core';
 import {TuiPoint} from '@taiga-ui/core/types';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 export abstract class TuiPositionAccessor {
     abstract readonly type: string;
-    abstract getPosition(rect: ClientRect): TuiPoint;
+    abstract getPosition(rect: DOMRect): TuiPoint;
 }
 
 export function tuiPositionAccessorFor(

projects/core/abstract/rect-accessor.ts

@@ -1,7 +1,6 @@
 import {ExistingProvider, FactoryProvider, SkipSelf, Type} from '@angular/core';
 
 // TODO: Rename to getBoundingClientRect to match the DOM API
-// eslint-disable-next-line @typescript-eslint/naming-convention
 export abstract class TuiRectAccessor {
     abstract readonly type: string;
     abstract getClientRect(): DOMRect;

projects/core/abstract/vehicle.ts

@@ -1,6 +1,5 @@
 import {ExistingProvider, Type} from '@angular/core';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 export abstract class TuiVehicle {
     abstract readonly type: string;
     abstract toggle(value: boolean): void;

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>> {}