diff --git a/projects/addon-mobile/components/mobile-calendar-dialog/index.ts b/projects/addon-mobile/components/mobile-calendar-dialog/index.ts index 0ffa05f02e24..e379d018bcac 100644 --- 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 index 0f7f0f2a7ed3..c83567ddea06 100644 --- 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,4 +1,5 @@ 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'; @@ -6,7 +7,9 @@ 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 deleted file mode 100644 index 4b901e645e6c..000000000000 --- a/projects/addon-mobile/components/mobile-calendar-dialog/mobile-calendar-dialog.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {NgModule} from '@angular/core'; -import {TuiMobileCalendarModule} from '@taiga-ui/addon-mobile/components/mobile-calendar'; -import {TUI_MOBILE_CALENDAR} from '@taiga-ui/kit'; - -import {TuiMobileCalendarDialogComponent} from './mobile-calendar-dialog.component'; - -@NgModule({ - imports: [TuiMobileCalendarModule], - declarations: [TuiMobileCalendarDialogComponent], - providers: [ - { - provide: TUI_MOBILE_CALENDAR, - useValue: TuiMobileCalendarDialogComponent, - }, - ], - exports: [TuiMobileCalendarDialogComponent], -}) -export class TuiMobileCalendarDialogModule {} diff --git a/projects/addon-mobile/components/mobile-calendar/index.ts b/projects/addon-mobile/components/mobile-calendar/index.ts index d97c813162a4..f1ebb070f9d0 100644 --- 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 index 2946e7dc920b..8a0cef5abc6b 100644 --- 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 deleted file mode 100644 index 08e4628d6851..000000000000 --- a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {ScrollingModule} from '@angular/cdk/scrolling'; -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {TuiRippleModule} from '@taiga-ui/addon-mobile/directives/ripple'; -import {TuiTouchableModule} from '@taiga-ui/addon-mobile/directives/touchable'; -import {TuiPrimitiveCalendarMobileModule} from '@taiga-ui/addon-mobile/internal/primitive-calendar-mobile'; -import {TuiMapperPipe} from '@taiga-ui/cdk'; -import { - TuiButtonDirective, - TuiLinkDirective, - TuiMonthPipeModule, - TuiOrderWeekDaysPipeModule, -} from '@taiga-ui/core'; - -import {TuiMobileCalendarComponent} from './mobile-calendar.component'; - -@NgModule({ - imports: [ - CommonModule, - ScrollingModule, - TuiTouchableModule, - TuiRippleModule, - TuiMapperPipe, - TuiLinkDirective, - TuiPrimitiveCalendarMobileModule, - TuiButtonDirective, - TuiMonthPipeModule, - TuiOrderWeekDaysPipeModule, - ], - declarations: [TuiMobileCalendarComponent], - exports: [TuiMobileCalendarComponent], -}) -export class TuiMobileCalendarModule {} 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 index 51c94e8d9fb3..7cbf0847a1be 100644 --- 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 index a590009f6b67..640766252a6b 100644 --- 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 index b6fed4a4b026..85a9f0ba8886 100644 --- 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 index 6f14183cd3a2..75586e9019a7 100644 --- 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 index 8b27fae8f794..424dee1f1a29 100644 --- 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 index e5fb94f74dc9..b5634918bf99 100644 --- 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 index 15a348ac8d32..b427fb125feb 100644 --- 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 index f49025382e5c..1829d4b61e16 100644 --- 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 - , add imports of - TuiMobileCalendarDialogModule + , provide + TUI_MOBILE_CALENDAR and TuiDialogModule 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 index 0121ca72dd76..1abb99a6c716 100644 --- 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,7 +3,7 @@ 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, @@ -11,7 +11,11 @@ import { 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 index a090a5535891..863b90db9da2 100644 --- 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 @@

DI-tokens for input-configurations:

> mobile calendar - , add imports of - TuiMobileCalendarDialogModule + , provide + TUI_MOBILE_CALENDAR and TuiDialogModule 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 index 58a6f655641c..5cfcb8943099 100644 --- a/projects/demo/src/modules/components/input-date/index.html +++ b/projects/demo/src/modules/components/input-date/index.html @@ -232,8 +232,8 @@

DI-tokens for input-configurations:

