refactor(addon-mobile): drop TuiMobileCalendarModule and `TuiMobile…

…CalendarDialogModule` (#7226)
taiga-family · May 10, 2024 · 318026f · 318026f
1 parent 68d4514
commit 318026f
Show file tree

Hide file tree

Showing 32 changed files with 226 additions and 336 deletions.
diff --git a/projects/addon-mobile/components/mobile-calendar-dialog/index.ts b/projects/addon-mobile/components/mobile-calendar-dialog/index.ts
@@ -1,2 +1 @@
 export * from './mobile-calendar-dialog.component';
-export * from './mobile-calendar-dialog.module';
diff --git a/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.component.ts b/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.component.ts
@@ -1,12 +1,15 @@
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {TuiMobileCalendarComponent} from '@taiga-ui/addon-mobile/components/mobile-calendar';
 import type {TuiBooleanHandler, TuiDay, TuiDayRange} from '@taiga-ui/cdk';
 import {TUI_FALSE_HANDLER, TUI_FIRST_DAY, TUI_LAST_DAY} from '@taiga-ui/cdk';
 import type {TuiDialogContext} from '@taiga-ui/core';
 import type {TuiMobileCalendarData} from '@taiga-ui/kit';
 import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus';
 
 @Component({
+    standalone: true,
     selector: 'tui-mobile-calendar-dialog',
+    imports: [TuiMobileCalendarComponent],
     templateUrl: './mobile-calendar-dialog.template.html',
     styleUrls: ['./mobile-calendar-dialog.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.module.ts b/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.module.ts
diff --git a/projects/addon-mobile/components/mobile-calendar/index.ts b/projects/addon-mobile/components/mobile-calendar/index.ts
@@ -1,5 +1,4 @@
 export * from './mobile-calendar.component';
 export * from './mobile-calendar.const';
-export * from './mobile-calendar.module';
 export * from './mobile-calendar.providers';
 export * from './mobile-calendar.strategy';
diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts
@@ -1,5 +1,9 @@
-import type {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
-import {DOCUMENT} from '@angular/common';
+import {
+    CdkFixedSizeVirtualScroll,
+    CdkVirtualForOf,
+    CdkVirtualScrollViewport,
+} from '@angular/cdk/scrolling';
+import {AsyncPipe, DOCUMENT, NgForOf, NgIf} from '@angular/common';
 import type {AfterViewInit} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -13,6 +17,8 @@ import {
     ViewChild,
 } from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {TuiRippleModule, TuiTouchableModule} from '@taiga-ui/addon-mobile/directives';
+import {TuiPrimitiveCalendarMobileModule} from '@taiga-ui/addon-mobile/internal';
 import type {TuiBooleanHandler, TuiTypedMapper} from '@taiga-ui/cdk';
 import {
     MONTHS_IN_YEAR,
@@ -23,6 +29,7 @@ import {
     TUI_LAST_DAY,
     TuiDay,
     TuiDayRange,
+    TuiMapperPipe,
     TuiMonth,
     tuiTypedFromEvent,
     tuiZonefree,
@@ -32,7 +39,11 @@ import {
     TUI_CLOSE_WORD,
     TUI_COMMON_ICONS,
     TUI_SHORT_WEEK_DAYS,
+    TuiButtonDirective,
     tuiGetDuration,
+    TuiLinkDirective,
+    TuiMonthPipeModule,
+    TuiOrderWeekDaysPipeModule,
 } from '@taiga-ui/core';
 import {
     TUI_CANCEL_WORD,
@@ -68,7 +79,24 @@ import {
 } from './mobile-calendar.providers';
 
 @Component({
+    standalone: true,
     selector: 'tui-mobile-calendar',
+    imports: [
+        TuiButtonDirective,
+        AsyncPipe,
+        TuiRippleModule,
+        TuiLinkDirective,
+        TuiTouchableModule,
+        CdkFixedSizeVirtualScroll,
+        CdkVirtualScrollViewport,
+        CdkVirtualForOf,
+        TuiOrderWeekDaysPipeModule,
+        TuiPrimitiveCalendarMobileModule,
+        TuiMonthPipeModule,
+        NgForOf,
+        NgIf,
+        TuiMapperPipe,
+    ],
     templateUrl: './mobile-calendar.template.html',
     styleUrls: ['./mobile-calendar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.module.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.module.ts
diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts
@@ -719,4 +719,14 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
             },
         ],
     },
+    {
+        from: {
+            name: 'TuiMobileCalendarModule',
+            moduleSpecifier: '@taiga-ui/addon-mobile',
+        },
+        to: {
+            name: 'TuiMobileCalendarComponent',
+            moduleSpecifier: '@taiga-ui/addon-mobile',
+        },
+    },
 ];
diff --git a/projects/demo-cypress/src/tests/mobile-calendar.cy.ts b/projects/demo-cypress/src/tests/mobile-calendar.cy.ts
@@ -1,8 +1,5 @@
 import {Component, EventEmitter, ViewChild} from '@angular/core';
-import {
-    TuiMobileCalendarComponent,
-    TuiMobileCalendarModule,
-} from '@taiga-ui/addon-mobile';
+import {TuiMobileCalendarComponent} from '@taiga-ui/addon-mobile';
 import {
     TUI_FALSE_HANDLER,
     TUI_FIRST_DAY,
@@ -53,7 +50,7 @@ describe('Mobile calendar', () => {
 
     it('the back button emits a cancel event', () => {
         cy.mount(TestComponent, {
-            imports: [TuiMobileCalendarModule],
+            imports: [TuiMobileCalendarComponent],
             providers: [NG_EVENT_PLUGINS],
             componentProperties: {
                 onCancel: createOutputSpy('onCancelSpy'),
@@ -66,7 +63,7 @@ describe('Mobile calendar', () => {
 
     it('single === true', () => {
         cy.mount(TestComponent, {
-            imports: [TuiMobileCalendarModule],
+            imports: [TuiMobileCalendarComponent],
         });
 
         cy.get('[automation-id="tui-mobile-calendar__label"]').should(
@@ -77,7 +74,7 @@ describe('Mobile calendar', () => {
 
     it('single === false', () => {
         cy.mount(TestComponent, {
-            imports: [TuiMobileCalendarModule],
+            imports: [TuiMobileCalendarComponent],
             componentProperties: {
                 single: false,
             },
@@ -92,7 +89,7 @@ describe('Mobile calendar', () => {
     describe('when the done button emits', () => {
         it('confirm event with selected day', () => {
             cy.mount(TestComponent, {
-                imports: [TuiMobileCalendarModule],
+                imports: [TuiMobileCalendarComponent],
                 componentProperties: {
                     onConfirm: createOutputSpy('onConfirmSpy'),
                 },
@@ -107,7 +104,7 @@ describe('Mobile calendar', () => {
 
         it('confirm event at selected interval', () => {
             cy.mount(TestComponent, {
-                imports: [TuiMobileCalendarModule],
+                imports: [TuiMobileCalendarComponent],
                 componentProperties: {
                     single: false,
                     onConfirm: createOutputSpy('onConfirmSpy'),
@@ -126,7 +123,7 @@ describe('Mobile calendar', () => {
 
         it('year selection scrolls through months', () => {
             cy.mount(TestComponent, {
-                imports: [TuiMobileCalendarModule],
+                imports: [TuiMobileCalendarComponent],
                 componentProperties: {
                     onConfirm: createOutputSpy('onConfirmSpy'),
                 },

diff --git a/projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts
@@ -7,11 +7,9 @@ test.describe('MobileCalendar', () => {
     test('works', async ({page}) => {
         await tuiGoto(page, 'components/mobile-calendar');
         const example = new TuiDocumentationPagePO(page).getExample('#dropdown');
-        const chooseDateButton = example
-            .locator('tui-mobile-calendar-example-1 button')
-            .first();
 
-        await chooseDateButton.click();
+        await example.locator('button:has-text("Choose a date")').click();
+
         await page.waitForTimeout(100);
 
         await expect(page).toHaveScreenshot('01-mobile-calendar.png');

diff --git a/projects/demo-playwright/tests/example.spec.ts b/projects/demo-playwright/tests/example.spec.ts
@@ -10,7 +10,9 @@ test('has title', async ({page}) => {
 test('debug screenshot', async ({page}) => {
     await tuiGoto(page, '/components/mobile-calendar');
 
-    await page.locator('tui-mobile-calendar-example-1 button').click();
+    await page
+        .locator('[heading="Custom dropdown"] button:has-text("Choose a date")')
+        .click();
 
     await expect(page.locator('tui-dialog tui-mobile-calendar')).toHaveScreenshot(
         'test-playwright-screenshot.png',

diff --git a/projects/demo-playwright/tests/nested-folder/nested-folder-example.spec.ts b/projects/demo-playwright/tests/nested-folder/nested-folder-example.spec.ts
@@ -4,7 +4,7 @@ import {expect, test} from '@playwright/test';
 test('screen inside nested folder', async ({page}) => {
     await tuiGoto(page, '/components/mobile-calendar');
 
-    await expect(page.locator('tui-mobile-calendar-example-1')).toHaveScreenshot(
-        'button-screen.png',
-    );
+    await expect(
+        page.locator('[heading="Custom dropdown"] .t-content').first(),
+    ).toHaveScreenshot('button-screen.png');
 });
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -608,10 +608,8 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.MobileCalendar,
-        loadChildren: async () =>
-            (await import('../components/mobile-calendar/mobile-calendar.module'))
-                .ExampleTuiMobileCalendarModule,
         title: 'MobileCalendar',
+        loadComponent: async () => import('../components/mobile-calendar'),
     }),
     route({
         path: DemoRoute.PullToRefresh,

diff --git a/projects/demo/src/modules/components/input-date-multi/input-date-multi.module.ts b/projects/demo/src/modules/components/input-date-multi/input-date-multi.module.ts
@@ -2,14 +2,14 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {TuiAddonDocModule, tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {TuiMobileCalendarDialogModule} from '@taiga-ui/addon-mobile';
+import {TuiMobileCalendarDialogComponent} from '@taiga-ui/addon-mobile';
 import {
     TuiDropdownModule,
     TuiHintModule,
     TuiLinkDirective,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiInputDateMultiModule} from '@taiga-ui/kit';
+import {TUI_MOBILE_CALENDAR, TuiInputDateMultiModule} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {TuiInputDateMultiExample1} from './examples/1';
@@ -24,12 +24,17 @@ import {ExampleTuiInputDateMultiComponent} from './input-date-multi.component';
         TuiAddonDocModule,
         ReactiveFormsModule,
         TuiInputDateMultiModule,
-        TuiMobileCalendarDialogModule,
         TuiTextfieldControllerModule,
         InheritedDocumentationModule,
         tuiGetDocModules(ExampleTuiInputDateMultiComponent),
     ],
     declarations: [ExampleTuiInputDateMultiComponent, TuiInputDateMultiExample1],
+    providers: [
+        {
+            provide: TUI_MOBILE_CALENDAR,
+            useValue: TuiMobileCalendarDialogComponent,
+        },
+    ],
     exports: [ExampleTuiInputDateMultiComponent],
 })
 export class ExampleTuiInputDateMultiModule {}
diff --git a/projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html b/projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html
@@ -114,8 +114,8 @@
             >
                 mobile calendar
             </a>
-            , add imports of
-            <code>TuiMobileCalendarDialogModule</code>
+            , provide
+            <code>TUI_MOBILE_CALENDAR</code>
             and
             <code>TuiDialogModule</code>
             into your root module. Also, check that you did not forget about

diff --git a/projects/demo/src/modules/components/input-date-range/input-date-range.module.ts b/projects/demo/src/modules/components/input-date-range/input-date-range.module.ts
@@ -3,15 +3,19 @@ import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiMobileCalendarDialogModule} from '@taiga-ui/addon-mobile';
+import {TuiMobileCalendarDialogComponent} from '@taiga-ui/addon-mobile';
 import {
     TuiButtonDirective,
     TuiHintModule,
     TuiLinkDirective,
     TuiNotificationModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiInputDateRangeModule, TuiUnfinishedValidatorModule} from '@taiga-ui/kit';
+import {
+    TUI_MOBILE_CALENDAR,
+    TuiInputDateRangeModule,
+    TuiUnfinishedValidatorModule,
+} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {TuiInputDateRangeExample1} from './examples/1';
@@ -29,7 +33,6 @@ import {ExampleTuiInputDateRangeComponent} from './input-date-range.component';
         InheritedDocumentationModule,
         TuiButtonDirective,
         TuiLinkDirective,
-        TuiMobileCalendarDialogModule,
         TuiTextfieldControllerModule,
         TuiHintModule,
         TuiNotificationModule,
@@ -45,6 +48,12 @@ import {ExampleTuiInputDateRangeComponent} from './input-date-range.component';
         TuiInputDateRangeExample4,
         TuiInputDateRangeExample5,
     ],
+    providers: [
+        {
+            provide: TUI_MOBILE_CALENDAR,
+            useValue: TuiMobileCalendarDialogComponent,
+        },
+    ],
     exports: [ExampleTuiInputDateRangeComponent],
 })
 export class ExampleTuiInputDateRangeModule {}
diff --git a/projects/demo/src/modules/components/input-date-range/input-date-range.template.html b/projects/demo/src/modules/components/input-date-range/input-date-range.template.html
@@ -262,8 +262,8 @@ <h3>DI-tokens for input-configurations:</h3>
             >
                 mobile calendar
             </a>
-            , add imports of
-            <code>TuiMobileCalendarDialogModule</code>
+            , provide
+            <code>TUI_MOBILE_CALENDAR</code>
             and
             <code>TuiDialogModule</code>
             into your root module. Also, check that you did not forget about

diff --git a/projects/demo/src/modules/components/input-date/index.html b/projects/demo/src/modules/components/input-date/index.html
@@ -232,8 +232,8 @@ <h3>DI-tokens for input-configurations:</h3>
             >
                 mobile calendar
             </a>
-            , add imports of
-            <code>TuiMobileCalendarDialogModule</code>
+            , provide
+            <code>TUI_MOBILE_CALENDAR</code>
             and
             <code>TuiDialogModule</code>
             into your root module. Also, check that you did not forget about
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './mobile-calendar-dialog.component';
		export * from './mobile-calendar-dialog.module';