refactor!: Preview move to kit package (#7532)

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

projects/cdk/constants/used-icons.ts

@@ -27,12 +27,6 @@ export const TUI_USED_ICONS = [
     'tuiIconMoon',
     'tuiIconCode',
     'tuiIconMenuLarge',
-    'tuiIconRotate',
-    'tuiIconArrowLeft',
-    'tuiIconArrowRight',
-    'tuiIconPlus',
-    'tuiIconMinus',
-    'tuiIconMinimize',
     'tuiIconEye',
     'tuiIconEyeOff',
     'tuiIconDrag',
@@ -53,15 +47,21 @@ export const TUI_USED_ICONS = [
     'tuiIconChevronDown',
     'tuiIconChevronDownLarge',
     'tuiIconMinusLarge',
+    'tuiIconMinus',
     'tuiIconFileLarge',
     'tuiIconCheckCircleLarge',
     'tuiIconAlertCircleLarge',
     'tuiIconTrashLarge',
     'tuiIconCopy',
+    'tuiIconPlus',
     'tuiIconEyeLarge',
     'tuiIconEyeOffLarge',
     'tuiIconClock',
     'tuiIconClockLarge',
     'tuiIconStarLarge',
     'tuiIconCalendar',
+    'tuiIconRotate',
+    'tuiIconArrowLeft',
+    'tuiIconArrowRight',
+    'tuiIconMinimize',
 ] as const;

projects/cdk/package.json

@@ -56,7 +56,6 @@
             "@taiga-ui/addon-charts",
             "@taiga-ui/addon-commerce",
             "@taiga-ui/icons",
-            "@taiga-ui/addon-preview",
             "@taiga-ui/addon-tablebars",
             "@taiga-ui/addon-table",
             "@taiga-ui/addon-mobile",

projects/cdk/schematics/ng-add/schema.json

@@ -79,10 +79,6 @@
                         "value": "addon-tablebars",
                         "label": "addon-tablebars   Group action sliding toolbar"
                     },
-                    {
-                        "value": "addon-preview",
-                        "label": "addon-preview     Custom fullscreen dialog to preview various content such as documents, images etc."
-                    },
                     {
                         "value": "layout",
                         "label": "layout            Layout components"

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

@@ -952,7 +952,7 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
         },
         to: {
             name: 'TuiPreview',
-            moduleSpecifier: '@taiga-ui/addon-preview',
+            moduleSpecifier: '@taiga-ui/kit',
         },
     },
     {
@@ -1008,7 +1008,7 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
         },
         to: {
             name: 'TuiPreviewDialogComponent',
-            moduleSpecifier: '@taiga-ui/addon-preview',
+            moduleSpecifier: '@taiga-ui/kit',
         },
     },
     {

projects/demo/src/modules/app/home/examples/addons.md

@@ -4,7 +4,6 @@ npm i @taiga-ui/addon-commerce  // Money-related extension with currencies, cred
 npm i @taiga-ui/addon-mobile    // Components and tools specific to mobile version of the app
 npm i @taiga-ui/addon-table     // Interactive table component and related utilities
 npm i @taiga-ui/addon-tablebars // Group action sliding toolbar
-npm i @taiga-ui/addon-preview   // Custom fullscreen dialog to preview various content such as documents, images etc.
 npm i @taiga-ui/addon-doc       // Taiga UI based library for developing documentation portals for Angular libraries
 npm i @taiga-ui/layout          // Layout components
 ```

projects/demo/src/modules/app/stackblitz/stackblitz-deps.service.ts

@@ -51,7 +51,6 @@ export class StackblitzDepsService {
             '@taiga-ui/addon-charts': version,
             '@taiga-ui/addon-commerce': version,
             '@taiga-ui/addon-mobile': version,
-            '@taiga-ui/addon-preview': version,
             '@taiga-ui/addon-table': version,
             '@taiga-ui/addon-tablebars': version,
             '@taiga-ui/layout': version,

projects/demo/src/modules/app/stackblitz/utils.ts

@@ -103,15 +103,14 @@ export async function getAllTaigaUIModulesFile(
      * You can't just iterate the array with package-names - it will cause error:
      * `Warning: Critical dependency: the request of a dependency is an expression`
      * */
-    const [cdk, core, kit, charts, commerce, mobile, preview, table, tablebars] =
+    const [cdk, core, kit, charts, commerce, mobile, table, tablebars] =
         await Promise.all([
             import('@taiga-ui/cdk'),
             import('@taiga-ui/core'),
             import('@taiga-ui/kit'),
             import('@taiga-ui/addon-charts'),
             import('@taiga-ui/addon-commerce'),
             import('@taiga-ui/addon-mobile'),
-            import('@taiga-ui/addon-preview'),
             import('@taiga-ui/addon-table'),
             import('@taiga-ui/addon-tablebars'),
         ]).then(modules => {
@@ -146,9 +145,6 @@ import {
 import {
     ${mobile}
 } from '@taiga-ui/addon-mobile';
-import {
-    ${preview}
-} from '@taiga-ui/addon-preview';
 import {
     ${table}
 } from '@taiga-ui/addon-table';
@@ -188,8 +184,6 @@ export const ALL_TAIGA_UI_MODULES = [
     ${commerce},
     /* ADDON-MOBILE */
     ${mobile},
-    /* ADDON-PREVIEW */
-    ${preview},
     /* ADDON-TABLE */
     ${table},
     /* ADDON-TABLEBARS */

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

@@ -18,7 +18,7 @@
         [rotatable]="true"
         (tuiSwipe)="onSwipe($event)"
     >
-        <tui-preview-title>{{ title }}</tui-preview-title>
+        <tui-preview-title>{{ titles[index] }}</tui-preview-title>
         <tui-preview-pagination
             [length]="length"
             [(index)]="index"

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

@@ -2,11 +2,11 @@ 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 {TuiPreview, TuiPreviewDialogService} from '@taiga-ui/addon-preview';
 import type {TuiSwipe} from '@taiga-ui/cdk';
 import {tuiClamp, TuiSwipeDirective} from '@taiga-ui/cdk';
 import type {TuiDialogContext} from '@taiga-ui/core';
 import {TuiAlertService, TuiButtonDirective} from '@taiga-ui/core';
+import {TuiPreview, TuiPreviewDialogService} from '@taiga-ui/kit';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
@@ -30,10 +30,7 @@ export default class ExampleComponent {
 
     protected index = 0;
     protected length = 2;
-
-    protected get title(): string {
-        return this.index === 0 ? 'Transaction cert.jpg' : 'My face.jpg';
-    }
+    protected titles = ['Transaction cert.jpg', 'My face.jpg'];
 
     protected get previewContent(): PolymorpheusContent {
         return this.index === 0 && this.contentSample

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

@@ -3,36 +3,33 @@
     tuiButton
     type="button"
     class="tui-space_bottom-4"
-    (click)="show()"
+    (click)="open = !open"
 >
-    Show simple preview
+    Show preview
 </button>
 
-<ng-template
-    #preview
-    let-preview
->
-    <tui-preview
-        [rotatable]="false"
-        [zoomable]="false"
-    >
-        <iframe
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-            frameborder="0"
-            src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
-            title="Youtube"
-            class="content"
-        ></iframe>
+<ng-template [(tuiPreviewDialog)]="open">
+    <tui-preview>
+        <tui-preview-title>{{ titles[index] }}</tui-preview-title>
+        <tui-preview-pagination
+            [length]="length"
+            [(index)]="index"
+        />
 
         <button
             iconLeft="tuiIconClose"
             tuiIconButton
             tuiPreviewAction
             type="button"
-            (click)="preview.complete()"
+            (click)="open = false"
         >
             Close
         </button>
+
+        <img
+            *polymorpheusOutlet="content[index] as src"
+            alt="preview"
+            [src]="src"
+        />
     </tui-preview>
 </ng-template>

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

@@ -1,4 +0,0 @@
-.content {
-    width: 80%;
-    height: 80%;
-}