From ef72d3d00f1c462846b7fee610ad5c01961c3558 Mon Sep 17 00:00:00 2001 From: German Panov Date: Tue, 16 Apr 2024 16:40:16 +0300 Subject: [PATCH] chore(demo): migrate documentation page `CalendarMonth` to standalone (#7242) --- projects/demo/src/modules/app/app.routes.ts | 12 ++--- .../calendar-month/calendar-month.module.ts | 24 ---------- .../calendar-month/examples/1/index.ts | 6 ++- .../calendar-month/examples/2/index.ts | 8 ++-- .../import/{import-module.md => import.md} | 0 .../{insert-template.md => template.md} | 0 ...alendar-month.template.html => index.html} | 46 +++---------------- .../{calendar-month.component.ts => index.ts} | 25 ++++------ 8 files changed, 29 insertions(+), 92 deletions(-) delete mode 100644 projects/demo/src/modules/components/calendar-month/calendar-month.module.ts rename projects/demo/src/modules/components/calendar-month/examples/import/{import-module.md => import.md} (100%) rename projects/demo/src/modules/components/calendar-month/examples/import/{insert-template.md => template.md} (100%) rename projects/demo/src/modules/components/calendar-month/{calendar-month.template.html => index.html} (76%) rename projects/demo/src/modules/components/calendar-month/{calendar-month.component.ts => index.ts} (67%) diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 5a95e18da34a..e6f2b63dc65a 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -754,15 +754,11 @@ export const ROUTES: Routes = [ title: 'PullToRefresh', }, }, - { + route({ path: DemoRoute.CalendarMonth, - loadChildren: async () => - (await import('../components/calendar-month/calendar-month.module')) - .ExampleTuiCalendarMonthModule, - data: { - title: 'CalendarMonth', - }, - }, + title: 'CalendarMonth', + loadComponent: async () => import('../components/calendar-month'), + }), { path: DemoRoute.MultiSelect, loadChildren: async () => diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.module.ts b/projects/demo/src/modules/components/calendar-month/calendar-month.module.ts deleted file mode 100644 index c418fe395414..000000000000 --- a/projects/demo/src/modules/components/calendar-month/calendar-month.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiLinkDirective} from '@taiga-ui/core'; -import {TuiCalendarMonthModule} from '@taiga-ui/kit'; - -import {ExampleTuiCalendarMonthComponent} from './calendar-month.component'; -import {TuiMonthExample1} from './examples/1'; -import {TuiMonthExample2} from './examples/2'; - -@NgModule({ - imports: [ - CommonModule, - RouterModule, - TuiLinkDirective, - TuiCalendarMonthModule, - TuiAddonDocModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCalendarMonthComponent)), - ], - declarations: [ExampleTuiCalendarMonthComponent, TuiMonthExample1, TuiMonthExample2], - exports: [ExampleTuiCalendarMonthComponent], -}) -export class ExampleTuiCalendarMonthModule {} diff --git a/projects/demo/src/modules/components/calendar-month/examples/1/index.ts b/projects/demo/src/modules/components/calendar-month/examples/1/index.ts index 3892dda64090..d919c4766cdf 100644 --- a/projects/demo/src/modules/components/calendar-month/examples/1/index.ts +++ b/projects/demo/src/modules/components/calendar-month/examples/1/index.ts @@ -2,14 +2,16 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import type {TuiMonth} from '@taiga-ui/cdk'; +import {TuiCalendarMonthModule} from '@taiga-ui/kit'; @Component({ - selector: 'tui-calendar-month-example-1', + standalone: true, + imports: [TuiCalendarMonthModule], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiMonthExample1 { +export default class ExampleComponent { protected value: TuiMonth | null = null; protected hoveredMonth: TuiMonth | null = null; diff --git a/projects/demo/src/modules/components/calendar-month/examples/2/index.ts b/projects/demo/src/modules/components/calendar-month/examples/2/index.ts index 229e4b1a5daf..1502a1ab922d 100644 --- a/projects/demo/src/modules/components/calendar-month/examples/2/index.ts +++ b/projects/demo/src/modules/components/calendar-month/examples/2/index.ts @@ -2,17 +2,19 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiMonth, TuiMonthRange} from '@taiga-ui/cdk'; +import {TuiCalendarMonthModule} from '@taiga-ui/kit'; @Component({ - selector: 'tui-calendar-month-example-2', + standalone: true, + imports: [TuiCalendarMonthModule], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiMonthExample2 { +export default class ExampleComponent { protected value: TuiMonthRange | null = null; - protected max = new TuiMonth(2021, 7); + protected max = new TuiMonth(2024, 11); protected min = new TuiMonth(2019, 7); protected onMonthClick(month: TuiMonth): void { diff --git a/projects/demo/src/modules/components/calendar-month/examples/import/import-module.md b/projects/demo/src/modules/components/calendar-month/examples/import/import.md similarity index 100% rename from projects/demo/src/modules/components/calendar-month/examples/import/import-module.md rename to projects/demo/src/modules/components/calendar-month/examples/import/import.md diff --git a/projects/demo/src/modules/components/calendar-month/examples/import/insert-template.md b/projects/demo/src/modules/components/calendar-month/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/calendar-month/examples/import/insert-template.md rename to projects/demo/src/modules/components/calendar-month/examples/import/template.md diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.template.html b/projects/demo/src/modules/components/calendar-month/index.html similarity index 76% rename from projects/demo/src/modules/components/calendar-month/calendar-month.template.html rename to projects/demo/src/modules/components/calendar-month/index.html index 3533e7468360..3d04e9a71d73 100644 --- a/projects/demo/src/modules/components/calendar-month/calendar-month.template.html +++ b/projects/demo/src/modules/components/calendar-month/index.html @@ -15,20 +15,12 @@

- - - - - - + *ngFor="let example of examples; let index = index" + [component]="index + 1 | tuiComponent" + [content]="index + 1 | tuiExample: 'html,ts'" + [heading]="example" + [id]="example | tuiKebab" + /> @@ -101,29 +93,5 @@ - -
    -
  1. -

    - Import - TuiCalendarMonthModule - into a module where you want to use our component -

    - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. -
- + diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts b/projects/demo/src/modules/components/calendar-month/index.ts similarity index 67% rename from projects/demo/src/modules/components/calendar-month/calendar-month.component.ts rename to projects/demo/src/modules/components/calendar-month/index.ts index 2aa35bdd54ce..85c4b209bb56 100644 --- a/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts +++ b/projects/demo/src/modules/components/calendar-month/index.ts @@ -1,6 +1,7 @@ import {Component} from '@angular/core'; +import {RouterModule} from '@angular/router'; import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; +import {TuiDemoModule} from '@demo/utils'; import type {TuiBooleanHandler} from '@taiga-ui/cdk'; import { TUI_FALSE_HANDLER, @@ -11,25 +12,17 @@ import { TuiMonthRange, TuiYear, } from '@taiga-ui/cdk'; +import {TuiLinkDirective} from '@taiga-ui/core'; +import {TuiCalendarMonthModule} from '@taiga-ui/kit'; @Component({ - selector: 'example-tui-calendar-month', - templateUrl: './calendar-month.template.html', + standalone: true, + imports: [TuiDemoModule, TuiCalendarMonthModule, TuiLinkDirective, RouterModule], + templateUrl: './index.html', changeDetection, }) -export class ExampleTuiCalendarMonthComponent { - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - }; +export default class ExampleComponent { + protected readonly examples = ['Basic', 'Range']; protected readonly minVariants = [ TUI_FIRST_DAY,