feat: update Taiga UI to 4 release candidate

2026-04-04 14:29:45 +00:00 · 2024-07-15 11:16:19 +05:00
parent a2b1968d6e
commit c7a2e7ada1
219 changed files with 1977 additions and 2176 deletions
--- a/web/projects/marketplace/src/components/menu/menu.component.html
+++ b/web/projects/marketplace/src/components/menu/menu.component.html
@@ -7,7 +7,7 @@
        size="60px"
        [url]="store?.url || ''"
        [marketplace]="iconConfig"
-      ></store-icon>
+      />
      <h1 [class.tui-skeleton]="!store">
        {{ store?.info?.name || 'Loading store' }}
      </h1>
@@ -21,13 +21,11 @@
        <marketplace-search
          [(query)]="query"
          (queryChange)="onQueryChange($event)"
-        ></marketplace-search>
+        />
        <button
          tuiButton
          type="button"
-          appearance="flat"
-          [pseudoActive]="false"
-          [pseudoHover]="false"
+          appearance="link"
          (click)="toggleMenu(true)"
          (tuiActiveZoneChange)="toggleMenu($event)"
          [style.--tui-padding]="'1.2rem'"
@@ -40,7 +38,7 @@
            [marketplace]="iconConfig"
            [class.tui-skeleton]="!store"
            [class.tui-skeleton_rounded]="!store"
-          ></store-icon>
+          />
          <nav
            *tuiSidebar="open; direction: 'right'; autoWidth: true"
            class="nav-mobile-sidebar divide-bar"
@@ -54,7 +52,7 @@
                tuiButton
                type="button"
                appearance="icon"
-                icon="tuiIconClose"
+                iconStart="@tui.x"
                (tuiActiveZoneChange)="toggleMenu($event)"
                (click)="toggleMenu(false)"
              ></button>
@@ -66,20 +64,17 @@
                [categories]="store?.info?.categories"
                [category]="query ? '' : category"
                (categoryChange)="onCategoryChange($event); toggleMenu(false)"
-              ></marketplace-categories>
+              />
              <div>
                <!-- link to store for brochure -->
-                <ng-content select="[slot=store-mobile]"></ng-content>
+                <ng-content select="[slot=store-mobile]" />
                <a
                  target="_blank"
                  rel="noreferrer"
                  href="https://docs.start9.com/0.3.5.x/developer-docs/"
                >
                  <span>Package a service</span>
-                  <tui-icon
-                    tuiAppearance="icon"
-                    icon="tuiIconExternalLinkLarge"
-                  ></tui-icon>
+                  <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
                </a>
              </div>
            </div>
@@ -93,26 +88,23 @@
      <marketplace-search
        [query]="query"
        (queryChange)="onQueryChange($event)"
-      ></marketplace-search>
+      />
      <div class="nav-desktop-container">
        <marketplace-categories
          [categories]="store?.info?.categories"
          [category]="query ? '' : category"
          (categoryChange)="onCategoryChange($event)"
-        ></marketplace-categories>
+        />
        <div>
          <!-- link to store for brochure -->
-          <ng-content select="[slot=store]"></ng-content>
+          <ng-content select="[slot=store]" />
          <a
            target="_blank"
            rel="noreferrer"
            href="https://docs.start9.com/0.3.5.x/developer-docs/"
          >
            <span>Package a service</span>
-            <tui-icon
-              tuiAppearance="icon"
-              icon="tuiIconExternalLinkLarge"
-            ></tui-icon>
+            <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
          </a>
        </div>
      </div>
--- a/web/projects/marketplace/src/components/menu/menu.component.module.ts
+++ b/web/projects/marketplace/src/components/menu/menu.component.module.ts
@@ -3,13 +3,12 @@ import { NgModule } from '@angular/core'
 import { SharedPipesModule } from '@start9labs/shared'

 import { MenuComponent } from './menu.component'
-import { TuiButtonModule, TuiLoaderModule } from '@taiga-ui/core'
-import { TuiActiveZoneModule, TuiLetModule } from '@taiga-ui/cdk'
-import { TuiSidebarModule } from '@taiga-ui/addon-mobile'
+import { TuiLoader, TuiIcon, TuiButton, TuiAppearance } from '@taiga-ui/core'
+import { TuiActiveZone, TuiLet } from '@taiga-ui/cdk'
+import { TuiSidebar } from '@taiga-ui/addon-mobile'
 import { SearchModule } from '../../pages/list/search/search.module'
 import { CategoriesModule } from '../../pages/list/categories/categories.module'
 import { StoreIconComponentModule } from '../store-icon/store-icon.component.module'
-import { TuiAppearanceModule, TuiIconModule } from '@taiga-ui/experimental'

@NgModule({
  imports: [
@@ -17,15 +16,15 @@ import { TuiAppearanceModule, TuiIconModule } from '@taiga-ui/experimental'
    SharedPipesModule,
    SearchModule,
    CategoriesModule,
-    TuiActiveZoneModule,
-    TuiSidebarModule,
-    TuiLoaderModule,
-    TuiButtonModule,
+    TuiActiveZone,
+    ...TuiSidebar,
+    TuiLoader,
+    TuiButton,
    CategoriesModule,
    StoreIconComponentModule,
-    TuiLetModule,
-    TuiAppearanceModule,
-    TuiIconModule,
+    TuiLet,
+    TuiAppearance,
+    TuiIcon,
  ],
  declarations: [MenuComponent],
  exports: [MenuComponent],
--- a/web/projects/marketplace/src/pages/list/categories/categories.component.ts
+++ b/web/projects/marketplace/src/pages/list/categories/categories.component.ts
@@ -30,30 +30,30 @@ export class CategoriesComponent {
  determineIcon(category: string): string {
    switch (category.toLowerCase()) {
      case 'all':
-        return 'tuiIconGridLarge'
+        return '@tui.layout-grid'
      case 'bitcoin':
-        return 'assets/img/icons/logo-bitcoin.svg'
+        return '@tui.bitcoin'
      case 'messaging':
      case 'communications':
-        return 'tuiIconMessageCircleLarge'
+        return '@tui.message-circle'
      case 'data':
-        return 'tuiIconFileTextLarge'
+        return '@tui.file-text'
      case 'developer tools':
-        return 'tuiIconTableSplitLarge'
+        return '@tui.table-split'
      case 'featured':
-        return 'tuiIconStarLarge'
+        return '@tui.star'
      case 'lightning':
-        return 'tuiIconZapLarge'
+        return '@tui.zap'
      case 'media':
-        return 'tuiIconPlayCircleLarge'
+        return '@tui.circle-play'
      case 'networking':
-        return 'tuiIconGlobeLarge'
+        return '@tui.globe'
      case 'social':
-        return 'tuiIconUsersLarge'
+        return '@tui.users'
      case 'ai':
-        return 'tuiIconCpuLarge'
+        return '@tui.cpu'
      default:
-        return 'tuiIconBoxLarge'
+        return '@tui.box'
    }
  }
 }
--- a/web/projects/marketplace/src/pages/list/categories/categories.module.ts
+++ b/web/projects/marketplace/src/pages/list/categories/categories.module.ts
@@ -1,12 +1,12 @@
+import { TuiIcon, TuiAppearance } from '@taiga-ui/core'
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'

 import { CategoriesComponent } from './categories.component'
-import { TuiAppearanceModule, TuiIconModule } from '@taiga-ui/experimental'
 import { RouterModule } from '@angular/router'

@NgModule({
-  imports: [RouterModule, CommonModule, TuiAppearanceModule, TuiIconModule],
+  imports: [RouterModule, CommonModule, TuiAppearance, TuiIcon],
  declarations: [CategoriesComponent],
  exports: [CategoriesComponent],
 })
--- a/web/projects/marketplace/src/pages/list/item/item.module.ts
+++ b/web/projects/marketplace/src/pages/list/item/item.module.ts
@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
+import { TuiLet } from '@taiga-ui/cdk'
 import { ItemComponent } from './item.component'
-import { TuiLetModule } from '@taiga-ui/cdk'

@NgModule({
  declarations: [ItemComponent],
@@ -13,7 +13,7 @@ import { TuiLetModule } from '@taiga-ui/cdk'
    RouterModule,
    SharedPipesModule,
    TickerModule,
-    TuiLetModule,
+    TuiLet,
  ],
 })
 export class ItemModule {}
--- a/web/projects/marketplace/src/pages/list/search/search.component.html
+++ b/web/projects/marketplace/src/pages/list/search/search.component.html
@@ -1,5 +1,5 @@
 <div class="search-box">
-  <tui-svg src="tuiIconSearchLarge"></tui-svg>
+  <tui-icon icon="@tui.search" />
  <input
    type="text"
    name="search"
--- a/web/projects/marketplace/src/pages/list/search/search.module.ts
+++ b/web/projects/marketplace/src/pages/list/search/search.module.ts
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
+import { TuiIcon } from '@taiga-ui/core'
 import { SearchComponent } from './search.component'
-import { TuiSvgModule } from '@taiga-ui/core'

@NgModule({
-  imports: [FormsModule, CommonModule, TuiSvgModule],
+  imports: [FormsModule, CommonModule, TuiIcon],
  declarations: [SearchComponent],
  exports: [SearchComponent],
 })
--- a/web/projects/marketplace/src/pages/release-notes/release-notes.component.ts
+++ b/web/projects/marketplace/src/pages/release-notes/release-notes.component.ts
@@ -7,7 +7,7 @@ import {
  PipeTransform,
 } from '@angular/core'
 import { AbstractMarketplaceService } from '../../services/marketplace.service'
-import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
+import { PolymorpheusContent } from '@taiga-ui/polymorpheus'
 import { TuiDialogContext, TuiDialogService } from '@taiga-ui/core'
 import { MarketplacePkg } from '../../types'
 import { Observable } from 'rxjs'
--- a/web/projects/marketplace/src/pages/release-notes/release-notes.module.ts
+++ b/web/projects/marketplace/src/pages/release-notes/release-notes.module.ts
@@ -1,3 +1,4 @@
+import { TuiAccordion } from '@taiga-ui/kit'
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import {
@@ -5,8 +6,7 @@ import {
  MarkdownPipeModule,
  SafeLinksDirective,
 } from '@start9labs/shared'
-import { TuiAccordionModule } from '@taiga-ui/kit'
-import { TuiButtonModule, TuiLoaderModule } from '@taiga-ui/core'
+import { TuiLoader, TuiButton } from '@taiga-ui/core'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import {
  FilterVersionsPipe,
@@ -20,9 +20,9 @@ import {
    MarkdownPipeModule,
    NgDompurifyModule,
    SafeLinksDirective,
-    TuiButtonModule,
-    TuiAccordionModule,
-    TuiLoaderModule,
+    TuiButton,
+    ...TuiAccordion,
+    TuiLoader,
    FilterVersionsPipe,
  ],
  declarations: [ReleaseNotesComponent],
--- a/web/projects/marketplace/src/pages/show/about/about.module.ts
+++ b/web/projects/marketplace/src/pages/show/about/about.module.ts
@@ -1,10 +1,10 @@
-import { CommonModule } from "@angular/common";
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { AboutComponent } from "./about.component";
-import { TuiTagModule } from "@taiga-ui/kit";
-import { NgDompurifyModule } from "@tinkoff/ng-dompurify";
-import { SafeLinksDirective } from "@start9labs/shared";
+import { TuiTagModule } from '@taiga-ui/legacy'
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { AboutComponent } from './about.component'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
+import { SafeLinksDirective } from '@start9labs/shared'

@NgModule({
  imports: [
--- a/web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
@@ -1,16 +1,17 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TuiLabelModule, TuiSvgModule } from '@taiga-ui/core'
-import { TuiLineClampModule } from '@taiga-ui/kit'
+import { TuiIcon, TuiLabel, TuiTitle } from '@taiga-ui/core'
+import { TuiLineClamp } from '@taiga-ui/kit'

@Component({
  selector: 'marketplace-additional-item',
  template: `
    <div class="item-container">
-      <label [tuiLabel]="label">
-        <tui-line-clamp [content]="data" [linesLimit]="1"></tui-line-clamp>
+      <label tuiTitle>
+        <span tuiSubtitle>{{ label }}</span>
+        <tui-line-clamp [content]="data" [linesLimit]="1" />
      </label>
-      <tui-svg [src]="icon"></tui-svg>
+      <tui-icon [icon]="icon" />
    </div>
  `,
  styles: [
@@ -25,7 +26,11 @@ import { TuiLineClampModule } from '@taiga-ui/kit'
          background-color: rgb(113 113 122 / 0.1);
        }

-        tui-svg {
+        [tuiSubtitle] {
+          color: var(--tui-text-secondary);
+        }
+
+        tui-icon {
          opacity: 0.7;
        }
      }
@@ -38,7 +43,7 @@ import { TuiLineClampModule } from '@taiga-ui/kit'
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [CommonModule, TuiSvgModule, TuiLineClampModule, TuiLabelModule],
+  imports: [CommonModule, TuiLineClamp, TuiLabel, TuiIcon, TuiTitle],
 })
 export class MarketplaceAdditionalItemComponent {
  @Input({ required: true })
--- a/web/projects/marketplace/src/pages/show/additional/additional.component.html
+++ b/web/projects/marketplace/src/pages/show/additional/additional.component.html
@@ -15,14 +15,15 @@
        (click)="copyService.copy(gitHash)"
        [data]="gitHash"
        label="Git Hash"
-        icon="tuiIconCopyLarge"
+        icon="@tui.copy"
        class="item-copy"
-        button
-        detail="false"
      ></marketplace-additional-item>
      <ng-template #noHash>
        <div class="item-padding">
-          <label tuiLabel="Git Hash">Unknown</label>
+          <label tuiTitle>
+            <span tuiSubtitle>Git Hash</span>
+            Unknown
+          </label>
        </div>
      </ng-template>
      <!-- license -->
@@ -30,7 +31,7 @@
        (click)="presentModalMd('License')"
        [data]="pkg.manifest.license"
        label="License"
-        icon="tuiIconChevronRightLarge"
+        icon="@tui.chevron-right"
        class="item-pointer"
      ></marketplace-additional-item>
      <!-- instructions -->
@@ -38,38 +39,38 @@
        (click)="presentModalMd('Instructions')"
        data="Click to view instructions"
        label="Instructions"
-        icon="tuiIconChevronRightLarge"
+        icon="@tui.chevron-right"
        class="item-pointer"
      ></marketplace-additional-item>
      <!-- versions -->
-      <ng-content></ng-content>
+      <ng-content />
      <!-- links -->
      <marketplace-additional-link
        *ngIf="pkg.manifest.marketingSite"
        [url]="pkg.manifest.marketingSite"
        label="Marketing Site"
-        icon="tuiIconExternalLinkLarge"
+        icon="@tui.external-link"
        class="item-pointer"
      ></marketplace-additional-link>
      <marketplace-additional-link
        *ngIf="pkg.manifest.upstreamRepo"
        [url]="pkg.manifest.upstreamRepo"
        label="Source Repository"
-        icon="tuiIconExternalLinkLarge"
+        icon="@tui.external-link"
        class="item-pointer"
      ></marketplace-additional-link>
      <marketplace-additional-link
        *ngIf="pkg.manifest.wrapperRepo"
        [url]="pkg.manifest.wrapperRepo"
        label="Wrapper Repository"
-        icon="tuiIconExternalLinkLarge"
+        icon="@tui.external-link"
        class="item-pointer"
      ></marketplace-additional-link>
      <marketplace-additional-link
        *ngIf="pkg.manifest.supportSite"
        [url]="pkg.manifest.supportSite"
        label="Support Site"
-        icon="tuiIconExternalLinkLarge"
+        icon="@tui.external-link"
        class="item-pointer"
      ></marketplace-additional-link>
    </div>
--- a/web/projects/marketplace/src/pages/show/additional/additional.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional.component.ts
@@ -6,7 +6,7 @@ import {
 } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { TuiDialogService } from '@taiga-ui/core'
-import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { CopyService, MarkdownComponent } from '@start9labs/shared'
 import { MarketplacePkg } from '../../../types'
 import { AbstractMarketplaceService } from '../../../services/marketplace.service'
--- a/web/projects/marketplace/src/pages/show/additional/additional.module.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional.module.ts
@@ -1,17 +1,18 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { AdditionalComponent } from './additional.component'
-import { TuiButtonModule, TuiLabelModule } from '@taiga-ui/core'
+import { TuiButton, TuiLabel, TuiTitle } from '@taiga-ui/core'
 import { MarketplaceAdditionalItemComponent } from './additional-item.component'
 import { MarketplaceAdditionalLinkComponent } from './additional-link.component'

@NgModule({
  imports: [
    CommonModule,
-    TuiButtonModule,
-    TuiLabelModule,
+    TuiButton,
+    TuiLabel,
    MarketplaceAdditionalItemComponent,
    MarketplaceAdditionalLinkComponent,
+    TuiTitle,
  ],
  declarations: [AdditionalComponent],
  exports: [AdditionalComponent],
--- a/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
+++ b/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
@@ -5,11 +5,11 @@ import {
  Input,
  inject,
 } from '@angular/core'
-import { EmverPipesModule } from '@start9labs/shared'
-import { Dependency, MarketplacePkg, StoreIdentity } from '../../../types'
 import { RouterModule } from '@angular/router'
-import { TuiAvatarModule, TuiLineClampModule } from '@taiga-ui/kit'
-import { TuiLetModule } from '@taiga-ui/cdk'
+import { EmverPipesModule } from '@start9labs/shared'
+import { TuiLet } from '@taiga-ui/cdk'
+import { TuiAvatar, TuiLineClamp } from '@taiga-ui/kit'
+import { Dependency, MarketplacePkg, StoreIdentity } from '../../../types'
 import { AbstractMarketplaceService } from '../../../services/marketplace.service'

@Component({
@@ -18,15 +18,11 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
      <tui-avatar
        class="dep-img"
-        [rounded]="true"
-        [size]="'l'"
-        [avatarUrl]="getImage(dep.key, marketplace)"
-      ></tui-avatar>
+        size="l"
+        [src]="getImage(dep.key, marketplace)"
+      />
      <div>
-        <tui-line-clamp
-          [linesLimit]="2"
-          [content]="titleContent"
-        ></tui-line-clamp>
+        <tui-line-clamp [linesLimit]="2" [content]="titleContent" />
        <ng-template #titleContent>
          <div class="title">
            <span>
@@ -44,7 +40,7 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
          [linesLimit]="2"
          [content]="descContent"
          class="description"
-        ></tui-line-clamp>
+        />
        <ng-template #descContent>
          {{ dep.value.description }}
        </ng-template>
@@ -107,10 +103,10 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
  imports: [
    CommonModule,
    RouterModule,
-    TuiAvatarModule,
+    TuiAvatar,
    EmverPipesModule,
-    TuiLineClampModule,
-    TuiLetModule,
+    TuiLineClamp,
+    TuiLet,
  ],
 })
 export class MarketplaceDepItemComponent {
--- a/web/projects/marketplace/src/pages/show/hero/hero.component.ts
+++ b/web/projects/marketplace/src/pages/show/hero/hero.component.ts
@@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common'
 import {
  ChangeDetectionStrategy,
  Component,
-  Input,
  inject,
+  Input,
 } from '@angular/core'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
-import { MarketplacePkg, StoreIdentity } from '../../../types'
-import { TuiLetModule } from '@taiga-ui/cdk'
+import { TuiLet } from '@taiga-ui/cdk'
 import { AbstractMarketplaceService } from '../../../services/marketplace.service'
+import { MarketplacePkg, StoreIdentity } from '../../../types'

@Component({
  selector: 'marketplace-package-hero',
@@ -41,7 +41,7 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
          </p>
        </div>
        <!-- control buttons -->
-        <ng-content></ng-content>
+        <ng-content />
      </div>
    </div>
  `,
@@ -53,7 +53,7 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
        margin-top: 2.5rem;

        @media (min-width: 768px) {
-          margin-top: 0px;
+          margin-top: 0;
        }
      }

@@ -129,8 +129,8 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
          position: absolute;
          width: 100%;
          height: 100%;
-          top: 0px;
-          left: 0px;
+          top: 0;
+          left: 0;
          z-index: -50;
          border-radius: 1.5rem;

@@ -161,7 +161,7 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [CommonModule, SharedPipesModule, TickerModule, TuiLetModule],
+  imports: [CommonModule, SharedPipesModule, TickerModule, TuiLet],
 })
 export class MarketplacePackageHeroComponent {
  @Input({ required: true })
--- a/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
+++ b/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
@@ -1,3 +1,4 @@
+import { TuiCarousel } from '@taiga-ui/kit'
 import { CommonModule } from '@angular/common'
 import {
  ChangeDetectionStrategy,
@@ -6,14 +7,9 @@ import {
  Input,
 } from '@angular/core'
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
-import {
-  TuiButtonModule,
-  TuiDialogContext,
-  TuiDialogService,
-} from '@taiga-ui/core'
-import { TuiCarouselModule } from '@taiga-ui/kit'
+import { TuiDialogContext, TuiDialogService, TuiButton } from '@taiga-ui/core'
 import { MarketplacePkg } from '../../../types'
-import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
+import { PolymorpheusContent } from '@taiga-ui/polymorpheus'

@Component({
  selector: 'marketplace-package-screenshots',
@@ -22,7 +18,7 @@ import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
      <button
        tuiIconButton
        appearance="flat"
-        icon="tuiIconChevronLeftLarge"
+        icon="@tui.chevron-left"
        title="Previous"
        type="button"
        (click)="carousel.prev()"
@@ -61,7 +57,7 @@ import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
        tuiIconButton
        appearance="flat"
        type="button"
-        icon="tuiIconChevronRightLarge"
+        icon="@tui.chevron-right"
        title="Next"
        (click)="carousel.next()"
      ></button>
@@ -125,7 +121,7 @@ import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [CommonModule, TuiCarouselModule, TuiButtonModule],
+  imports: [CommonModule, TuiCarousel, TuiButton],
 })
 export class MarketplacePackageScreenshotComponent {
  private readonly dialogs = inject(TuiDialogService)