@taiga-ui/kit 2.26.0 → 2.27.0

package/bundles/taiga-ui-kit-components-carousel.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-web-apis/intersection-observer'), require('@taiga-ui/cdk'), require('rxjs'), require('rxjs/operators'), require('@ng-web-apis/common'), require('@angular/common'), require('@taiga-ui/kit/directives'), require('@taiga-ui/core'), require('@tinkoff/ng-event-plugins')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/carousel', ['exports', '@angular/core', '@ng-web-apis/intersection-observer', '@taiga-ui/cdk', 'rxjs', 'rxjs/operators', '@ng-web-apis/common', '@angular/common', '@taiga-ui/kit/directives', '@taiga-ui/core', '@tinkoff/ng-event-plugins'], factory) :
-    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components.carousel = {}), global.ng.core, global.intersectionObserver, global.cdk, global.rxjs, global.rxjs.operators, global.common, global.ng.common, global['taiga-ui'].kit.directives, global.core$1, global.ngEventPlugins));
-}(this, (function (exports, core, intersectionObserver, cdk, rxjs, operators, common, common$1, directives, core$1, ngEventPlugins) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-web-apis/intersection-observer'), require('@taiga-ui/cdk'), require('@ng-web-apis/common'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@taiga-ui/core')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/carousel', ['exports', '@angular/core', '@ng-web-apis/intersection-observer', '@taiga-ui/cdk', '@ng-web-apis/common', 'rxjs', 'rxjs/operators', '@angular/common', '@taiga-ui/core'], factory) :
+    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components.carousel = {}), global.ng.core, global.intersectionObserver, global.cdk, global.common, global.rxjs, global.rxjs.operators, global.ng.common, global.core$1));
+}(this, (function (exports, core, intersectionObserver, cdk, common, rxjs, operators, common$1, core$1) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -223,159 +223,34 @@
         return value;
     }
 
-    var TuiCarouselDirective = /** @class */ (function (_super) {
-        __extends(TuiCarouselDirective, _super);
-        function TuiCarouselDirective(destroy$, elementRef, visible$) {
-            var _this = _super.call(this, function (subscriber) { return _this.output$.subscribe(subscriber); }) || this;
-            _this.destroy$ = destroy$;
-            _this.elementRef = elementRef;
-            _this.visible$ = visible$;
-            _this.index$ = new rxjs.BehaviorSubject(NaN);
-            _this.duration$ = new rxjs.BehaviorSubject(0);
-            _this.running$ = rxjs.merge(cdk.typedFromEvent(_this.elementRef.nativeElement, 'mouseenter').pipe(operators.mapTo(false)), cdk.typedFromEvent(_this.elementRef.nativeElement, 'mouseleave').pipe(operators.mapTo(true)), _this.visible$).pipe(operators.takeUntil(_this.destroy$), operators.shareReplay(1));
-            _this.output$ = rxjs.combineLatest([
-                _this.index$.pipe(operators.filter(function (v) { return !isNaN(v); })),
-                _this.duration$,
-            ]).pipe(operators.switchMap(function (_a) {
-                var _b = __read(_a, 2), index = _b[0], duration = _b[1];
-                return duration
-                    ? rxjs.interval(duration).pipe(operators.withLatestFrom(_this.running$), operators.filter(function (_a) {
-                        var _b = __read(_a, 2), _ = _b[0], running = _b[1];
-                        return running;
-                    }), operators.scan(function (acc) { return ++acc; }, index), operators.startWith(index))
-                    : rxjs.of(index);
-            }), operators.distinctUntilChanged());
-            // So that initial position is scrolled to instantly
-            _this.inited = false;
-            return _this;
-        }
-        Object.defineProperty(TuiCarouselDirective.prototype, "index", {
-            set: function (index) {
-                this.index$.next(index);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiCarouselDirective.prototype, "duration", {
-            set: function (duration) {
-                this.duration$.next(duration);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        TuiCarouselDirective.prototype.ngOnInit = function () {
-            if (isNaN(this.index$.value)) {
-                this.index$.next(0);
-            }
-        };
-        TuiCarouselDirective.prototype.prev = function () {
-            this.index$.next(this.index$.value - 1);
-        };
-        TuiCarouselDirective.prototype.next = function () {
-            this.index$.next(this.index$.value + 1);
-        };
-        TuiCarouselDirective.ctorParameters = function () { return [
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [cdk.TuiDestroyService,] }] },
-            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [common.PAGE_VISIBILITY,] }] }
-        ]; };
-        __decorate([
-            core.Input()
-        ], TuiCarouselDirective.prototype, "index", null);
-        __decorate([
-            core.Input()
-        ], TuiCarouselDirective.prototype, "duration", null);
-        TuiCarouselDirective = __decorate([
-            core.Directive({
-                selector: 'tui-carousel',
-                exportAs: 'tui-carousel',
-                providers: [cdk.TuiDestroyService],
-            }),
-            __param(0, core.Inject(cdk.TuiDestroyService)),
-            __param(1, core.Inject(core.ElementRef)),
-            __param(2, core.Inject(common.PAGE_VISIBILITY))
-        ], TuiCarouselDirective);
-        return TuiCarouselDirective;
-    }(rxjs.Observable));
-
     // @dynamic
