feat(kit): add routable dialog for eager and lazy cases

package.json

@@ -115,6 +115,7 @@
         "rollup": "~2.79.1",
         "standard-version": "^8.0.2",
         "ts-loader": "^9.4.2",
+        "ts-mockito": "^2.6.1",
         "ts-node": "~10.9.1",
         "typescript": "~4.3.5",
         "wait-on": "^6.0.1",

projects/demo-integrations/cypress/support/commands/basic.ts

@@ -1,3 +1,4 @@
+import {tuiClickOutside} from '@demo-integrations/support/helpers/click-outside';
 import {
     tuiFindDocExample,
     tuiGetDocExample,
@@ -32,6 +33,7 @@ declare global {
             tuiSetLanguage: typeof tuiSetLanguage;
             tuiSetNightMode: typeof tuiSetNightMode;
             tuiWaitCodeHighlight: typeof tuiWaitCodeHighlight;
+            tuiClickOutside: typeof tuiClickOutside;
 
             tuiTab(direction: 'backward' | 'forward'): Chainable;
             tuiGetByExampleId(): Chainable;
@@ -74,6 +76,7 @@ Cypress.Commands.add(`tuiShow`, tuiShow);
 Cypress.Commands.add(`tuiFindByExampleId`, {prevSubject: true}, <S>(subject: S) =>
     tuiFindDocExample<S>(subject),
 );
+Cypress.Commands.add(`tuiClickOutside`, tuiClickOutside);
 Cypress.Commands.add(
     `tuiWaitBeforeScreenshot`,
     {prevSubject: [`optional`]},

projects/demo-integrations/cypress/support/helpers/click-outside.ts

@@ -0,0 +1,3 @@
+export function tuiClickOutside(): void {
+    cy.get(`body`).click(0, 0);
+}

projects/demo-integrations/cypress/tests/kit/routable/lazy-routable-dialog.cy.ts

@@ -0,0 +1,30 @@
+describe(`LazyRoutableDialog`, () => {
+    beforeEach(() => {
+        cy.viewport(`macbook-13`);
+    });
+
+    it(`should open lazy loaded dialog by click and then close by outside click`, () => {
+        cy.tuiVisit(`/dialog/lazy-routable`);
+
+        cy.get(`tui-page-1-example button`).click();
+        cy.tuiWaitKitDialog();
+        cy.url().should(`include`, `/dialog/lazy-routable/path/to/dialog`);
+
+        cy.tuiClickOutside();
+        cy.url()
+            .should(`include`, `/dialog/lazy-routable`)
+            .should(`not.include`, `path/to/dialog`);
+    });
+
+    it(`should open lazy loaded dialog by direct link and then close by outside click`, () => {
+        cy.tuiVisit(`/dialog/lazy-routable/path/to/dialog`);
+
+        cy.tuiWaitKitDialog();
+        cy.url().should(`include`, `/dialog/lazy-routable/path/to/dialog`);
+
+        cy.tuiClickOutside();
+        cy.url()
+            .should(`include`, `/dialog/lazy-routable`)
+            .should(`not.include`, `path/to/dialog`);
+    });
+});

projects/demo-integrations/cypress/tests/kit/routable/routable-dialog.cy.ts

@@ -0,0 +1,30 @@
+describe(`RoutableDialog`, () => {
+    beforeEach(() => {
+        cy.viewport(`macbook-13`);
+    });
+
+    it(`should open dialog by click and then close by outside click`, () => {
+        cy.tuiVisit(`/dialog/routable`);
+
+        cy.get(`tui-page-1-example button`).click();
+        cy.tuiWaitKitDialog();
+        cy.url().should(`include`, `/dialog/routable/path/to/dialog`);
+
+        cy.tuiClickOutside();
+        cy.url()
+            .should(`include`, `/dialog/routable`)
+            .should(`not.include`, `path/to/dialog`);
+    });
+
+    it(`should open dialog by direct link and then close by outside click`, () => {
+        cy.tuiVisit(`/dialog/routable/path/to/dialog`);
+
+        cy.tuiWaitKitDialog();
+        cy.url().should(`include`, `/dialog/routable/path/to/dialog`);
+
+        cy.tuiClickOutside();
+        cy.url()
+            .should(`include`, `/dialog/routable`)
+            .should(`not.include`, `path/to/dialog`);
+    });
+});

projects/demo/src/modules/app/app.routes.ts

@@ -113,11 +113,29 @@ export const ROUTES = [
         },
     },
     {
-        path: `dialogs`,
+        path: `dialog/custom`,
         loadChildren: async () =>
             (await import(`../customization/dialogs/dialogs.module`)).DialogsModule,
         data: {
-            title: `Dialogs`,
+            title: `Custom`,
+        },
+    },
+    {
+        path: `dialog/routable`,
+        loadChildren: async () =>
+            (await import(`../customization/routable/eager/routable-dialog.module`))
+                .RoutableDialogModule,
+        data: {
+            title: `Routable`,
+        },
+    },
+    {
+        path: `dialog/lazy-routable`,
+        loadChildren: async () =>
+            (await import(`../customization/routable/lazy/lazy-routable-dialog.module`))
+                .LazyRoutableDialogModule,
+        data: {
+            title: `LazyRoutable`,
         },
     },
     {

projects/demo/src/modules/app/pages.ts

@@ -1044,9 +1044,27 @@ export const pages: TuiDocPages = [
     },
     {
         section: $localize`Customization`,
-        title: `Dialogs`,
-        keywords: `dialog, modal, popup, theme, custom, style`,
-        route: `dialogs`,
+        title: `Dialog`,
+        subPages: [
+            {
+                section: $localize`Customization`,
+                title: `Custom`,
+                keywords: `dialog, modal, popup, theme, custom, style`,
+                route: `/dialog/custom`,
+            },
+            {
+                section: $localize`Customization`,
+                title: `Routable`,
+                keywords: `dialog, modal, navigation, route, eager`,
+                route: `/dialog/routable`,
+            },
+            {
+                section: $localize`Customization`,
+                title: `LazyRoutable`,
+                keywords: `dialog, modal, navigation, route, lazy`,
+                route: `/dialog/lazy-routable`,
+            },
+        ],
     },
     {
         section: $localize`Customization`,

projects/demo/src/modules/customization/routable/eager/examples/1/dialog-content.component.ts

@@ -0,0 +1,8 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+    selector: 'tui-example-dialog-content',
+    template: 'Eager loaded dialog content',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogContentComponent {}

projects/demo/src/modules/customization/routable/eager/examples/1/page-1.component.html

@@ -0,0 +1,10 @@
+<button
+    tuiButton
+    routerLink="path/to/dialog"
+>
+    Open dialog
+</button>
+
+<!-- step 1: add router-outlet to the page -->
+<!-- Needed for opening a dialog over of the page-->
+<router-outlet></router-outlet>

projects/demo/src/modules/customization/routable/eager/examples/1/page-1.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-page-1-example',
+    templateUrl: './page-1.component.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiPage1ExampleComponent {}

projects/demo/src/modules/customization/routable/eager/examples/1/page-1.module.ts

@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {TuiButtonModule} from '@taiga-ui/core';
+import {tuiGenerateDialogableRoute, TuiRoutableDialogModule} from '@taiga-ui/kit';
+
+import {DialogContentComponent} from './dialog-content.component';
+import {TuiPage1ExampleComponent} from './page-1.component';
+
+@NgModule({
+    imports: [
+        // step 2: add TuiRoutableDialogModule
+        TuiRoutableDialogModule,
+        RouterModule.forChild([
+            {
+                path: ``,
+                component: TuiPage1ExampleComponent,
+                children: [
+                    // step 3: use tuiGenerateDialogableRoute inside children property
+                    tuiGenerateDialogableRoute(DialogContentComponent, {
+                        path: `path/to/dialog`,
+                    }),
+                ],
+            },
+        ]),
+        TuiButtonModule,
+    ],
+    declarations: [TuiPage1ExampleComponent, DialogContentComponent],
+    exports: [TuiPage1ExampleComponent],
+})
+export class TuiPage1ExampleModule {}

projects/demo/src/modules/customization/routable/eager/examples/setup/add-router-outlet.md

@@ -0,0 +1,3 @@
+```html
+<router-outlet></router-outlet>
+```

projects/demo/src/modules/customization/routable/eager/examples/setup/import-module.md

@@ -0,0 +1,14 @@
+```ts
+import {TuiRoutableDialogModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiRoutableDialogModule,
+  ],
+  // ...
+})
+export class MyPageModule {}
+```

projects/demo/src/modules/customization/routable/eager/examples/setup/use-route-generator.md

@@ -0,0 +1,20 @@
+```ts
+import {TuiRoutableDialogModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    RouterModule.forChild([
+      {
+        path: ``,
+        component: MyPageComponent,
+        children: [tuiGenerateDialogableRoute(MyDialogComponent, {path: `path/to/dialog`})],
+      },
+    ]),
+  ],
+  // ...
+})
+export class MyPageModule {}
+```

projects/demo/src/modules/customization/routable/eager/routable-dialog.component.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'routable-dialog',
+    templateUrl: './routable-dialog.template.html',
+    changeDetection,
+})
+export class RoutableDialogComponent {
+    readonly example1: TuiDocExample = {
+        'page.template.html': import('./examples/1/page-1.component.html?raw'),
+        'page.module.ts': import('./examples/1/page-1.module.ts?raw'),
+        'dialog-content.component.ts': import(
+            './examples/1/dialog-content.component.ts?raw'
+        ),
+    };
+
+    readonly addRouterOutlet = import('./examples/setup/add-router-outlet.md?raw');
+    readonly importModule = import('./examples/setup/import-module.md?raw');
+    readonly useRouteGenerator = import('./examples/setup/use-route-generator.md?raw');
+}

projects/demo/src/modules/customization/routable/eager/routable-dialog.module.ts

@@ -0,0 +1,36 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
+import {TuiButtonModule} from '@taiga-ui/core';
+
+import {RoutableDialogComponent} from './routable-dialog.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAddonDocModule,
+        RouterModule.forChild([
+            {
+                path: ``,
+                component: RoutableDialogComponent,
+                children: [
+                    {
+                        path: ``,
+                        loadChildren: async () =>
+                            (await import(`./examples/1/page-1.module`))
+                                .TuiPage1ExampleModule,
+                    },
+                    {
+                        path: `Setup`,
+                        component: RoutableDialogComponent,
+                    },
+                ],
+            },
+        ]),
+        TuiButtonModule,
+    ],
+    declarations: [RoutableDialogComponent],
+    exports: [RoutableDialogComponent],
+})
+export class RoutableDialogModule {}