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 index 2f28486b90bd..85fb2a628b45 100644 --- 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) {} - 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 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/components/swipe-action/examples/1/index.html b/projects/demo/src/modules/components/swipe-action/examples/1/index.html index b341e9552110..6ab22138837c 100644 --- 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 @@ -
-
- -
- {{ 10000 | tuiAmount: 'USD' | async }} -
Dollar account
-
+
+ +
+ {{ 10000 | tuiAmount: 'USD' | async }} +
Dollar account
@@ -34,16 +36,18 @@ -
-
- -
- {{ 23000 | tuiAmount: 'EUR' | async }} -
Goal
-
+
+ +
+ {{ 23000 | tuiAmount: 'EUR' | async }} +
Goal
@@ -59,16 +63,18 @@ [style.--tui-action-gap]="16" [style.--tui-item-size]="32" > -
-
- -
- {{ 5000 | tuiAmount: 'EUR' | async }} -
Vacations
-
+
+ +
+ {{ 5000 | tuiAmount: 'EUR' | async }} +
Vacations
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 index b5b68bd9fdd1..9512c5568355 100644 --- 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 index 5f8d88dbe27f..d071dd8015dc 100644 --- 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 @@ -
-
- -
- {{ 10000 | tuiAmount: 'USD' | async }} -
Dollar account
-
+
+ +
+ {{ 10000 | tuiAmount: 'USD' | async }} +
Dollar account
@@ -34,16 +36,18 @@ -
-
- -
- {{ 23000 | tuiAmount: 'EUR' | async }} -
Goal
-
+
+ +
+ {{ 23000 | tuiAmount: 'EUR' | async }} +
Goal
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 index 4e6bb225366c..241f943e4493 100644 --- 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 @@ -
-
- -
- {{ 10000 | tuiAmount: 'USD' | async }} -
Dollar account
-
+
+ +
+ {{ 10000 | tuiAmount: 'USD' | async }} +
Dollar account
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 index 2a07587dcde7..215648ad1328 100644 --- 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 @@ -
-
- -
- {{ 10000 | tuiAmount: 'USD' | async }} -
Dollar account
-
+
+ +
+ {{ 10000 | tuiAmount: 'USD' | async }} +
Dollar account
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 index bcd8dce80ddc..e2ae677ed932 100644 --- 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 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 {