diff --git a/projects/addon-doc/components/internal/header/header.component.ts b/projects/addon-doc/components/internal/header/header.component.ts
index 288403188a2f..d058e9789f83 100644
--- a/projects/addon-doc/components/internal/header/header.component.ts
+++ b/projects/addon-doc/components/internal/header/header.component.ts
@@ -6,9 +6,9 @@ import {
TUI_DOC_MENU_TEXT,
TuiDocIcons,
} from '@taiga-ui/addon-doc/tokens';
-import {ALWAYS_FALSE_HANDLER, TuiSwipeService} from '@taiga-ui/cdk';
+import {ALWAYS_FALSE_HANDLER} from '@taiga-ui/cdk';
import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {distinctUntilChanged, filter, map, merge, startWith, Subject} from 'rxjs';
+import {distinctUntilChanged, map, merge, startWith, Subject} from 'rxjs';
@Component({
selector: 'header[tuiDocHeader]',
@@ -22,10 +22,6 @@ export class TuiDocHeaderComponent {
readonly open$ = merge(
this.router.events.pipe(map(ALWAYS_FALSE_HANDLER)),
this.stream$,
- this.swipes$.pipe(
- filter(swipe => swipe.direction === 'left' || swipe.direction === 'right'),
- map(swipe => swipe.direction === 'right'),
- ),
).pipe(startWith(false), distinctUntilChanged());
constructor(
@@ -33,7 +29,6 @@ export class TuiDocHeaderComponent {
@Inject(TUI_DOC_LOGO) readonly logo: PolymorpheusContent,
@Inject(TUI_DOC_MENU_TEXT) readonly menu: string,
@Inject(Router) private readonly router: Router,
- @Inject(TuiSwipeService) private readonly swipes$: TuiSwipeService,
) {}
onClick(): void {
diff --git a/projects/addon-mobile/components/index.ts b/projects/addon-mobile/components/index.ts
index dbce1cc245fd..8003553ae33b 100644
--- a/projects/addon-mobile/components/index.ts
+++ b/projects/addon-mobile/components/index.ts
@@ -5,6 +5,7 @@ export * from '@taiga-ui/addon-mobile/components/mobile-dialog';
export * from '@taiga-ui/addon-mobile/components/pull-to-refresh';
export * from '@taiga-ui/addon-mobile/components/sheet';
export * from '@taiga-ui/addon-mobile/components/sheet-dialog';
+export * from '@taiga-ui/addon-mobile/components/swipe-action';
export * from '@taiga-ui/addon-mobile/components/tab-bar';
export * from '@taiga-ui/addon-mobile/components/theme-android';
export * from '@taiga-ui/addon-mobile/components/theme-ios';
diff --git a/projects/addon-mobile/components/swipe-action/index.ts b/projects/addon-mobile/components/swipe-action/index.ts
new file mode 100644
index 000000000000..5528e9971dc7
--- /dev/null
+++ b/projects/addon-mobile/components/swipe-action/index.ts
@@ -0,0 +1,2 @@
+export * from './swipe-actions.component';
+export * from './swipe-actions-auto-close.directive';
diff --git a/projects/addon-mobile/components/swipe-action/ng-package.json b/projects/addon-mobile/components/swipe-action/ng-package.json
new file mode 100644
index 000000000000..bebf62dcb5e5
--- /dev/null
+++ b/projects/addon-mobile/components/swipe-action/ng-package.json
@@ -0,0 +1,5 @@
+{
+ "lib": {
+ "entryFile": "index.ts"
+ }
+}
diff --git a/projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts b/projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts
new file mode 100644
index 000000000000..85fb2a628b45
--- /dev/null
+++ b/projects/addon-mobile/components/swipe-action/swipe-actions-auto-close.directive.ts
@@ -0,0 +1,25 @@
+import {Directive, ElementRef, inject, Input} from '@angular/core';
+import {tuiGetActualTarget} from '@taiga-ui/cdk';
+
+@Directive({
+ standalone: true,
+ selector: 'tui-swipe-actions[autoClose]',
+ host: {
+ '(document:pointerdown.silent)': 'onPointer($event)',
+ },
+})
+export class TuiSwipeActionsAutoCloseDirective {
+ private readonly el: HTMLElement = inject(ElementRef).nativeElement;
+
+ @Input()
+ autoClose = true;
+
+ onPointer(event: PointerEvent): void {
+ if (this.autoClose && !this.el.contains(tuiGetActualTarget(event))) {
+ this.el.scrollTo({
+ left: 0,
+ behavior: 'smooth',
+ });
+ }
+ }
+}
diff --git a/projects/addon-mobile/components/swipe-action/swipe-actions.component.ts b/projects/addon-mobile/components/swipe-action/swipe-actions.component.ts
new file mode 100644
index 000000000000..ad2ddc114bfd
--- /dev/null
+++ b/projects/addon-mobile/components/swipe-action/swipe-actions.component.ts
@@ -0,0 +1,21 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ResizeObserverModule} from '@ng-web-apis/resize-observer';
+
+@Component({
+ standalone: true,
+ selector: 'tui-swipe-actions',
+ imports: [ResizeObserverModule],
+ templateUrl: './swipe-actions.template.html',
+ styleUrls: ['./swipe-actions.style.less'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: {
+ '[style.--t-actions-width]': 'actionsWidth',
+ },
+})
+export class TuiSwipeActionsComponent {
+ actionsWidth = 0;
+
+ onResize({target}: ResizeObserverEntry): void {
+ this.actionsWidth = target.clientWidth;
+ }
+}
diff --git a/projects/addon-mobile/components/swipe-action/swipe-actions.style.less b/projects/addon-mobile/components/swipe-action/swipe-actions.style.less
new file mode 100644
index 000000000000..65330d2126d1
--- /dev/null
+++ b/projects/addon-mobile/components/swipe-action/swipe-actions.style.less
@@ -0,0 +1,50 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+ .scrollbar-hidden();
+
+ --tui-action-gap: 24;
+ --tui-actions-padding: 0.5rem;
+ --tui-item-size: 44;
+
+ display: flex;
+ width: stretch;
+ align-items: center;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ scroll-snap-type: x mandatory;
+ perspective: 1px;
+ perspective-origin: calc(100% + calc(1px * var(--tui-item-size) / 2) + var(--tui-actions-padding));
+}
+
+.t-content {
+ scroll-snap-align: start;
+ flex-shrink: 0;
+ width: 100%;
+}
+
+.t-actions {
+ display: flex;
+ gap: calc(1px * var(--tui-action-gap));
+ padding: 0 1rem 0 var(--tui-actions-padding);
+ scroll-snap-align: start;
+ align-items: center;
+ transform-style: preserve-3d;
+
+ ::ng-deep & > * {
+ .loop(6);
+ }
+}
+
+.loop (@i) when (@i > 1) {
+ .loop(@i - 1);
+ &:nth-child(@{i}) {
+ --t-distance: ~'calc(var(--tui-item-size) + var(--tui-action-gap)) * calc(@{i} - 1)';
+ --t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));
+ --t-scale: calc(1 / var(--t-factor));
+ --t-translate: calc(1px * (1 - 1 / var(--t-factor)));
+
+ transform: ~'translate3d(calc(calc((-100% - calc(1px * var(--tui-action-gap))) * (@{i} - 1)) / var(--t-scale)), 0, var(--t-translate))';
+ scale: var(--t-scale);
+ }
+}
diff --git a/projects/addon-mobile/components/swipe-action/swipe-actions.template.html b/projects/addon-mobile/components/swipe-action/swipe-actions.template.html
new file mode 100644
index 000000000000..a82f96630612
--- /dev/null
+++ b/projects/addon-mobile/components/swipe-action/swipe-actions.template.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
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 d239b3c0007e..566c17176fc7 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
@@ -24,6 +24,10 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifier[] = [
from: {name: 'TuiCheckboxModule', moduleSpecifier: '@taiga-ui/experimental'},
to: {name: 'TuiCheckboxModule', moduleSpecifier: '@taiga-ui/kit'},
},
+ {
+ from: {name: 'TuiSwipeActionsModule', moduleSpecifier: '@taiga-ui/experimental'},
+ to: {name: 'TuiSwipeActionsComponent', moduleSpecifier: '@taiga-ui/addon-mobile'},
+ },
{
from: {name: 'TuiRadioModule', moduleSpecifier: '@taiga-ui/experimental'},
to: {name: 'TuiRadioModule', moduleSpecifier: '@taiga-ui/kit'},
diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less
index 72d6dcd4c2ab..f51645f3de6d 100644
--- a/projects/core/styles/mixins/mixins.less
+++ b/projects/core/styles/mixins/mixins.less
@@ -411,9 +411,7 @@
&::-webkit-scrollbar,
&::-webkit-scrollbar-thumb {
- background: transparent;
- width: 0;
- height: 0;
+ display: none;
}
}
diff --git a/projects/core/styles/mixins/mixins.scss b/projects/core/styles/mixins/mixins.scss
index d95ee8a37913..ad388b617589 100644
--- a/projects/core/styles/mixins/mixins.scss
+++ b/projects/core/styles/mixins/mixins.scss
@@ -392,9 +392,7 @@
&::-webkit-scrollbar,
&::-webkit-scrollbar-thumb {
- background: transparent;
- width: 0;
- height: 0;
+ display: none;
}
}
diff --git a/projects/demo/src/modules/app/app.providers.ts b/projects/demo/src/modules/app/app.providers.ts
index d01a103525c8..81fc45e9a8bf 100644
--- a/projects/demo/src/modules/app/app.providers.ts
+++ b/projects/demo/src/modules/app/app.providers.ts
@@ -29,7 +29,6 @@ import {
TUI_BASE_HREF,
TUI_IS_E2E,
TUI_IS_PLAYWRIGHT,
- TUI_SWIPE_OPTIONS,
TUI_TAKE_ONLY_TRUSTED_EVENTS,
tuiAssert,
} from '@taiga-ui/cdk';
@@ -142,10 +141,6 @@ export const APP_PROVIDERS: Provider[] = [
provide: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,
useValue: exampleContentProcessor,
},
- {
- provide: TUI_SWIPE_OPTIONS,
- useValue: {timeout: 300, threshold: 60},
- },
{
provide: TUI_HINT_OPTIONS,
useFactory: () =>
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index ca117557c880..bcb2cd155aae 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -409,6 +409,15 @@ export const ROUTES: Routes = [
title: 'Surface',
},
},
+ {
+ path: 'components/swipe-actions',
+ loadChildren: async () =>
+ (await import('../components/swipe-action/swipe-actions.module'))
+ .ExampleTuiSwipeActionsModule,
+ data: {
+ title: 'SwipeActions',
+ },
+ },
{
path: 'experimental/textfield',
loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 09e37e01b5bf..8a448ca4fd4e 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -973,6 +973,12 @@ export const pages: TuiDocPages = [
keywords: 'card, container, wrapper, image, blur, overlay',
route: '/experimental/surface',
},
+ {
+ section: 'Components',
+ title: 'SwipeActions',
+ keywords: 'swipe, action, свайп, card, действие',
+ route: '/components/swipe-actions',
+ },
{
section: 'Experimental',
title: 'Textfield',
diff --git a/projects/demo/src/modules/components/swipe-action/examples/1/index.html b/projects/demo/src/modules/components/swipe-action/examples/1/index.html
new file mode 100644
index 000000000000..6ab22138837c
--- /dev/null
+++ b/projects/demo/src/modules/components/swipe-action/examples/1/index.html
@@ -0,0 +1,107 @@
+
+
+
+
+
{{ 10000 | tuiAmount: 'USD' | async }}
+
Dollar account
+
+
+
+
+
{{ 23000 | tuiAmount: 'EUR' | async }}
+
Goal
+
+
+
+
+
{{ 5000 | tuiAmount: 'EUR' | async }}
+
Vacations
+
+
+
+
Alex Inkin
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/components/swipe-action/examples/2/index.less b/projects/demo/src/modules/components/swipe-action/examples/2/index.less
new file mode 100644
index 000000000000..9512c5568355
--- /dev/null
+++ b/projects/demo/src/modules/components/swipe-action/examples/2/index.less
@@ -0,0 +1,18 @@
+:host {
+ width: 20rem;
+}
+
+.blur {
+ background-image: url('/assets/images/restaurant-2.jpg');
+ border-radius: 1rem;
+ padding: 1.25rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: var(--tui-text-01-night);
+ z-index: 1;
+
+ &:before {
+ backdrop-filter: blur(1rem);
+ }
+}
diff --git a/projects/demo/src/modules/components/swipe-action/examples/2/index.ts b/projects/demo/src/modules/components/swipe-action/examples/2/index.ts
new file mode 100644
index 000000000000..de8d1217d9a2
--- /dev/null
+++ b/projects/demo/src/modules/components/swipe-action/examples/2/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-swipe-action-example-2',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ encapsulation,
+ changeDetection,
+})
+export class TuiSwipeActionExample2 {
+ checkbox = false;
+}
diff --git a/projects/demo/src/modules/components/swipe-action/examples/3/index.html b/projects/demo/src/modules/components/swipe-action/examples/3/index.html
new file mode 100644
index 000000000000..d071dd8015dc
--- /dev/null
+++ b/projects/demo/src/modules/components/swipe-action/examples/3/index.html
@@ -0,0 +1,73 @@
+
+
+
+
+
{{ 10000 | tuiAmount: 'USD' | async }}
+
Dollar account
+
+
+
+
+
{{ 23000 | tuiAmount: 'EUR' | async }}
+
Goal
+
+
+
+
+
{{ 10000 | tuiAmount: 'USD' | async }}
+
Dollar account
+
+
+
+
+
{{ 10000 | tuiAmount: 'USD' | async }}
+
Dollar account
+
+
Card content
+
+
+
+```
diff --git a/projects/demo/src/modules/components/swipe-action/swipe-actions.component.ts b/projects/demo/src/modules/components/swipe-action/swipe-actions.component.ts
new file mode 100644
index 000000000000..35a6efb300ec
--- /dev/null
+++ b/projects/demo/src/modules/components/swipe-action/swipe-actions.component.ts
@@ -0,0 +1,44 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+ selector: 'example-swipe-actions',
+ templateUrl: './swipe-actions.template.html',
+ changeDetection,
+})
+export class ExampleTuiSwipeActionsComponent {
+ readonly exampleModule: TuiRawLoaderContent = import(
+ './examples/import/import-module.md?raw'
+ );
+
+ readonly exampleHtml: TuiRawLoaderContent = import(
+ './examples/import/insert-template.md?raw'
+ );
+
+ readonly example1: TuiDocExample = {
+ HTML: import('./examples/1/index.html?raw'),
+ LESS: import('./examples/1/index.less?raw'),
+ };
+
+ readonly example2: TuiDocExample = {
+ HTML: import('./examples/2/index.html?raw'),
+ LESS: import('./examples/2/index.less?raw'),
+ };
+
+ readonly example3: TuiDocExample = {
+ HTML: import('./examples/3/index.html?raw'),
+ LESS: import('./examples/3/index.less?raw'),
+ TypeScript: import('./examples/3/index.ts?raw'),
+ };
+
+ readonly example4: TuiDocExample = {
+ HTML: import('./examples/4/index.html?raw'),
+ TypeScript: import('./examples/4/index.ts?raw'),
+ };
+
+ readonly example5: TuiDocExample = {
+ HTML: import('./examples/5/index.html?raw'),
+ LESS: import('./examples/5/index.less?raw'),
+ };
+}
diff --git a/projects/demo/src/modules/components/swipe-action/swipe-actions.module.ts b/projects/demo/src/modules/components/swipe-action/swipe-actions.module.ts
new file mode 100644
index 000000000000..e2ae677ed932
--- /dev/null
+++ b/projects/demo/src/modules/components/swipe-action/swipe-actions.module.ts
@@ -0,0 +1,72 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {
+ TuiSwipeActionsAutoCloseDirective,
+ TuiSwipeActionsComponent,
+} from '@taiga-ui/addon-mobile';
+import {
+ TuiDataListModule,
+ TuiDropdownDirective,
+ TuiDropdownOpenDirective,
+ TuiNotificationModule,
+} from '@taiga-ui/core';
+import {
+ TuiAmountPipeModule,
+ TuiAvatarModule,
+ TuiButtonModule,
+ TuiCardModule,
+ TuiCellModule,
+ TuiCheckboxModule,
+ TuiIconModule,
+ TuiSurfaceModule,
+ TuiTitleModule,
+ TuiToggleModule,
+} from '@taiga-ui/experimental';
+import {TuiBadgeComponent, TuiBadgedContentComponent} from '@taiga-ui/kit';
+
+import {TuiSwipeActionExample1} from './examples/1';
+import {TuiSwipeActionExample2} from './examples/2';
+import {TuiSwipeActionExample3} from './examples/3';
+import {TuiSwipeActionExample4} from './examples/4';
+import {TuiSwipeActionExample5} from './examples/5';
+import {ExampleTuiSwipeActionsComponent} from './swipe-actions.component';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ TuiAddonDocModule,
+ TuiAvatarModule,
+ TuiCellModule,
+ TuiCardModule,
+ TuiSurfaceModule,
+ TuiSwipeActionsComponent,
+ TuiSwipeActionsAutoCloseDirective,
+ TuiAmountPipeModule,
+ TuiBadgedContentComponent,
+ TuiIconModule,
+ TuiToggleModule,
+ TuiBadgeComponent,
+ TuiNotificationModule,
+ RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSwipeActionsComponent)),
+ TuiButtonModule,
+ FormsModule,
+ TuiTitleModule,
+ TuiCheckboxModule,
+ TuiDropdownOpenDirective,
+ TuiDataListModule,
+ TuiDropdownDirective,
+ ],
+ declarations: [
+ ExampleTuiSwipeActionsComponent,
+ TuiSwipeActionExample1,
+ TuiSwipeActionExample2,
+ TuiSwipeActionExample3,
+ TuiSwipeActionExample4,
+ TuiSwipeActionExample5,
+ ],
+ exports: [ExampleTuiSwipeActionsComponent],
+})
+export class ExampleTuiSwipeActionsModule {}
diff --git a/projects/demo/src/modules/components/swipe-action/swipe-actions.template.html b/projects/demo/src/modules/components/swipe-action/swipe-actions.template.html
new file mode 100644
index 000000000000..375e1028b163
--- /dev/null
+++ b/projects/demo/src/modules/components/swipe-action/swipe-actions.template.html
@@ -0,0 +1,74 @@
+
+
+
+ Component should be used on mobile devices only.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
Import module:
+
+
+
+
+ -
+
Add to the template:
+
+
+
+
+
+
diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
index c2ee315d2281..1d45fc70c4b0 100644
--- a/projects/demo/used-icons.ts
+++ b/projects/demo/used-icons.ts
@@ -82,6 +82,11 @@ export const TUI_USED_ICONS = [
'tuiIconPhoneForwardedLarge',
'tuiIconMusicLarge',
'tuiIconMinus',
+ 'tuiIconDollarSignLarge',
+ 'tuiIconEdit3',
+ 'tuiIconShare',
+ 'tuiIconGift',
+ 'tuiIconBriefcase',
'tuiIconPhoneLarge',
'tuiIconMoreHorizontalLarge',
'tuiIconCodeLarge',
diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less
index d3fbbaf2cb51..8f0cda9b0474 100644
--- a/projects/experimental/directives/cell/cell.styles.less
+++ b/projects/experimental/directives/cell/cell.styles.less
@@ -60,6 +60,7 @@
flex-shrink: 7;
margin-inline-end: auto;
align-items: normal;
+ text-align: left;
}
[tuiTitle] ~ [tuiTitle] {
diff --git a/projects/kit/components/carousel/carousel.style.less b/projects/kit/components/carousel/carousel.style.less
index 1278e79a55cd..406b7bdd24bb 100644
--- a/projects/kit/components/carousel/carousel.style.less
+++ b/projects/kit/components/carousel/carousel.style.less
@@ -53,8 +53,6 @@
display: flex;
overflow: auto;
overscroll-behavior-x: none;
- padding-bottom: 2rem;
- margin-bottom: -2rem;
&:before,
&:after {