feat(experimental): SwipeActions add new component

projects/core/styles/mixins/mixins.less

@@ -407,9 +407,7 @@
 
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-thumb {
-        background: transparent;
-        width: 0;
-        height: 0;
+        display: none;
     }
 }
 

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

@@ -148,7 +148,7 @@ export const APP_PROVIDERS: Provider[] = [
     },
     {
         provide: TUI_SWIPE_OPTIONS,
-        useValue: {timeout: 300, threshold: 60},
+        useValue: {timeout: 200, threshold: 60},
     },
     {
         provide: TUI_HINT_OPTIONS,

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

@@ -427,6 +427,15 @@ export const ROUTES: Routes = [
             title: 'Surface',
         },
     },
+    {
+        path: 'experimental/swipe-actions',
+        loadChildren: async () =>
+            (await import('../experimental/swipe-action/swipe-actions.module'))
+                .ExampleTuiSwipeActionsModule,
+        data: {
+            title: 'SwipeActions',
+        },
+    },
     {
         path: 'experimental/thumbnail-card',
         loadChildren: async () =>

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

@@ -979,6 +979,12 @@ export const pages: TuiDocPages = [
         keywords: 'card, container, wrapper, image, blur, overlay',
         route: '/experimental/surface',
     },
+    {
+        section: 'Experimental',
+        title: 'SwipeActions',
+        keywords: 'swipe, action, свайп, card, действие',
+        route: '/experimental/swipe-actions',
+    },
     {
         section: 'Experimental',
         title: 'Title',

projects/demo/src/modules/experimental/swipe-action/examples/1/index.html

@@ -0,0 +1,107 @@
+<tui-swipe-actions>
+    <button
+        tuiSurface
+        class="surface"
+    >
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconDollarSignLarge"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+                <div tuiSubtitle>Dollar account</div>
+            </div>
+        </div>
+    </button>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        iconLeft="tuiIconEdit3"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconShare"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>
+
+<tui-swipe-actions>
+    <button
+        tuiSurface
+        class="surface"
+    >
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconGift"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
+                <div tuiSubtitle>Goal</div>
+            </div>
+        </div>
+    </button>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>
+
+<tui-swipe-actions [style.--t-item-size]="32">
+    <button
+        tuiSurface
+        class="surface"
+    >
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconBriefcase"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 5000 | tuiAmount: 'EUR' | async }}</strong>
+                <div tuiSubtitle>Vacations</div>
+            </div>
+        </div>
+    </button>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        iconLeft="tuiIconEdit3"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconShare"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="destructive"
+        iconLeft="tuiIconTrash"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>

projects/demo/src/modules/experimental/swipe-action/examples/1/index.less

@@ -0,0 +1,14 @@
+.surface {
+    margin: 1.5rem 1rem;
+    min-width: 17rem;
+    padding: 1rem;
+    box-shadow: var(--tui-shadow);
+
+    &:active {
+        transform: scale(0.95);
+    }
+}
+
+button[tuiSwipeAction] {
+    border-radius: 100%;
+}

projects/demo/src/modules/experimental/swipe-action/examples/1/index.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-swipe-action-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiSwipeActionExample1 {}

projects/demo/src/modules/experimental/swipe-action/examples/2/index.html

@@ -0,0 +1,34 @@
+<tui-swipe-actions>
+    <div
+        tuiMode="onDark"
+        tuiSurface
+        class="blur"
+    >
+        <tui-avatar src="/assets/images/avatar.jpg"></tui-avatar>
+        <h3 tuiTitle="m">Alex Inkin</h3>
+        <button
+            appearance="glass"
+            iconLeft="tuiIconMailLarge"
+            size="m"
+            tuiIconButton
+            class="button"
+        >
+            Message
+        </button>
+    </div>
+
+    <input
+        tuiSwipeAction
+        tuiToggle
+        type="checkbox"
+        [(ngModel)]="checkbox"
+    />
+    <button
+        appearance="destructive"
+        iconLeft="tuiIconTrash"
+        size="m"
+        tuiIconButton
+        tuiSwipeAction
+        [style.borderRadius.%]="100"
+    ></button>
+</tui-swipe-actions>

projects/demo/src/modules/experimental/swipe-action/examples/2/index.less

@@ -0,0 +1,21 @@
+[tuiSurface] {
+    min-width: 17rem;
+}
+
+[tuiToggle][tuiSwipeAction] {
+    margin-left: 1rem;
+}
+
+.blur {
+    background-image: url('/assets/images/restaurant-2.jpg');
+    border-radius: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--tui-text-01-night);
+    z-index: 1;
+
+    &:before {
+        backdrop-filter: blur(1rem);
+    }
+}

projects/demo/src/modules/experimental/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;
+}

projects/demo/src/modules/experimental/swipe-action/examples/import/import-module.md

@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiSwipeActionsModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiSwipeActionsModule,
+  ],
+})
+export class MyModule {}
+```

projects/demo/src/modules/experimental/swipe-action/examples/import/insert-template.md

@@ -0,0 +1,27 @@
+```html
+<tui-swipe-actions>
+  <div tuiCard="l">
+    <div tuiCell="l">
+      <tui-avatar
+        appearance="primary"
+        src="tuiIconStar"
+      ></tui-avatar>
+      <div tuiTitle>
+        Title
+        <div tuiSubtitle>Description</div>
+      </div>
+      <div tuiTitle>
+        Secondary title
+        <div tuiSubtitle>Another description</div>
+      </div>
+    </div>
+  </div>
+
+  <button
+    iconLeft="tuiIconEye"
+    size="m"
+    tuiIconButton
+    tuiSwipeAction
+  ></button>
+</tui-swipe-actions>
+```

projects/demo/src/modules/experimental/swipe-action/swipe-actions.component.ts

@@ -0,0 +1,28 @@
+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'),
+    };
+}

projects/demo/src/modules/experimental/swipe-action/swipe-actions.module.ts

@@ -0,0 +1,51 @@
+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 {TuiNotificationModule} from '@taiga-ui/core';
+import {
+    TuiAmountPipeModule,
+    TuiAvatarModule,
+    TuiBadgedContentModule,
+    TuiBadgeModule,
+    TuiButtonModule,
+    TuiCellModule,
+    TuiIconModule,
+    TuiSurfaceModule,
+    TuiSwipeActionsModule,
+    TuiTitleModule,
+    TuiToggleModule,
+} from '@taiga-ui/experimental';
+
+import {TuiSwipeActionExample1} from './examples/1';
+import {TuiSwipeActionExample2} from './examples/2';
+import {ExampleTuiSwipeActionsComponent} from './swipe-actions.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAddonDocModule,
+        TuiAvatarModule,
+        TuiCellModule,
+        TuiSurfaceModule,
+        TuiSwipeActionsModule,
+        TuiAmountPipeModule,
+        TuiBadgedContentModule,
+        TuiIconModule,
+        TuiToggleModule,
+        TuiBadgeModule,
+        TuiNotificationModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSwipeActionsComponent)),
+        TuiButtonModule,
+        FormsModule,
+        TuiTitleModule,
+    ],
+    declarations: [
+        ExampleTuiSwipeActionsComponent,
+        TuiSwipeActionExample1,
+        TuiSwipeActionExample2,
+    ],
+    exports: [ExampleTuiSwipeActionsComponent],
+})
+export class ExampleTuiSwipeActionsModule {}