refactor: drop TuiPreviewModule (#7423)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-preview/components/preview/index.ts

@@ -2,6 +2,5 @@ export * from './pagination/preview-pagination.component';
 export * from './preview.component';
 export * from './preview.module';
 export * from './preview-action/preview-action.directive';
-export * from './preview-action/preview-action.module';
 export * from './title/preview-title.component';
 export * from './zoom/preview-zoom.component';

projects/addon-preview/components/preview/pagination/preview-pagination.component.ts

@@ -1,3 +1,4 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -9,10 +10,15 @@ import {
 } from '@angular/core';
 import {TUI_PREVIEW_ICONS} from '@taiga-ui/addon-preview/tokens';
 import {tuiClamp} from '@taiga-ui/cdk';
+import {TuiButtonDirective} from '@taiga-ui/core';
 import {TUI_PAGINATION_TEXTS} from '@taiga-ui/kit';
 
+import {TuiPreviewActionDirective} from '../preview-action/preview-action.directive';
+
 @Component({
+    standalone: true,
     selector: 'tui-preview-pagination',
+    imports: [NgIf, AsyncPipe, TuiButtonDirective, TuiPreviewActionDirective],
     templateUrl: './preview-pagination.template.html',
     styleUrls: ['./preview-pagination.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/addon-preview/components/preview/pagination/test/preview-pagination.spec.ts

@@ -2,7 +2,7 @@ import {Component, ViewChild} from '@angular/core';
 import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {TuiPreviewModule, TuiPreviewPaginationComponent} from '@taiga-ui/addon-preview';
+import {TuiPreview, TuiPreviewPaginationComponent} from '@taiga-ui/addon-preview';
 
 describe('PreviewPagination', () => {
     let fixture: ComponentFixture<TestComponent>;
@@ -26,7 +26,7 @@ describe('PreviewPagination', () => {
 
     beforeEach(async () => {
         TestBed.configureTestingModule({
-            imports: [TuiPreviewModule],
+            imports: [TuiPreview],
             declarations: [TestComponent],
         });
         await TestBed.compileComponents();

projects/addon-preview/components/preview/preview-action/preview-action.directive.ts

@@ -2,6 +2,7 @@ import {Directive} from '@angular/core';
 import {tuiButtonOptionsProvider} from '@taiga-ui/core';
 
 @Directive({
+    standalone: true,
     selector: '[tuiPreviewAction]',
     providers: [
         tuiButtonOptionsProvider({

projects/addon-preview/components/preview/preview.component.ts

@@ -1,24 +1,45 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
+import {MutationObserverModule} from '@ng-web-apis/mutation-observer';
+import {ResizeObserverModule} from '@ng-web-apis/resize-observer';
 import {TUI_PREVIEW_ICONS, TUI_PREVIEW_TEXTS} from '@taiga-ui/addon-preview/tokens';
 import type {TuiZoom} from '@taiga-ui/cdk';
 import {
     TUI_FALSE_HANDLER,
     tuiClamp,
     tuiDragAndDropFrom,
     tuiInjectElement,
+    TuiPanDirective,
     tuiPx,
     tuiRound,
     tuiTypedFromEvent,
+    TuiZoomDirective,
 } from '@taiga-ui/cdk';
-import {tuiSlideInTop} from '@taiga-ui/core';
+import {TuiButtonDirective, TuiHintModule, tuiSlideInTop} from '@taiga-ui/core';
 import {BehaviorSubject, combineLatest, map, merge, startWith} from 'rxjs';
 
+import {TuiPreviewActionDirective} from './preview-action/preview-action.directive';
+import {TuiPreviewZoomComponent} from './zoom/preview-zoom.component';
+
 const INITIAL_SCALE_COEF = 0.8;
 const EMPTY_COORDINATES: [number, number] = [0, 0];
 const ROTATION_ANGLE = 90;
 
 @Component({
+    standalone: true,
     selector: 'tui-preview',
+    imports: [
+        NgIf,
+        TuiPanDirective,
+        MutationObserverModule,
+        ResizeObserverModule,
+        TuiZoomDirective,
+        AsyncPipe,
+        TuiHintModule,
+        TuiButtonDirective,
+        TuiPreviewActionDirective,
+        TuiPreviewZoomComponent,
+    ],
     templateUrl: './preview.template.html',
     styleUrls: ['./preview.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/addon-preview/components/preview/preview.module.ts

@@ -1,45 +1,17 @@
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {MutationObserverModule} from '@ng-web-apis/mutation-observer';
-import {ResizeObserverModule} from '@ng-web-apis/resize-observer';
-import {TuiPanDirective, TuiZoomDirective} from '@taiga-ui/cdk';
-import {
-    TuiButtonDirective,
-    TuiHintModule,
-    TuiLoaderModule,
-    TuiSvgComponent,
-} from '@taiga-ui/core';
-import {TuiSliderModule} from '@taiga-ui/kit';
-import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiPreviewPaginationComponent} from './pagination/preview-pagination.component';
 import {TuiPreviewComponent} from './preview.component';
 import {TuiPreviewActionDirective} from './preview-action/preview-action.directive';
-import {TuiPreviewActionModule} from './preview-action/preview-action.module';
 import {TuiPreviewTitleComponent} from './title/preview-title.component';
 import {TuiPreviewZoomComponent} from './zoom/preview-zoom.component';
 
 @NgModule({
     imports: [
-        CommonModule,
-        PolymorpheusModule,
-        MutationObserverModule,
-        ResizeObserverModule,
-        TuiButtonDirective,
-        FormsModule,
-        TuiSliderModule,
-        TuiHintModule,
-        TuiSvgComponent,
-        TuiLoaderModule,
-        TuiPanDirective,
-        TuiZoomDirective,
-        TuiPreviewActionModule,
-    ],
-    declarations: [
         TuiPreviewComponent,
         TuiPreviewTitleComponent,
         TuiPreviewPaginationComponent,
+        TuiPreviewActionDirective,
         TuiPreviewZoomComponent,
     ],
     exports: [
@@ -50,4 +22,4 @@ import {TuiPreviewZoomComponent} from './zoom/preview-zoom.component';
         TuiPreviewZoomComponent,
     ],
 })
-export class TuiPreviewModule {}
+export class TuiPreview {}

projects/addon-preview/components/preview/title/preview-title.component.ts

@@ -1,6 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
+    standalone: true,
     selector: 'tui-preview-title',
     template: `
         <ng-content></ng-content>

projects/addon-preview/components/preview/zoom/preview-zoom.component.ts

@@ -1,3 +1,4 @@
+import {AsyncPipe, NgIf, PercentPipe} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -6,14 +7,30 @@ import {
     Input,
     Output,
 } from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {TUI_PREVIEW_ICONS, TUI_PREVIEW_ZOOM_TEXTS} from '@taiga-ui/addon-preview/tokens';
 import {TUI_FALSE_HANDLER, tuiClamp} from '@taiga-ui/cdk';
+import {TuiButtonDirective, TuiHintModule} from '@taiga-ui/core';
+import {TuiSliderModule} from '@taiga-ui/kit';
 import {map, merge, of, startWith, switchMap, timer} from 'rxjs';
 
+import {TuiPreviewActionDirective} from '../preview-action/preview-action.directive';
+
 const STEP = 0.5;
 
 @Component({
+    standalone: true,
     selector: 'tui-preview-zoom',
+    imports: [
+        NgIf,
+        AsyncPipe,
+        TuiButtonDirective,
+        TuiPreviewActionDirective,
+        TuiSliderModule,
+        TuiHintModule,
+        PercentPipe,
+        FormsModule,
+    ],
     templateUrl: './preview-zoom.template.html',
     styleUrls: ['./preview-zoom.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts

@@ -901,4 +901,14 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
             moduleSpecifier: '@taiga-ui/layout',
         },
     },
+    {
+        from: {
+            name: 'TuiPreviewModule',
+            moduleSpecifier: '@taiga-ui/addon-preview',
+        },
+        to: {
+            name: 'TuiPreview',
+            moduleSpecifier: '@taiga-ui/addon-preview',
+        },
+    },
 ];

projects/demo-playwright/tests/addon-preview/preview.spec.ts

@@ -15,7 +15,7 @@ test.describe('Preview', () => {
         });
 
         test('Preview can be zoomed via wheel scroll', async ({page}) => {
-            const example = documentationPage.getExample('#default');
+            const example = documentationPage.getExample('#full-preview');
             const preview = page.locator('tui-preview');
 
             await example.getByRole('button').click();
@@ -29,7 +29,10 @@ test.describe('Preview', () => {
         });
 
         test('No preview available', async ({page}) => {
-            const example = documentationPage.getExample('#loading');
+            const example = documentationPage.getExample(
+                '#with-loading-and-unavailable-image',
+            );
+
             const preview = page.locator('tui-preview');
 
             await example.getByRole('button').click();

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

@@ -688,9 +688,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Preview,
-        loadChildren: async () =>
-            (await import('../components/preview/preview.module'))
-                .ExampleTuiPreviewModule,
+        loadComponent: async () => import('../components/preview'),
         title: 'Preview',
     }),
     route({

projects/demo/src/modules/components/preview/examples/1/index.html

@@ -75,7 +75,7 @@ <h1>Important document</h1>
 
         <img
             alt="logo"
-            src="https://github.com/taiga-family/ng-polymorpheus/raw/master/projects/demo/assets/logo.svg"
+            src="https://raw.githubusercontent.com/taiga-family/ng-polymorpheus/main/projects/demo/assets/logo.svg"
             class="polymorpheus"
         />
     </div>

projects/demo/src/modules/components/preview/examples/1/index.ts

@@ -2,21 +2,23 @@ import type {TemplateRef} from '@angular/core';
 import {Component, inject, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiPreviewDialogService} from '@taiga-ui/addon-preview';
+import {TuiPreview, TuiPreviewDialogService} from '@taiga-ui/addon-preview';
 import type {TuiSwipe} from '@taiga-ui/cdk';
-import {tuiClamp} from '@taiga-ui/cdk';
+import {tuiClamp, TuiSwipeDirective} from '@taiga-ui/cdk';
 import type {TuiDialogContext} from '@taiga-ui/core';
-import {TuiAlertService} from '@taiga-ui/core';
+import {TuiAlertService, TuiButtonDirective} from '@taiga-ui/core';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 @Component({
-    selector: 'tui-preview-example-1',
+    standalone: true,
+    imports: [TuiButtonDirective, TuiPreview, TuiSwipeDirective, PolymorpheusModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiPreviewExample1 {
+export default class ExampleComponent {
     private readonly previewService = inject(TuiPreviewDialogService);
     private readonly alerts = inject(TuiAlertService);
 

projects/demo/src/modules/components/preview/examples/2/index.ts

@@ -2,17 +2,19 @@ import type {TemplateRef} from '@angular/core';
 import {Component, inject, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiPreviewDialogService} from '@taiga-ui/addon-preview';
+import {TuiPreview, TuiPreviewDialogService} from '@taiga-ui/addon-preview';
 import type {TuiDialogContext} from '@taiga-ui/core';
+import {TuiButtonDirective} from '@taiga-ui/core';
 
 @Component({
-    selector: 'tui-preview-example-2',
+    standalone: true,
+    imports: [TuiButtonDirective, TuiPreview],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiPreviewExample2 {
+export default class ExampleComponent {
     private readonly previewDialogService = inject(TuiPreviewDialogService);
 
     @ViewChild('preview')

projects/demo/src/modules/components/preview/examples/3/index.ts

@@ -1,21 +1,31 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import type {TemplateRef} from '@angular/core';
 import {Component, inject, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiPreviewDialogService} from '@taiga-ui/addon-preview';
+import {TuiPreview, TuiPreviewDialogService} from '@taiga-ui/addon-preview';
 import {tuiIsPresent} from '@taiga-ui/cdk';
 import type {TuiDialogContext} from '@taiga-ui/core';
+import {TuiButtonDirective, TuiLoaderModule, TuiSvgComponent} from '@taiga-ui/core';
 import type {Observable} from 'rxjs';
 import {BehaviorSubject, filter, map, of, startWith, switchMap, timer} from 'rxjs';
 
 @Component({
-    selector: 'tui-preview-example-3',
+    standalone: true,
+    imports: [
+        TuiButtonDirective,
+        TuiPreview,
+        AsyncPipe,
+        NgIf,
+        TuiSvgComponent,
+        TuiLoaderModule,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiPreviewExample3 {
+export default class ExampleComponent {
     private readonly previewDialogService = inject(TuiPreviewDialogService);
 
     @ViewChild('preview')

projects/demo/src/modules/components/preview/index.html

@@ -0,0 +1,28 @@
+<tui-doc-page
+    header="Preview"
+    package="ADDON-PREVIEW"
+    type="components"
+>
+    <ng-template pageTab>
+        <p>
+            Preview component allows to open modal for viewing some document and to work with it (download, zoom, rotate
+            etc)
+        </p>
+
+        <p>As a document you can provide images, embeds and other arbitrary content.</p>
+
+        <tui-notification class="tui-space_bottom-4">
+            The component automatically adjusts to the mobile device
+        </tui-notification>
+
+        <tui-doc-example
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab />
+</tui-doc-page>

projects/demo/src/modules/components/preview/index.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+import {TuiNotificationModule} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo, TuiNotificationModule],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {
+    protected readonly examples = [
+        'Full preview',
+        'Simple mode',
+        'With loading and unavailable image',
+    ];
+}