> mobile calendar - , add imports of - TuiMobileCalendarDialogModule + , provide + TUI_MOBILE_CALENDAR and TuiDialogModule into your root module. Also, check that you did not forget about diff --git a/projects/demo/src/modules/components/input-date/index.ts b/projects/demo/src/modules/components/input-date/index.ts index 53b251333851..ae867486808b 100644 --- a/projects/demo/src/modules/components/input-date/index.ts +++ b/projects/demo/src/modules/components/input-date/index.ts @@ -4,7 +4,7 @@ import {RouterLink} from '@angular/router'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemoModule} from '@demo/utils'; import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiMobileCalendarDialogModule} from '@taiga-ui/addon-mobile'; +import {TuiMobileCalendarDialogComponent} from '@taiga-ui/addon-mobile'; import type {TuiBooleanHandler} from '@taiga-ui/cdk'; import { TUI_FALSE_HANDLER, @@ -21,7 +21,7 @@ import { TuiLinkDirective, TuiTextfieldControllerModule, } from '@taiga-ui/core'; -import {TuiInputDateModule, TuiNamedDay} from '@taiga-ui/kit'; +import {TUI_MOBILE_CALENDAR, TuiInputDateModule, TuiNamedDay} from '@taiga-ui/kit'; import {AbstractExampleTuiControl} from '../abstract/control'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor'; @@ -36,7 +36,6 @@ const ONE_DOT: [string] = ['var(--tui-success-fill)']; TuiDemoModule, TuiInputDateModule, TuiTextfieldControllerModule, - TuiMobileCalendarDialogModule, TuiDropdownModule, TuiHintModule, TuiLinkDirective, @@ -46,7 +45,13 @@ const ONE_DOT: [string] = ['var(--tui-success-fill)']; ], templateUrl: './index.html', changeDetection, - providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleComponent)], + providers: [ + tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleComponent), + { + provide: TUI_MOBILE_CALENDAR, + useValue: TuiMobileCalendarDialogComponent, + }, + ], }) export default class ExampleComponent extends AbstractExampleTuiControl { public override cleaner = false; diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/1/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/1/index.ts index 17f58d0da5af..561f813778e8 100644 --- a/projects/demo/src/modules/components/mobile-calendar/examples/1/index.ts +++ b/projects/demo/src/modules/components/mobile-calendar/examples/1/index.ts @@ -1,23 +1,25 @@ +import {AsyncPipe} from '@angular/common'; import {Component, inject, INJECTOR, Injector} from '@angular/core'; import {FormControl} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiMobileCalendarDialogComponent} from '@taiga-ui/addon-mobile'; import {tuiControlValue, TuiDay} from '@taiga-ui/cdk'; -import {TUI_MONTHS, TuiDialogService} from '@taiga-ui/core'; +import {TUI_MONTHS, TuiButtonDirective, TuiDialogService} from '@taiga-ui/core'; import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit'; import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; import type {Observable} from 'rxjs'; import {combineLatest, map} from 'rxjs'; @Component({ - selector: 'tui-mobile-calendar-example-1', + standalone: true, + imports: [TuiButtonDirective, AsyncPipe], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiMobileCalendarExample1 { +export default class ExampleComponent { private readonly dialogs = inject(TuiDialogService); private readonly injector = inject(INJECTOR); private readonly months$ = inject(TUI_MONTHS); diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/2/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/2/index.ts index 2f9c68f39959..1626037549fa 100644 --- a/projects/demo/src/modules/components/mobile-calendar/examples/2/index.ts +++ b/projects/demo/src/modules/components/mobile-calendar/examples/2/index.ts @@ -1,16 +1,18 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiMobileCalendarComponent} from '@taiga-ui/addon-mobile'; import {TuiDay} from '@taiga-ui/cdk'; @Component({ - selector: 'tui-mobile-calendar-example-2', + standalone: true, + imports: [TuiMobileCalendarComponent], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiMobileCalendarExample2 { +export default class ExampleComponent { protected min = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 1); protected max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 10); } diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/3/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/3/index.ts index 87616ac931bc..78857c74644d 100644 --- a/projects/demo/src/modules/components/mobile-calendar/examples/3/index.ts +++ b/projects/demo/src/modules/components/mobile-calendar/examples/3/index.ts @@ -1,11 +1,13 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiMobileCalendarComponent} from '@taiga-ui/addon-mobile'; import {TuiDay, TuiDayOfWeek} from '@taiga-ui/cdk'; import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core'; @Component({ - selector: 'tui-mobile-calendar-example-3', + standalone: true, + imports: [TuiMobileCalendarComponent], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, @@ -17,6 +19,6 @@ import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core'; }, ], }) -export class TuiMobileCalendarExample3 { +export default class ExampleComponent { protected min = TuiDay.currentLocal(); } diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/4/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/4/index.ts index c8abaa905391..f35696edd6d3 100644 --- a/projects/demo/src/modules/components/mobile-calendar/examples/4/index.ts +++ b/projects/demo/src/modules/components/mobile-calendar/examples/4/index.ts @@ -1,3 +1,4 @@ +import {AsyncPipe} from '@angular/common'; import {Component, inject, INJECTOR, Injector} from '@angular/core'; import {FormControl} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; @@ -5,20 +6,21 @@ import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiMobileCalendarDialogComponent} from '@taiga-ui/addon-mobile'; import type {TuiDayRange} from '@taiga-ui/cdk'; import {tuiControlValue, TuiDay} from '@taiga-ui/cdk'; -import {TUI_MONTHS, TuiDialogService} from '@taiga-ui/core'; +import {TUI_MONTHS, TuiButtonDirective, TuiDialogService} from '@taiga-ui/core'; import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit'; import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; import type {Observable} from 'rxjs'; import {combineLatest, map} from 'rxjs'; @Component({ - selector: 'tui-mobile-calendar-example-4', + standalone: true, + imports: [TuiButtonDirective, AsyncPipe], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiMobileCalendarExample4 { +export default class ExampleComponent { private readonly dialogs = inject(TuiDialogService); private readonly injector = inject(INJECTOR); private readonly months$ = inject(TUI_MONTHS); diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/5/index.ts b/projects/demo/src/modules/components/mobile-calendar/examples/5/index.ts index ac123353c45a..fdbdaabe711b 100644 --- a/projects/demo/src/modules/components/mobile-calendar/examples/5/index.ts +++ b/projects/demo/src/modules/components/mobile-calendar/examples/5/index.ts @@ -1,23 +1,25 @@ +import {AsyncPipe} from '@angular/common'; import {Component, inject, INJECTOR, Injector} from '@angular/core'; import {FormControl} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiMobileCalendarDialogComponent} from '@taiga-ui/addon-mobile'; import {tuiControlValue, TuiDay} from '@taiga-ui/cdk'; -import {TUI_MONTHS, TuiDialogService} from '@taiga-ui/core'; +import {TUI_MONTHS, TuiButtonDirective, TuiDialogService} from '@taiga-ui/core'; import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit'; import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; import type {Observable} from 'rxjs'; import {combineLatest, map} from 'rxjs'; @Component({ - selector: 'tui-mobile-calendar-example-5', + standalone: true, + imports: [TuiButtonDirective, AsyncPipe], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiMobileCalendarExample5 { +export default class ExampleComponent { private readonly dialogs = inject(TuiDialogService); private readonly injector = inject(INJECTOR); private readonly months$ = inject(TUI_MONTHS); diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/import/import-dialog-module.md b/projects/demo/src/modules/components/mobile-calendar/examples/import/import-dialog-module.md deleted file mode 100644 index a6e656dd2c17..000000000000 --- a/projects/demo/src/modules/components/mobile-calendar/examples/import/import-dialog-module.md +++ /dev/null @@ -1,17 +0,0 @@ -```ts -import {TuiMobileCalendarDialogModule} from '@taiga-ui/addon-mobile'; -import {TuiInputDateModule} from '@taiga-ui/kit'; - -// ... - -@Component({ - standalone: true, - imports: [ - // ... - TuiMobileCalendarDialogModule, - TuiInputDateModule, - ], - // ... -}) -export class MyComponent {} -``` diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/import/import-module.md b/projects/demo/src/modules/components/mobile-calendar/examples/import/import-module.md deleted file mode 100644 index 57477c9eb28b..000000000000 --- a/projects/demo/src/modules/components/mobile-calendar/examples/import/import-module.md +++ /dev/null @@ -1,17 +0,0 @@ -```ts -import {TuiMobileCalendarModule} from '@taiga-ui/addon-mobile'; -import {TuiDialogModule} from '@taiga-ui/core'; - -// ... - -@Component({ - standalone: true, - imports: [ - // ... - TuiDialogModule, - TuiMobileCalendarModule, - ], - // ... -}) -export class MyComponent {} -``` diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/import/import.md b/projects/demo/src/modules/components/mobile-calendar/examples/import/import.md new file mode 100644 index 000000000000..1c993e2ac7df --- /dev/null +++ b/projects/demo/src/modules/components/mobile-calendar/examples/import/import.md @@ -0,0 +1,22 @@ +```ts +import {TuiInputDateModule} from '@taiga-ui/kit'; +// ... + +@NgModule({ + standalone: true, + imports: [ + // ... + TuiDialogModule, + TuiInputDateModule, + TuiMobileCalendarComponent, + ], + providers: [ + { + provide: TUI_MOBILE_CALENDAR, + useValue: TuiMobileCalendarDialogComponent, + }, + ], + // ... +}) +export class MyComponent {} +``` diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/import/insert-template.md b/projects/demo/src/modules/components/mobile-calendar/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/mobile-calendar/examples/import/insert-template.md rename to projects/demo/src/modules/components/mobile-calendar/examples/import/template.md diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html b/projects/demo/src/modules/components/mobile-calendar/index.html similarity index 71% rename from projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html rename to projects/demo/src/modules/components/mobile-calendar/index.html index 287a51dae932..3c655656f157 100644 --- a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.template.html +++ b/projects/demo/src/modules/components/mobile-calendar/index.html @@ -20,7 +20,7 @@ InputDateRange if - TuiMobileCalendarDialogModule + TUI_MOBILE_CALENDAR and TuiDialogModule are both imported once in the main module @@ -35,23 +35,22 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample" + /> - - + [component]="2 | tuiComponent" + [content]="2 | tuiExample" + /> @@ -65,24 +64,21 @@ token to change start day of the week (Monday by default). - - - + [component]="4 | tuiComponent" + [content]="4 | tuiExample" + /> - - + [component]="5 | tuiComponent" + [content]="5 | tuiExample" + /> @@ -155,48 +151,5 @@ - -
    -
  1. -

    - Import - TuiDialogModule - and - TuiMobileCalendarModule - once into the main module -

    - - -
    2. - -
  2. -

    - Import - TuiMobileCalendarDialogModule - for automatic use with - TuiInputDate - or - TuiInputDateRange - : -

    - - -
    3. - -
  3. -

    Add to the template:

    - - -
    4. -
- + diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.style.less b/projects/demo/src/modules/components/mobile-calendar/index.less similarity index 100% rename from projects/demo/src/modules/components/mobile-calendar/mobile-calendar.style.less rename to projects/demo/src/modules/components/mobile-calendar/index.less diff --git a/projects/demo/src/modules/components/mobile-calendar/index.ts b/projects/demo/src/modules/components/mobile-calendar/index.ts new file mode 100644 index 000000000000..929a9226b67b --- /dev/null +++ b/projects/demo/src/modules/components/mobile-calendar/index.ts @@ -0,0 +1,71 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; +import {RouterLink} from '@angular/router'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiComponentPipe, TuiExamplePipe, TuiSetupComponent} from '@demo/utils'; +import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; +import {TuiMobileCalendarComponent} from '@taiga-ui/addon-mobile'; +import type {TuiBooleanHandler, TuiDayRange} from '@taiga-ui/cdk'; +import { + TUI_FALSE_HANDLER, + TUI_FIRST_DAY, + TUI_LAST_DAY, + tuiControlValue, + TuiDay, +} from '@taiga-ui/cdk'; +import {TuiLinkDirective} from '@taiga-ui/core'; +import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit'; +import type {Observable} from 'rxjs'; + +@Component({ + standalone: true, + imports: [ + TuiAddonDocModule, + TuiLinkDirective, + RouterLink, + TuiMobileCalendarComponent, + TuiComponentPipe, + TuiExamplePipe, + TuiSetupComponent, + ], + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + providers: [ + { + deps: [PageComponent], + provide: TUI_CALENDAR_DATE_STREAM, + useFactory: (component: PageComponent): Observable => + component.stream, + }, + ], +}) +export default class PageComponent { + protected minVariants = [ + TUI_FIRST_DAY, + new TuiDay(2017, 2, 5), + new TuiDay(1900, 0, 1), + ]; + + protected min = this.minVariants[0]; + + protected maxVariants = [ + TUI_LAST_DAY, + new TuiDay(2020, 2, 5), + new TuiDay(2300, 0, 1), + ]; + + protected max = this.maxVariants[0]; + + protected single = true; + + protected readonly disabledItemHandlerVariants: ReadonlyArray< + TuiBooleanHandler + > = [TUI_FALSE_HANDLER, ({day}) => day % 3 === 0]; + + protected disabledItemHandler = this.disabledItemHandlerVariants[0]; + + protected control = new FormControl(null); + + protected stream = tuiControlValue(this.control); +} diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.component.ts b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.component.ts deleted file mode 100644 index c45f6740c188..000000000000 --- a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.component.ts +++ /dev/null @@ -1,94 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import type {TuiBooleanHandler, TuiDayRange} from '@taiga-ui/cdk'; -import { - TUI_FALSE_HANDLER, - TUI_FIRST_DAY, - TUI_LAST_DAY, - tuiControlValue, - TuiDay, -} from '@taiga-ui/cdk'; -import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit'; -import type {Observable} from 'rxjs'; - -@Component({ - selector: 'example-tui-mobile-calendar', - templateUrl: './mobile-calendar.template.html', - styleUrls: ['./mobile-calendar.style.less'], - changeDetection, - providers: [ - { - provide: TUI_CALENDAR_DATE_STREAM, - deps: [ExampleTuiMobileCalendarComponent], - useFactory: ( - component: ExampleTuiMobileCalendarComponent, - ): Observable => component.stream, - }, - ], -}) -export class ExampleTuiMobileCalendarComponent { - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleImportDialogModule = import( - './examples/import/import-dialog-module.md?raw' - ); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - }; - - protected readonly example3: TuiDocExample = { - TypeScript: import('./examples/3/index.ts?raw'), - HTML: import('./examples/3/index.html?raw'), - LESS: import('./examples/3/index.less?raw'), - }; - - protected readonly example4: TuiDocExample = { - TypeScript: import('./examples/4/index.ts?raw'), - HTML: import('./examples/4/index.html?raw'), - LESS: import('./examples/4/index.less?raw'), - }; - - protected readonly example5: TuiDocExample = { - TypeScript: import('./examples/5/index.ts?raw'), - HTML: import('./examples/5/index.html?raw'), - LESS: import('./examples/5/index.less?raw'), - }; - - protected minVariants = [ - TUI_FIRST_DAY, - new TuiDay(2017, 2, 5), - new TuiDay(1900, 0, 1), - ]; - - protected min = this.minVariants[0]; - - protected maxVariants = [ - TUI_LAST_DAY, - new TuiDay(2020, 2, 5), - new TuiDay(2300, 0, 1), - ]; - - protected max = this.maxVariants[0]; - - protected single = true; - - protected readonly disabledItemHandlerVariants: ReadonlyArray< - TuiBooleanHandler - > = [TUI_FALSE_HANDLER, ({day}) => day % 3 === 0]; - - protected disabledItemHandler = this.disabledItemHandlerVariants[0]; - - protected control = new FormControl(null); - - protected stream = tuiControlValue(this.control); -} diff --git a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.module.ts b/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.module.ts deleted file mode 100644 index 08b89b42b905..000000000000 --- a/projects/demo/src/modules/components/mobile-calendar/mobile-calendar.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {CommonModule} from '@angular/common'; -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, - TuiMobileCalendarModule, -} from '@taiga-ui/addon-mobile'; -import {TuiButtonDirective, TuiLinkDirective} from '@taiga-ui/core'; - -import {TuiMobileCalendarExample1} from './examples/1'; -import {TuiMobileCalendarExample2} from './examples/2'; -import {TuiMobileCalendarExample3} from './examples/3'; -import {TuiMobileCalendarExample4} from './examples/4'; -import {TuiMobileCalendarExample5} from './examples/5'; -import {ExampleTuiMobileCalendarComponent} from './mobile-calendar.component'; - -@NgModule({ - imports: [ - CommonModule, - ReactiveFormsModule, - TuiLinkDirective, - TuiButtonDirective, - TuiMobileCalendarModule, - TuiMobileCalendarDialogModule, - TuiAddonDocModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiMobileCalendarComponent)), - ], - declarations: [ - ExampleTuiMobileCalendarComponent, - TuiMobileCalendarExample1, - TuiMobileCalendarExample2, - TuiMobileCalendarExample3, - TuiMobileCalendarExample4, - TuiMobileCalendarExample5, - ], - exports: [ExampleTuiMobileCalendarComponent], -}) -export class ExampleTuiMobileCalendarModule {}