chore: fix examples and comments

taiga-family · Feb 5, 2024 · 3a69fdf · 3a69fdf
1 parent 2bc60e0
commit 3a69fdf
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 89 deletions.
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
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Inject, Input} from '@angular/core';
+import {Directive, ElementRef, inject, Input} from '@angular/core';
 import {tuiGetActualTarget} from '@taiga-ui/cdk';
 
 @Directive({
@@ -9,23 +9,17 @@ import {tuiGetActualTarget} from '@taiga-ui/cdk';
     },
 })
 export class TuiSwipeActionsAutoCloseDirective {
+    private readonly el: HTMLElement = inject(ElementRef).nativeElement;
+
     @Input()
     autoClose = true;
 
-    constructor(@Inject(ElementRef) private readonly el: ElementRef<HTMLElement>) {}
-
     onPointer(event: PointerEvent): void {
-        const target = tuiGetActualTarget(event);
-
-        if (this.autoClose && !this.el.nativeElement.contains(target)) {
-            this.close();
+        if (this.autoClose && !this.el.contains(tuiGetActualTarget(event))) {
+            this.el.scrollTo({
+                left: 0,
+                behavior: 'smooth',
+            });
         }
     }
-
-    private close(): void {
-        this.el.nativeElement.scrollTo({
-            left: 0,
-            behavior: 'smooth',
-        });
-    }
 }
diff --git 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/components/swipe-action/examples/1/index.html b/projects/demo/src/modules/components/swipe-action/examples/1/index.html
@@ -1,14 +1,16 @@
 <tui-swipe-actions>
-    <div tuiSurface="elevated">
-        <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
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconDollarSignLarge"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+            <div tuiSubtitle>Dollar account</div>
         </div>
     </div>
 
@@ -34,16 +36,18 @@
 </tui-swipe-actions>
 
 <tui-swipe-actions>
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconGift"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
-                <div tuiSubtitle>Goal</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconGift"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
+            <div tuiSubtitle>Goal</div>
         </div>
     </div>
 
@@ -59,16 +63,18 @@
     [style.--tui-action-gap]="16"
     [style.--tui-item-size]="32"
 >
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconBriefcase"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 5000 | tuiAmount: 'EUR' | async }}</strong>
-                <div tuiSubtitle>Vacations</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconBriefcase"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 5000 | tuiAmount: 'EUR' | async }}</strong>
+            <div tuiSubtitle>Vacations</div>
         </div>
     </div>
 

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
@@ -5,6 +5,7 @@
 .blur {
     background-image: url('/assets/images/restaurant-2.jpg');
     border-radius: 1rem;
+    padding: 1.25rem;
     display: flex;
     justify-content: space-between;
     align-items: center;

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
@@ -1,14 +1,16 @@
 <tui-swipe-actions [autoClose]="true">
-    <div tuiSurface="elevated">
-        <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
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconDollarSignLarge"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+            <div tuiSubtitle>Dollar account</div>
         </div>
     </div>
 
@@ -34,16 +36,18 @@
 </tui-swipe-actions>
 
 <tui-swipe-actions [autoClose]="true">
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconGift"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
-                <div tuiSubtitle>Goal</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconGift"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
+            <div tuiSubtitle>Goal</div>
         </div>
     </div>
 

diff --git a/projects/demo/src/modules/components/swipe-action/examples/4/index.html b/projects/demo/src/modules/components/swipe-action/examples/4/index.html
@@ -1,14 +1,16 @@
 <tui-swipe-actions>
-    <div tuiSurface="elevated">
-        <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
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconDollarSignLarge"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+            <div tuiSubtitle>Dollar account</div>
         </div>
     </div>
 

diff --git a/projects/demo/src/modules/components/swipe-action/examples/5/index.html b/projects/demo/src/modules/components/swipe-action/examples/5/index.html
@@ -1,14 +1,16 @@
 <tui-swipe-actions>
-    <div tuiSurface="elevated">
-        <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
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconDollarSignLarge"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+            <div tuiSubtitle>Dollar account</div>
         </div>
     </div>
 

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
@@ -17,6 +17,7 @@ import {
     TuiAmountPipeModule,
     TuiAvatarModule,
     TuiButtonModule,
+    TuiCardModule,
     TuiCellModule,
     TuiCheckboxModule,
     TuiIconModule,
@@ -39,6 +40,7 @@ import {ExampleTuiSwipeActionsComponent} from './swipe-actions.component';
         TuiAddonDocModule,
         TuiAvatarModule,
         TuiCellModule,
+        TuiCardModule,
         TuiSurfaceModule,
         TuiSwipeActionsComponent,
         TuiSwipeActionsAutoCloseDirective,

diff --git 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 {