-    var TuiCarouselDraggableDirective = /** @class */ (function (_super) {
-        __extends(TuiCarouselDraggableDirective, _super);
-        function TuiCarouselDraggableDirective(documentRef, isMobile, elementRef, pan$) {
-            var _this = _super.call(this, function (subscriber) { return _this.transform$.subscribe(subscriber); }) || this;
-            _this.documentRef = documentRef;
-            _this.isMobile = isMobile;
-            _this.elementRef = elementRef;
-            _this.pan$ = pan$;
-            _this.transform$ = _this.isMobile
-                ? rxjs.EMPTY
-                : _this.pan$.pipe(operators.filter(function () { return _this.draggable; }), operators.scan(function (acc, _a) {
-                    var _b = __read(_a, 1), cur = _b[0];
-                    return acc + cur;
-                }, 0), operators.takeUntil(cdk.typedFromEvent(_this.documentRef, 'mouseup').pipe(operators.delay(0))), operators.map(function (x) { return "translateX(" + cdk.clamp(x, _this.min, _this.max) + "px)"; }), operators.endWith(null), operators.repeat());
-            _this.min = -Infinity;
-            _this.max = Infinity;
-            _this.draggable = true;
-            _this.transitioned = false;
-            return _this;
-        }
-        TuiCarouselDraggableDirective.prototype.onMouseDown = function () {
-            var _a = this.elementRef.nativeElement, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
-            this.max = scrollLeft;
-            this.min = clientWidth - Math.round(scrollWidth) + Math.round(scrollLeft);
-            this.transitioned = true;
-        };
-        TuiCarouselDraggableDirective.prototype.onTransitionEnd = function (target) {
-            if (this.elementRef.nativeElement.firstElementChild === target) {
-                this.transitioned = false;
-            }
-        };
-        TuiCarouselDraggableDirective.ctorParameters = function () { return [
-            { type: Document, decorators: [{ type: core.Inject, args: [common$1.DOCUMENT,] }] },
-            { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_MOBILE,] }] },
-            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [intersectionObserver.INTERSECTION_ROOT,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [cdk.TuiPanService,] }] }
-        ]; };
-        __decorate([
-            core.Input(),
-            core.HostBinding('class._draggable'),
-            cdk.tuiDefaultProp()
-        ], TuiCarouselDraggableDirective.prototype, "draggable", void 0);
-        __decorate([
-            core.HostBinding('class._transitioned')
-        ], TuiCarouselDraggableDirective.prototype, "transitioned", void 0);
-        __decorate([
-            core.HostListener('mousedown.silent')
-        ], TuiCarouselDraggableDirective.prototype, "onMouseDown", null);
-        __decorate([
-            core.HostListener('transitionend', ['$event.target'])
-        ], TuiCarouselDraggableDirective.prototype, "onTransitionEnd", null);
-        TuiCarouselDraggableDirective = __decorate([
-            core.Directive({
-                selector: 'tui-carousel[draggable]',
-                providers: [cdk.TuiPanService],
-            }),
-            __param(0, core.Inject(common$1.DOCUMENT)),
-            __param(1, core.Inject(cdk.TUI_IS_MOBILE)),
-            __param(2, core.Inject(intersectionObserver.INTERSECTION_ROOT)),
-            __param(3, core.Inject(cdk.TuiPanService))
-        ], TuiCarouselDraggableDirective);
-        return TuiCarouselDraggableDirective;
-    }(rxjs.Observable));
-
     var TuiCarouselComponent = /** @class */ (function () {
-        function TuiCarouselComponent(transform$, index$) {
-            var _this = this;
-            this.transform$ = transform$;
-            this.index$ = index$;
-            this.intersected$ = new rxjs.Subject();
+        function TuiCarouselComponent(changeDetectorRef, elementRef, isMobile) {
+            this.changeDetectorRef = changeDetectorRef;
+            this.elementRef = elementRef;
+            this.isMobile = isMobile;
+            this.translate = 0;
+            this.draggable = false;
             this.itemsCount = 1;
             this.index = 0;
             this.indexChange = new core.EventEmitter();
-            this.manual$ = this.index$.pipe(operators.map(function (index) { return _this.loopback(index); }));
-            this.attached = false;
             this.items = cdk.EMPTY_QUERY;
+            this.transitioned = true;
         }
+        Object.defineProperty(TuiCarouselComponent.prototype, "transform", {
+            get: function () {
+                var x = this.transitioned ? this.computedTranslate : this.translate;
+                return "translateX(" + 100 * x + "%)";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiCarouselComponent.prototype.onTransitioned = function (transitioned) {
+            this.transitioned = transitioned;
+            if (!transitioned) {
+                this.translate = this.computedTranslate;
+            }
+        };
         TuiCarouselComponent.prototype.getStyle = function (itemsCount) {
             var percent = 100 / itemsCount + "%";
             return {
@@ -384,29 +259,77 @@
                 maxWidth: percent,
             };
         };
+        TuiCarouselComponent.prototype.next = function () {
+            this.updateIndex(this.index + 1);
+        };
+        TuiCarouselComponent.prototype.prev = function () {
+            this.updateIndex(this.index - 1);
+        };
+        TuiCarouselComponent.prototype.isDisabled = function (index) {
+            return index < this.index || index > this.index + this.itemsCount;
+        };
         TuiCarouselComponent.prototype.onIntersection = function (_a, index) {
-            var intersectionRatio = _a.intersectionRatio, intersectionRect = _a.intersectionRect, rootBounds = _a.rootBounds;
-            if (!this.attached ||
-                !intersectionRatio ||
-                intersectionRatio === 1 ||
-                // Phantom intersections due to width wobble on drag
-                intersectionRect.left > Number(rootBounds === null || rootBounds === void 0 ? void 0 : rootBounds.left)) {
+            var intersectionRatio = _a.intersectionRatio;
+            if (intersectionRatio && intersectionRatio !== 1 && !this.transitioned) {
+                this.updateIndex(index - Math.floor(this.itemsCount / 2));
+            }
+        };
+        TuiCarouselComponent.prototype.onScroll = function (delta) {
+            if (!this.isMobile) {
+                this.updateIndex(this.index + delta);
+            }
+        };
+        TuiCarouselComponent.prototype.onPan = function (x) {
+            if (!this.computedDraggable) {
+                return;
+            }
+            var clientWidth = this.elementRef.nativeElement.clientWidth;
+            var min = 1 - this.items.length / this.itemsCount;
+            this.translate = cdk.clamp(x / clientWidth + this.translate, min, 0);
+        };
+        TuiCarouselComponent.prototype.onSwipe = function (direction) {
+            if (Math.round(this.translate) !== -this.index || !this.computedDraggable) {
                 return;
             }
-            this.indexChange.emit(index - Math.floor(this.itemsCount / 2));
+            else if (direction === 'left') {
+                this.next();
+            }
+            else if (direction === 'right') {
+                this.prev();
+            }
         };
-        TuiCarouselComponent.prototype.onPresent = function (attached) {
-            this.attached = attached;
+        TuiCarouselComponent.prototype.onAutoscroll = function () {
+            this.updateIndex(this.index === this.items.length - 1 ? 0 : this.index + 1);
         };
-        TuiCarouselComponent.prototype.loopback = function (index) {
-            var safe = this.items.length || index + 1;
-            var remainder = index % safe;
-            return remainder < 0 ? remainder + this.items.length : remainder;
+        Object.defineProperty(TuiCarouselComponent.prototype, "computedTranslate", {
+            get: function () {
+                return -this.index / this.itemsCount;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiCarouselComponent.prototype, "computedDraggable", {
+            get: function () {
+                return this.isMobile || this.draggable;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiCarouselComponent.prototype.updateIndex = function (index) {
+            this.index = cdk.clamp(index, 0, this.items.length - 1);
+            this.indexChange.emit(this.index);
+            this.changeDetectorRef.markForCheck();
         };
         TuiCarouselComponent.ctorParameters = function () { return [
-            { type: rxjs.Observable, decorators: [{ type: core.Optional }, { type: core.Inject, args: [TuiCarouselDraggableDirective,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [TuiCarouselDirective,] }] }
+            { type: core.ChangeDetectorRef, decorators: [{ type: core.Inject, args: [core.ChangeDetectorRef,] }] },
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+            { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_MOBILE,] }] }
         ]; };
+        __decorate([
+            core.Input(),
+            core.HostBinding('class._draggable'),
+            cdk.tuiDefaultProp()
+        ], TuiCarouselComponent.prototype, "draggable", void 0);
         __decorate([
             core.Input(),
             cdk.tuiDefaultProp()
@@ -421,13 +344,22 @@
         __decorate([
             core.ContentChildren(cdk.TuiItemDirective, { read: core.TemplateRef })
         ], TuiCarouselComponent.prototype, "items", void 0);
+        __decorate([
+            core.HostBinding('class._transitioned')
+        ], TuiCarouselComponent.prototype, "transitioned", void 0);
+        __decorate([
+            core.HostListener('touchstart', ['false']),
+            core.HostListener('touchend', ['true']),
+            core.HostListener('mousedown', ['false']),
+            core.HostListener('document:mouseup.silent', ['true'])
+        ], TuiCarouselComponent.prototype, "onTransitioned", null);
         __decorate([
             cdk.tuiPure
         ], TuiCarouselComponent.prototype, "getStyle", null);
         TuiCarouselComponent = __decorate([
             core.Component({
                 selector: 'tui-carousel',
-                template: "<ng-container *ngIf=\"items.changes | async\"></ng-container>\n<div\n    *ngIf=\"{\n        manual: manual$ | async,\n        intersected: indexChange | async\n    } as state\"\n    waIntersectionObserver\n    waIntersectionThreshold=\"0,1\"\n    waIntersectionRootMargin=\"100px 100000px 100px -51%\"\n    class=\"t-items\"\n    [class.t-items_visible]=\"attached\"\n    [style.transform]=\"transform$ | async\"\n    (tuiPresentChange)=\"onPresent($event)\"\n>\n    <div\n        *ngFor=\"let item of items; let i = index\"\n        tuiCarouselScroller\n        class=\"t-item\"\n        [scroll]=\"attached && i === state.manual && i !== state.intersected\"\n        [index]=\"i\"\n        [current]=\"state.intersected\"\n        [ngStyle]=\"getStyle(itemsCount)\"\n        (waIntersectionObservee)=\"onIntersection($event[0], i)\"\n    >\n        <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n    </div>\n</div>\n<div class=\"t-content\">\n    <ng-content></ng-content>\n</div>\n",
+                template: "<ng-container *ngIf=\"items.changes | async\"></ng-container>\n<div class=\"t-scroller\" (tuiCarouselScroll)=\"onScroll($event)\">\n    <div class=\"t-wrapper\">\n        <div\n            waIntersectionObserver\n            waIntersectionThreshold=\"0,1\"\n            waIntersectionRootMargin=\"100px 100000px 100px -51%\"\n            class=\"t-items\"\n            [style.transform]=\"transform\"\n            (tuiPan)=\"onPan($event[0])\"\n            (tuiSwipe)=\"onSwipe($event.direction)\"\n            (tuiCarouselAutoscroll)=\"onAutoscroll()\"\n        >\n            <fieldset\n                *ngFor=\"let item of items; let i = index\"\n                class=\"t-item\"\n                [disabled]=\"isDisabled(i)\"\n                [ngStyle]=\"getStyle(itemsCount)\"\n                (waIntersectionObservee)=\"onIntersection($event[0], i)\"\n            >\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </fieldset>\n        </div>\n    </div>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [
                     {
@@ -435,15 +367,70 @@
                         useExisting: core.ElementRef,
                     },
                 ],
-                styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:relative;display:block;overflow:auto;overscroll-behavior-x:none;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{background:0 0;width:0;height:0}:host._transitioned{-ms-scroll-snap-type:none;scroll-snap-type:none}:host._draggable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host._draggable:hover{cursor:-webkit-grab;cursor:grab}:host._draggable:active{cursor:-webkit-grabbing;cursor:grabbing}.t-items{display:flex;align-items:center;visibility:hidden}.t-items_visible{visibility:visible}.t-items:not([style*=transform]){transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-item{padding:0 1.25rem;flex:1;min-width:100%;max-width:100%;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always}.t-content{position:sticky;left:0;display:flex;justify-content:center}"]
+                styles: [":host{position:relative;display:block;overflow:hidden}:host._draggable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host._draggable:hover{cursor:-webkit-grab;cursor:grab}:host._draggable:active{cursor:-webkit-grabbing;cursor:grabbing}.t-items{display:flex;align-items:center}:host._transitioned .t-items{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-item{padding:0 1.25rem;flex:1;min-width:100%;max-width:100%;box-sizing:border-box;border:none;margin:0}.t-wrapper{position:sticky;left:0;right:0;min-width:100%;overflow:hidden}.t-scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;overflow:auto;overscroll-behavior-x:none;padding-bottom:2rem;margin-bottom:-2rem}.t-scroller::-webkit-scrollbar,.t-scroller::-webkit-scrollbar-thumb{background:0 0;width:0;height:0}.t-scroller:after,.t-scroller:before{content:'';display:block;min-width:1rem}"]
             }),
-            __param(0, core.Optional()),
-            __param(0, core.Inject(TuiCarouselDraggableDirective)),
-            __param(1, core.Inject(TuiCarouselDirective))
+            __param(0, core.Inject(core.ChangeDetectorRef)),
+            __param(1, core.Inject(core.ElementRef)),
+            __param(2, core.Inject(cdk.TUI_IS_MOBILE))
         ], TuiCarouselComponent);
         return TuiCarouselComponent;
     }());
 
+    var TuiCarouselDirective = /** @class */ (function (_super) {
+        __extends(TuiCarouselDirective, _super);
+        function TuiCarouselDirective(elementRef, visible$) {
+            var _this = _super.call(this, function (subscriber) { return _this.output$.subscribe(subscriber); }) || this;
+            _this.elementRef = elementRef;
+            _this.visible$ = visible$;
+            _this.duration$ = new rxjs.BehaviorSubject(0);
+            _this.running$ = rxjs.merge(cdk.typedFromEvent(_this.elementRef.nativeElement, 'mouseenter').pipe(operators.mapTo(false)), cdk.typedFromEvent(_this.elementRef.nativeElement, 'touchstart').pipe(operators.mapTo(false)), cdk.typedFromEvent(_this.elementRef.nativeElement, 'touchend').pipe(operators.mapTo(true)), cdk.typedFromEvent(_this.elementRef.nativeElement, 'mouseleave').pipe(operators.mapTo(true)), _this.visible$);
+            _this.output$ = rxjs.combineLatest([_this.duration$, _this.running$]).pipe(operators.switchMap(function (_a) {
+                var _b = __read(_a, 2), duration = _b[0], running = _b[1];
+                return duration && running ? rxjs.interval(duration) : rxjs.EMPTY;
+            }));
+            return _this;
+        }
+        Object.defineProperty(TuiCarouselDirective.prototype, "duration", {
+            set: function (duration) {
+                this.duration$.next(duration);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiCarouselDirective.ctorParameters = function () { return [
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [common.PAGE_VISIBILITY,] }] }
+        ]; };
+        __decorate([
+            core.Input()
+        ], TuiCarouselDirective.prototype, "duration", null);
+        TuiCarouselDirective = __decorate([
+            core.Directive({
+                selector: 'tui-carousel',
+            }),
+            __param(0, core.Inject(core.ElementRef)),
+            __param(1, core.Inject(common.PAGE_VISIBILITY))
+        ], TuiCarouselDirective);
+        return TuiCarouselDirective;
+    }(rxjs.Observable));
+
+    var TuiCarouselAutoscrollDirective = /** @class */ (function () {
+        function TuiCarouselAutoscrollDirective(tuiCarouselAutoscroll) {
+            this.tuiCarouselAutoscroll = tuiCarouselAutoscroll;
+        }
+        TuiCarouselAutoscrollDirective.ctorParameters = function () { return [
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [TuiCarouselDirective,] }] }
+        ]; };
+        TuiCarouselAutoscrollDirective = __decorate([
+            core.Directive({
+                selector: '[tuiCarouselAutoscroll]',
+                outputs: ['tuiCarouselAutoscroll'],
+            }),
+            __param(0, core.Inject(TuiCarouselDirective))
+        ], TuiCarouselAutoscrollDirective);
+        return TuiCarouselAutoscrollDirective;
+    }());
+
     // TODO: remove in ivy compilation
     var CAROUSEL_BUTTON_OPTIONS = {
         appearance: "secondary" /* Secondary */,
@@ -467,78 +454,33 @@
         return TuiCarouselButtonsDirective;
     }());
 
-    function shouldScroll() {
-        var _a;
-        return !this.isMobile && !!((_a = this.draggable) === null || _a === void 0 ? void 0 : _a.draggable) && this.index === this.current;
-    }
-    // @dynamic
-    var TuiCarouselScrollerDirective = /** @class */ (function () {
-        function TuiCarouselScrollerDirective(draggable, isMobile, directive, elementRef, root) {
-            this.draggable = draggable;
-            this.isMobile = isMobile;
-            this.directive = directive;
+    var TuiCarouselScrollDirective = /** @class */ (function () {
+        function TuiCarouselScrollDirective(elementRef) {
+            var _this = this;
             this.elementRef = elementRef;
-            this.root = root;
-            this.index = 0;
-            this.current = 0;
+            this.tuiCarouselScroll = cdk.typedFromEvent(this.elementRef.nativeElement, 'wheel').pipe(operators.filter(function (_a) {
+                var deltaX = _a.deltaX;
+                return Math.abs(deltaX) > 20;
+            }), operators.throttleTime(500), operators.map(function (_a) {
+                var deltaX = _a.deltaX;
+                return Math.sign(deltaX);
+            }), 
+            // So we always have space to scroll and overflow-behavior saves us from back nav
+            operators.tap(function () { return (_this.elementRef.nativeElement.scrollLeft = 10); }));
         }
-        Object.defineProperty(TuiCarouselScrollerDirective.prototype, "scroll", {
-            set: function (scroll) {
-                if (scroll) {
-                    this.scrollTo(this.directive.inited ? 'smooth' : 'auto');
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        TuiCarouselScrollerDirective.prototype.onMouseUp = function (_e) {
-            var left = this.root.nativeElement.getBoundingClientRect().left;
-            var rect = this.elementRef.nativeElement.getBoundingClientRect();
-            var parentElement = this.elementRef.nativeElement.parentElement;
-            parentElement.style.transform = "translateX(" + (rect.left - left) + "px)";
-            this.scrollTo();
-        };
-        TuiCarouselScrollerDirective.prototype.scrollTo = function (behavior) {
-            if (behavior === void 0) { behavior = 'auto'; }
-            this.directive.inited = true;
-            this.root.nativeElement.scrollTo({
-                left: this.elementRef.nativeElement.offsetLeft,
-                behavior: behavior,
-            });
-        };
-        TuiCarouselScrollerDirective.ctorParameters = function () { return [
-            { type: TuiCarouselDraggableDirective, decorators: [{ type: core.Optional }, { type: core.Inject, args: [TuiCarouselDraggableDirective,] }] },
-            { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_MOBILE,] }] },
-            { type: TuiCarouselDirective, decorators: [{ type: core.Inject, args: [TuiCarouselDirective,] }] },
-            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
-            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [intersectionObserver.INTERSECTION_ROOT,] }] }
+        TuiCarouselScrollDirective.ctorParameters = function () { return [
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
         ]; };
         __decorate([
-            core.Input()
-        ], TuiCarouselScrollerDirective.prototype, "scroll", null);
-        __decorate([
-            core.Input()
-        ], TuiCarouselScrollerDirective.prototype, "index", void 0);
-        __decorate([
-            core.Input()
-        ], TuiCarouselScrollerDirective.prototype, "current", void 0);
-        __decorate([
-            core.HostListener('document:mouseup.init', ['$event']),
-            core.HostListener('document:mouseup.silent', ['$event']),
-            ngEventPlugins.shouldCall(shouldScroll)
-        ], TuiCarouselScrollerDirective.prototype, "onMouseUp", null);
-        TuiCarouselScrollerDirective = __decorate([
+            core.Output()
+        ], TuiCarouselScrollDirective.prototype, "tuiCarouselScroll", void 0);
+        TuiCarouselScrollDirective = __decorate([
             core.Directive({
-                selector: '[tuiCarouselScroller]',
+                selector: '[tuiCarouselScroll]',
             }),
-            __param(0, core.Optional()),
-            __param(0, core.Inject(TuiCarouselDraggableDirective)),
-            __param(1, core.Inject(cdk.TUI_IS_MOBILE)),
-            __param(2, core.Inject(TuiCarouselDirective)),
-            __param(3, core.Inject(core.ElementRef)),
-            __param(4, core.Inject(intersectionObserver.INTERSECTION_ROOT))
-        ], TuiCarouselScrollerDirective);
-        return TuiCarouselScrollerDirective;
+            __param(0, core.Inject(core.ElementRef))
+        ], TuiCarouselScrollDirective);
+        return TuiCarouselScrollDirective;
     }());
 
     var TuiCarouselModule = /** @class */ (function () {
@@ -546,19 +488,24 @@
         }
         TuiCarouselModule = __decorate([
             core.NgModule({
-                imports: [common$1.CommonModule, intersectionObserver.IntersectionObserverModule, cdk.TuiItemModule, directives.TuiPresentModule],
+                imports: [
+                    common$1.CommonModule,
+                    intersectionObserver.IntersectionObserverModule,
+                    cdk.TuiPanModule,
+                    cdk.TuiSwipeModule,
+                    cdk.TuiItemModule,
+                ],
                 declarations: [
                     TuiCarouselComponent,
                     TuiCarouselDirective,
-                    TuiCarouselScrollerDirective,
-                    TuiCarouselDraggableDirective,
                     TuiCarouselButtonsDirective,
+                    TuiCarouselAutoscrollDirective,
+                    TuiCarouselScrollDirective,
                 ],
                 exports: [
                     TuiCarouselComponent,
                     TuiCarouselDirective,
                     TuiCarouselButtonsDirective,
-                    TuiCarouselDraggableDirective,
                     cdk.TuiItemDirective,
                 ],
             })
@@ -567,13 +514,12 @@
     }());
 
     exports.CAROUSEL_BUTTON_OPTIONS = CAROUSEL_BUTTON_OPTIONS;
+    exports.TuiCarouselAutoscrollDirective = TuiCarouselAutoscrollDirective;
     exports.TuiCarouselButtonsDirective = TuiCarouselButtonsDirective;
     exports.TuiCarouselComponent = TuiCarouselComponent;
     exports.TuiCarouselDirective = TuiCarouselDirective;
-    exports.TuiCarouselDraggableDirective = TuiCarouselDraggableDirective;
     exports.TuiCarouselModule = TuiCarouselModule;
-    exports.TuiCarouselScrollerDirective = TuiCarouselScrollerDirective;
-    exports.shouldScroll = shouldScroll;
+    exports.TuiCarouselScrollDirective = TuiCarouselScrollDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });