@taiga-ui/kit 3.5.0 → 3.7.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/tokens'), require('@ng-web-apis/mutation-observer'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@tinkoff/ng-polymorpheus'), require('@ng-web-apis/common'), require('@tinkoff/ng-event-plugins')) :
     typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/tabs', ['exports', '@angular/core', '@angular/router', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/tokens', '@ng-web-apis/mutation-observer', 'rxjs', 'rxjs/operators', '@angular/common', '@tinkoff/ng-polymorpheus', '@ng-web-apis/common', '@tinkoff/ng-event-plugins'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : 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.tabs = {}), global.ng.core, global.ng.router, global.i4, global.i2, global["taiga-ui"].kit.tokens, global.mutationObserver, global.rxjs, global.rxjs.operators, global.ng.common, global.i7, global.common, global.ngEventPlugins));
-})(this, (function (exports, i0, i2$1, i4, i2, tokens, mutationObserver, i3, operators, i5, i7, common, ngEventPlugins) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : 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.tabs = {}), global.ng.core, global.ng.router, global.i4, global.i2, global["taiga-ui"].kit.tokens, global.mutationObserver, global.rxjs, global.rxjs.operators, global.ng.common, global.i8, global.common, global.ngEventPlugins));
+})(this, (function (exports, i0, i2$1, i4, i2, tokens, mutationObserver, i3, operators, i5, i8, common, ngEventPlugins) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -28,7 +28,7 @@
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
 
     var TUI_TAB_ACTIVATE = "tui-tab-activate";
     var TUI_TAB_EVENT = new i0.InjectionToken("[TUI_TAB_EVENT]: Stream of tab activation events");
@@ -85,7 +85,7 @@
         return TuiTabComponent;
     }());
     TuiTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabComponent, deps: [{ token: i2$1.RouterLinkActive, optional: true }, { token: i0.ElementRef }, { token: i2.TUI_MODE }, { token: TUI_TAB_EVENT }, { token: tokens.TUI_TAB_MARGIN }, { token: i4.TuiFocusVisibleService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]", host: { attributes: { "type": "button" }, listeners: { "$.data-mode.attr": "mode$" }, properties: { "style.--tui-tab-margin.px": "margin", "class._focus-visible": "this.focusVisible", "class._active": "this.isActive" } }, providers: TUI_TAB_PROVIDERS, ngImport: i0__namespace, template: "<ng-container *ngIf=\"event$ | async\"></ng-container>\n<span class=\"t-highlight\"><ng-content></ng-content></span>\n", styles: [":host-context(._underline):hover{box-shadow:inset 0 -2px var(--tui-base-03)}:host-context(tui-tabs >):first-child,:host-context([tuiTabs] >):first-child,:host-context(tui-tabs > :first-child),:host-context([tuiTabs] > :first-child){margin-left:0}:host{transition-property:all;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;position:relative;display:flex;flex-shrink:0;height:100%;box-sizing:border-box;justify-content:space-between;align-items:center;white-space:nowrap;cursor:pointer;outline:none;text-decoration:none;color:inherit;transition-property:color,box-shadow,opacity;margin-left:1.5rem;margin-left:var(--tui-tab-margin, 1.5rem)}:host:disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}:host:not([data-mode])._active{opacity:1;color:var(--tui-text-01);box-shadow:none}:host[data-mode=onDark]{color:rgba(255,255,255,.72)}:host[data-mode=onDark]:hover,:host[data-mode=onDark]._active{color:#fff}:host[data-mode=onDark]._focus-visible .t-highlight{background:var(--tui-clear-inverse);color:var(--tui-text-01)}:host[data-mode=onLight]{color:var(--tui-text-02)}:host[data-mode=onLight]:hover,:host[data-mode=onLight]._active{color:var(--tui-text-01)}:host[data-mode=onLight]._focus-visible .t-highlight{background:var(--tui-text-01);color:#fff}:host._focus-visible .t-highlight{background:var(--tui-selection)}:host._android{transition-property:opacity;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;height:3rem;flex:1;flex-shrink:0;justify-content:center;margin:0;text-transform:uppercase;color:var(--tui-base-09);opacity:.5;font-size:.875rem;font-weight:500;letter-spacing:-.008125rem;font-family:-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif}:host._android:hover{box-shadow:none}:host._android._active{opacity:1;color:var(--tui-base-09)}:host._android .t-highlight{width:auto}:host._ios{height:1.75rem;flex:1;flex-shrink:0;justify-content:center;margin:0;color:var(--tui-base-01);opacity:1;font-size:.8125rem;font-weight:500;letter-spacing:-.005rem;font-family:-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif}:host._ios:hover{box-shadow:none}:host._ios._active{font-size:.875rem;font-weight:600;color:var(--tui-link)}:host._ios .t-highlight{width:auto}@media (hover: hover){:host:hover{color:var(--tui-text-01)}}.t-highlight{display:inline-flex;width:100%;align-items:center;justify-content:inherit}.t-highlight ::ng-deep>*{flex-shrink:0}\n"], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]", host: { attributes: { "type": "button" }, listeners: { "$.data-mode.attr": "mode$" }, properties: { "style.--tui-tab-margin.px": "margin", "class._focus-visible": "this.focusVisible", "class._active": "this.isActive" } }, providers: TUI_TAB_PROVIDERS, ngImport: i0__namespace, template: "<ng-container *ngIf=\"event$ | async\"></ng-container>\n<span class=\"t-highlight\"><ng-content></ng-content></span>\n", styles: [":host-context(._underline):hover{box-shadow:inset 0 -2px var(--tui-base-03)}:host-context(tui-tabs >):first-child,:host-context([tuiTabs] >):first-child,:host-context(tui-tabs > :first-child),:host-context([tuiTabs] > :first-child){margin-left:0}:host{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;position:relative;display:flex;flex-shrink:0;height:100%;box-sizing:border-box;justify-content:space-between;align-items:center;white-space:nowrap;cursor:pointer;outline:none;text-decoration:none;color:inherit;transition-property:color,box-shadow,opacity;margin-left:var(--tui-tab-margin, 1.5rem)}:host:disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}:host:not([data-mode])._active{opacity:1;color:var(--tui-text-01);box-shadow:none}:host[data-mode=onDark]{color:rgba(255,255,255,.72)}:host[data-mode=onDark]:hover,:host[data-mode=onDark]._active{color:#fff}:host[data-mode=onDark]._focus-visible .t-highlight{background:var(--tui-clear-inverse);color:var(--tui-text-01)}:host[data-mode=onLight]{color:var(--tui-text-02)}:host[data-mode=onLight]:hover,:host[data-mode=onLight]._active{color:var(--tui-text-01)}:host[data-mode=onLight]._focus-visible .t-highlight{background:var(--tui-text-01);color:#fff}:host._focus-visible .t-highlight{background:var(--tui-selection)}:host._android{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;height:3rem;flex:1;flex-shrink:0;justify-content:center;margin:0;text-transform:uppercase;color:var(--tui-base-09);opacity:.5;font-size:.875rem;font-weight:500;letter-spacing:-.008125rem;font-family:-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif}:host._android:hover{box-shadow:none}:host._android._active{opacity:1;color:var(--tui-base-09)}:host._android .t-highlight{width:auto}:host._ios{height:1.75rem;flex:1;flex-shrink:0;justify-content:center;margin:0;color:var(--tui-base-01);opacity:1;font-size:.8125rem;font-weight:500;letter-spacing:-.005rem;font-family:-apple-system,BlinkMacSystemFont,Roboto,\"Helvetica Neue\",sans-serif}:host._ios:hover{box-shadow:none}:host._ios._active{font-size:.875rem;font-weight:600;color:var(--tui-link)}:host._ios .t-highlight{width:auto}@media (hover: hover){:host:hover{color:var(--tui-text-01)}}.t-highlight{display:inline-flex;width:100%;align-items:center;justify-content:inherit}.t-highlight ::ng-deep>*{flex-shrink:0}:host-context(tui-tabs[data-vertical]),:host-context([tuiTabs][data-vertical]){min-height:2.75rem;height:auto;white-space:normal;margin:0;text-align:left;padding:.25rem 1.25rem .25rem 0}:host-context(tui-tabs[data-vertical]):after,:host-context([tuiTabs][data-vertical]):after{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--tui-primary);transform:scaleX(0);transform-origin:right}:host-context(tui-tabs[data-vertical]):hover,:host-context([tuiTabs][data-vertical]):hover{box-shadow:inset -2px 0 var(--tui-base-03)}:host-context(tui-tabs[data-vertical])._active:after,:host-context([tuiTabs][data-vertical])._active:after{transform:none}:host-context(tui-tabs[data-vertical=\"right\"]),:host-context([tuiTabs][data-vertical=\"right\"]){text-align:right;padding:.25rem 0 .25rem 1.25rem}:host-context(tui-tabs[data-vertical=\"right\"]):after,:host-context([tuiTabs][data-vertical=\"right\"]):after{right:auto;left:0;transform-origin:left}:host-context(tui-tabs[data-vertical=\"right\"]):hover,:host-context([tuiTabs][data-vertical=\"right\"]):hover{box-shadow:inset 2px 0 var(--tui-base-03)}\n"], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -457,6 +457,72 @@
         return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
+    var TuiTabsDirective = /** @class */ (function () {
+        function TuiTabsDirective(elementRef) {
+            this.elementRef = elementRef;
+            this.activeItemIndex = 0;
+            this.activeItemIndexChange = new i0.EventEmitter();
+        }
+        Object.defineProperty(TuiTabsDirective.prototype, "tabs", {
+            get: function () {
+                return Array.from(this.elementRef.nativeElement.querySelectorAll("[tuiTab]"));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiTabsDirective.prototype, "activeElement", {
+            get: function () {
+                return this.tabs[this.activeItemIndex] || null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TuiTabsDirective.prototype.onActivate = function (element) {
+            var index = this.tabs.findIndex(function (tab) { return tab === element; });
+            if (index === this.activeItemIndex) {
+                return;
+            }
+            this.activeItemIndexChange.emit(index);
+            this.activeItemIndex = index;
+        };
+        TuiTabsDirective.prototype.moveFocus = function (current, step) {
+            var tabs = this.tabs;
+            i4.tuiMoveFocus(tabs.indexOf(current), tabs, step);
+        };
+        TuiTabsDirective.prototype.ngAfterViewChecked = function () {
+            var _a = this, tabs = _a.tabs, activeElement = _a.activeElement;
+            tabs.forEach(function (nativeElement) {
+                var active = nativeElement === activeElement;
+                nativeElement.classList.toggle("_active", active);
+                nativeElement.setAttribute("tabIndex", active ? "0" : "-1");
+            });
+        };
+        return TuiTabsDirective;
+    }());
+    TuiTabsDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsDirective, deps: [{ token: i0.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiTabsDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiTabsDirective, selector: "tui-tabs, nav[tuiTabs]", inputs: { activeItemIndex: "activeItemIndex" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { listeners: { "tui-tab-activate.stop": "onActivate($event.target)" } }, ngImport: i0__namespace });
+    __decorate([
+        i4.tuiDefaultProp()
+    ], TuiTabsDirective.prototype, "activeItemIndex", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "tui-tabs, nav[tuiTabs]",
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.ElementRef]
+                        }] }];
+        }, propDecorators: { activeItemIndex: [{
+                    type: i0.Input
+                }], activeItemIndexChange: [{
+                    type: i0.Output
+                }], onActivate: [{
+                    type: i0.HostListener,
+                    args: [TUI_TAB_ACTIVATE + ".stop", ["$event.target"]]
+                }] } });
+
     var TUI_TABS_DEFAULT_OPTIONS = {
         underline: true,
         exposeActive: true,
@@ -498,7 +564,7 @@
         return TuiUnderlineComponent;
     }());
     TuiUnderlineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiUnderlineComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: common.ANIMATION_FRAME }, { token: i2.TUI_MODE }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiUnderlineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiUnderlineComponent, selector: "tui-underline", inputs: { element: "element" }, host: { listeners: { "$.data-mode.attr": "mode$", "$.style.transitionProperty": "transition$()", "$.style.transform": "transform$()", "$.style.width.px": "width$()" } }, providers: [i2.MODE_PROVIDER], ngImport: i0__namespace, template: "", isInline: true, styles: [":host{transition-property:all;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;left:0;height:100%;color:var(--tui-primary);transform:scale(0);box-shadow:inset 0 -.1875rem 0 -.0625rem;transition-property:none;pointer-events:none}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-mode=onLight]{color:var(--tui-text-02)}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiUnderlineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiUnderlineComponent, selector: "tui-underline", inputs: { element: "element" }, host: { listeners: { "$.data-mode.attr": "mode$", "$.style.transitionProperty": "transition$()", "$.style.transform": "transform$()", "$.style.width.px": "width$()" } }, providers: [i2.MODE_PROVIDER], ngImport: i0__namespace, template: "", isInline: true, styles: [":host{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;left:0;height:100%;color:var(--tui-primary);transform:scale(0);box-shadow:inset 0 -.1875rem 0 -.0625rem;transition-property:none;pointer-events:none}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-mode=onLight]{color:var(--tui-text-02)}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i4.tuiDefaultProp()
     ], TuiUnderlineComponent.prototype, "element", null);
@@ -541,68 +607,45 @@
                     args: ["$.style.width.px"]
                 }] } });
 
-    var TAB_ACTIVE_CLASS = "_active";
     var TuiTabsComponent = /** @class */ (function () {
-        function TuiTabsComponent(options, elementRef, renderer, changeDetectorRef, resize$) {
+        function TuiTabsComponent(options, elementRef, tabs, changeDetectorRef, resize$) {
             var _this = this;
             this.options = options;
             this.elementRef = elementRef;
-            this.renderer = renderer;
+            this.tabs = tabs;
             this.children = i4.EMPTY_QUERY;
             this.underline = this.options.underline;
-            this.activeItemIndexChange = new i0.EventEmitter();
-            this.activeItemIndex = 0;
             resize$.pipe(operators.filter(function () { return _this.underline; })).subscribe(function () {
                 changeDetectorRef.detectChanges();
             });
         }
-        Object.defineProperty(TuiTabsComponent.prototype, "activeItemIndexSetter", {
-            set: function (index) {
-                this.activeItemIndex = index;
-                this.scrollTo(this.tabs[index]);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TuiTabsComponent.prototype, "tabs", {
+        Object.defineProperty(TuiTabsComponent.prototype, "activeItemIndex", {
+            /** @deprecated use `activeItemIndex` from {@link TuiTabsDirective} instead */
             get: function () {
-                return Array.from(this.elementRef.nativeElement.querySelectorAll("[tuiTab]"));
+                return this.tabs.activeItemIndex;
+            },
+            /** @deprecated use `activeItemIndex` from {@link TuiTabsDirective} instead */
+            set: function (index) {
+                this.tabs.activeItemIndex = index;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(TuiTabsComponent.prototype, "activeElement", {
             get: function () {
-                return this.tabs[this.activeItemIndex] || null;
+                return this.tabs.activeElement;
             },
             enumerable: false,
             configurable: true
         });
-        TuiTabsComponent.prototype.onActivate = function (element) {
-            var index = this.tabs.findIndex(function (tab) { return tab === element; });
-            if (index === this.activeItemIndex) {
-                return;
-            }
-            this.activeItemIndexSetter = index;
-            this.activeItemIndexChange.emit(index);
-        };
         TuiTabsComponent.prototype.onKeyDownArrow = function (current, step) {
-            var tabs = this.tabs;
-            i4.tuiMoveFocus(tabs.indexOf(current), tabs, step);
+            this.tabs.moveFocus(current, step);
         };
         TuiTabsComponent.prototype.ngAfterViewChecked = function () {
-            var _this = this;
-            var _a = this, tabs = _a.tabs, activeElement = _a.activeElement;
-            tabs.forEach(function (nativeElement) {
-                _this.renderer.removeClass(nativeElement, TAB_ACTIVE_CLASS);
-                _this.renderer.setAttribute(nativeElement, "tabIndex", "-1");
-            });
-            if (activeElement) {
-                this.renderer.addClass(activeElement, TAB_ACTIVE_CLASS);
-                this.renderer.setAttribute(activeElement, "tabIndex", "0");
-            }
+            this.scrollTo(this.tabs.activeItemIndex);
         };
-        TuiTabsComponent.prototype.scrollTo = function (element) {
+        TuiTabsComponent.prototype.scrollTo = function (index) {
+            var element = this.tabs.tabs[index];
             if (!element) {
                 return;
             }
@@ -619,8 +662,8 @@
         };
         return TuiTabsComponent;
     }());
-    TuiTabsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsComponent, deps: [{ token: TUI_TABS_OPTIONS }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i4.TuiResizeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiTabsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiTabsComponent, selector: "tui-tabs, nav[tuiTabs]", inputs: { underline: "underline", activeItemIndexSetter: ["activeItemIndex", "activeItemIndexSetter"] }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { listeners: { "tui-tab-activate.stop": "onActivate($event.target)", "keydown.arrowRight.prevent": "onKeyDownArrow($event.target,1)", "keydown.arrowLeft.prevent": "onKeyDownArrow($event.target,-1)" }, properties: { "class._underline": "this.underline" } }, providers: [
+    TuiTabsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsComponent, deps: [{ token: TUI_TABS_OPTIONS }, { token: i0.ElementRef }, { token: TuiTabsDirective }, { token: i0.ChangeDetectorRef }, { token: i4.TuiResizeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiTabsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiTabsComponent, selector: "tui-tabs:not([vertical]), nav[tuiTabs]:not([vertical])", inputs: { underline: "underline" }, host: { listeners: { "keydown.arrowRight.prevent": "onKeyDownArrow($event.target,1)", "keydown.arrowLeft.prevent": "onKeyDownArrow($event.target,-1)" }, properties: { "class._underline": "this.underline" } }, providers: [
             i4.TuiDestroyService,
             i4.TuiResizeService,
             mutationObserver.MutationObserverService,
@@ -634,10 +677,13 @@
     __decorate([
         i4.tuiDefaultProp()
     ], TuiTabsComponent.prototype, "underline", void 0);
+    __decorate([
+        i4.tuiPure
+    ], TuiTabsComponent.prototype, "scrollTo", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: "tui-tabs, nav[tuiTabs]",
+                        selector: "tui-tabs:not([vertical]), nav[tuiTabs]:not([vertical])",
                         templateUrl: "./tabs.template.html",
                         styleUrls: ["./tabs.style.less"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
@@ -660,9 +706,9 @@
                         }] }, { type: i0__namespace.ElementRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ElementRef]
-                        }] }, { type: i0__namespace.Renderer2, decorators: [{
+                        }] }, { type: TuiTabsDirective, decorators: [{
                             type: i0.Inject,
-                            args: [i0.Renderer2]
+                            args: [TuiTabsDirective]
                         }] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ChangeDetectorRef]
@@ -678,20 +724,53 @@
                 }, {
                     type: i0.HostBinding,
                     args: ["class._underline"]
-                }], activeItemIndexSetter: [{
-                    type: i0.Input,
-                    args: ["activeItemIndex"]
-                }], activeItemIndexChange: [{
-                    type: i0.Output
-                }], onActivate: [{
-                    type: i0.HostListener,
-                    args: [TUI_TAB_ACTIVATE + ".stop", ["$event.target"]]
                 }], onKeyDownArrow: [{
                     type: i0.HostListener,
                     args: ["keydown.arrowRight.prevent", ["$event.target", "1"]]
                 }, {
                     type: i0.HostListener,
                     args: ["keydown.arrowLeft.prevent", ["$event.target", "-1"]]
+                }], scrollTo: [] } });
+
+    var TuiTabsVerticalComponent = /** @class */ (function () {
+        function TuiTabsVerticalComponent(tabs) {
+            this.tabs = tabs;
+            this.vertical = "left";
+        }
+        TuiTabsVerticalComponent.prototype.onKeyDownArrow = function (current, step) {
+            this.tabs.moveFocus(current, step);
+        };
+        return TuiTabsVerticalComponent;
+    }());
+    TuiTabsVerticalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsVerticalComponent, deps: [{ token: TuiTabsDirective }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiTabsVerticalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiTabsVerticalComponent, selector: "tui-tabs[vertical], nav[tuiTabs][vertical]", inputs: { vertical: "vertical" }, host: { listeners: { "keydown.arrowDown.prevent": "onKeyDownArrow($event.target,1)", "keydown.arrowUp.prevent": "onKeyDownArrow($event.target,-1)" }, properties: { "attr.data-vertical": "this.vertical" } }, ngImport: i0__namespace, template: "\n        <ng-content></ng-content>\n    ", isInline: true, styles: [":host{display:flex;flex-direction:column;font:var(--tui-font-text-m);color:var(--tui-text-02);box-shadow:inset -1px 0 var(--tui-base-03)}:host[data-vertical=right]{box-shadow:inset 1px 0 var(--tui-base-03)}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    __decorate([
+        i4.tuiDefaultProp()
+    ], TuiTabsVerticalComponent.prototype, "vertical", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsVerticalComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "tui-tabs[vertical], nav[tuiTabs][vertical]",
+                        template: "\n        <ng-content></ng-content>\n    ",
+                        styleUrls: ["./tabs-vertical.style.less"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: TuiTabsDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [TuiTabsDirective]
+                        }] }];
+        }, propDecorators: { vertical: [{
+                    type: i0.Input
+                }, {
+                    type: i0.HostBinding,
+                    args: ["attr.data-vertical"]
+                }], onKeyDownArrow: [{
+                    type: i0.HostListener,
+                    args: ["keydown.arrowDown.prevent", ["$event.target", "1"]]
+                }, {
+                    type: i0.HostListener,
+                    args: ["keydown.arrowUp.prevent", ["$event.target", "-1"]]
                 }] } });
 
     var TUI_TABS_REFRESH = new i0.InjectionToken("[TUI_TABS_REFRESH]: Refresh stream");
@@ -901,7 +980,7 @@
         return TuiTabsWithMoreComponent;
     }());
     TuiTabsWithMoreComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsWithMoreComponent, deps: [{ token: TUI_TABS_OPTIONS }, { token: tokens.TUI_TAB_MARGIN }, { token: TUI_TABS_REFRESH }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: tokens.TUI_MORE_WORD }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiTabsWithMoreComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: { moreContent: "moreContent", dropdownContent: "dropdownContent", underline: "underline", activeItemIndex: "activeItemIndex", itemsLimit: "itemsLimit" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { properties: { "class._underline": "this.underline" } }, providers: TUI_TABS_PROVIDERS, queries: [{ propertyName: "items", predicate: i4.TuiItemDirective, read: i0.TemplateRef }], viewQueries: [{ propertyName: "moreButton", first: true, predicate: TuiTabComponent, descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"items.changes | async\"></ng-container>\n<div class=\"t-wrapper\">\n    <tui-tabs\n        class=\"t-tabs\"\n        [underline]=\"false\"\n        [activeItemIndex]=\"activeItemIndex\"\n        (activeItemIndexChange)=\"onActiveItemIndexChange($event)\"\n        (keydown.arrowRight)=\"onArrowRight($event)\"\n    >\n        <ng-container *ngFor=\"let item of items; let index = index\">\n            <ng-container\n                *ngIf=\"index <= lastVisibleIndex; else hidden\"\n                [ngTemplateOutlet]=\"item\"\n            ></ng-container>\n            <ng-template #hidden>\n                <div [class.t-overflown]=\"isOverflown(index)\">\n                    <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </tui-tabs>\n    <tui-hosted-dropdown\n        class=\"t-more_wrapper\"\n        [class.t-overflown]=\"!isMoreVisible\"\n        [content]=\"dropdownContent || dropdown\"\n        [(open)]=\"open\"\n    >\n        <button\n            tuiTab\n            [class._active]=\"isMoreActive\"\n            [class.t-no-margin]=\"isMoreAlone\"\n            [tuiFocusable]=\"isMoreFocusable\"\n            (keydown.arrowLeft.prevent)=\"onArrowLeft()\"\n        >\n            <ng-container *polymorpheusOutlet=\"moreContent || more as text\">\n                {{ text }}\n            </ng-container>\n        </button>\n        <ng-template #more>\n            {{ moreWord$ | async }}\n            <tui-svg\n                src=\"tuiIconChevronDown\"\n                class=\"t-icon\"\n                [class.t-icon_rotated]=\"open\"\n            ></tui-svg>\n        </ng-template>\n    </tui-hosted-dropdown>\n    <ng-template #dropdown>\n        <div\n            #element\n            class=\"t-dropdown\"\n            (keydown.arrowUp.prevent)=\"onWrapperArrow($event, element, true)\"\n            (keydown.arrowDown.prevent)=\"onWrapperArrow($event, element, false)\"\n        >\n            <div\n                *ngFor=\"let item of items; let index = index\"\n                (tui-tab-activate)=\"onClick(index)\"\n            >\n                <ng-container\n                    *ngIf=\"shouldShow(index)\"\n                    [ngTemplateOutlet]=\"item\"\n                ></ng-container>\n            </div>\n        </div>\n    </ng-template>\n    <tui-underline\n        *ngIf=\"underline\"\n        [element]=\"activeElement\"\n    ></tui-underline>\n</div>\n", styles: [":host{position:relative;display:flex;font:var(--tui-font-text-m);height:var(--tui-height-l);box-sizing:border-box;color:var(--tui-text-02);box-shadow:inset 0 -1px var(--tui-base-03);overflow:hidden}.t-wrapper{position:relative;display:flex}.t-tabs{height:inherit;font-size:inherit;font-weight:inherit;overflow:visible;box-shadow:none;color:inherit}.t-overflown{display:flex;margin:0;width:0;max-width:0;overflow:hidden;visibility:hidden}.t-more_wrapper{height:100%;pointer-events:none}.t-more_wrapper button{pointer-events:auto}.t-icon{transition-property:transform;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-right:-.25rem;vertical-align:bottom}.t-icon_rotated{transform:rotate(180deg)}.t-dropdown{padding:.5rem 0}.t-dropdown ::ng-deep *[tuiTab]{width:100%;height:2.75rem;justify-content:flex-start;margin:0;padding:0 1rem;color:var(--tui-text-02)}.t-dropdown ::ng-deep *[tuiTab]:before{display:none}.t-dropdown ::ng-deep *[tuiTab]:hover,.t-dropdown ::ng-deep *[tuiTab]:focus,.t-dropdown ::ng-deep *[tuiTab]._active{box-shadow:none;color:var(--tui-base-08);background:var(--tui-base-02)}.t-no-margin{margin-left:0}\n"], components: [{ type: TuiTabsComponent, selector: "tui-tabs, nav[tuiTabs]", inputs: ["underline", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { type: i2__namespace$1.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: TuiUnderlineComponent, selector: "tui-underline", inputs: ["element"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i7__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiTabsWithMoreComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: { moreContent: "moreContent", dropdownContent: "dropdownContent", underline: "underline", activeItemIndex: "activeItemIndex", itemsLimit: "itemsLimit" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { properties: { "class._underline": "this.underline" } }, providers: TUI_TABS_PROVIDERS, queries: [{ propertyName: "items", predicate: i4.TuiItemDirective, read: i0.TemplateRef }], viewQueries: [{ propertyName: "moreButton", first: true, predicate: TuiTabComponent, descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"items.changes | async\"></ng-container>\n<div class=\"t-wrapper\">\n    <tui-tabs\n        class=\"t-tabs\"\n        [underline]=\"false\"\n        [activeItemIndex]=\"activeItemIndex\"\n        (activeItemIndexChange)=\"onActiveItemIndexChange($event)\"\n        (keydown.arrowRight)=\"onArrowRight($event)\"\n    >\n        <ng-container *ngFor=\"let item of items; let index = index\">\n            <ng-container\n                *ngIf=\"index <= lastVisibleIndex; else hidden\"\n                [ngTemplateOutlet]=\"item\"\n            ></ng-container>\n            <ng-template #hidden>\n                <div [class.t-overflown]=\"isOverflown(index)\">\n                    <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </tui-tabs>\n    <tui-hosted-dropdown\n        class=\"t-more_wrapper\"\n        [class.t-overflown]=\"!isMoreVisible\"\n        [content]=\"dropdownContent || dropdown\"\n        [(open)]=\"open\"\n    >\n        <button\n            tuiTab\n            [class._active]=\"isMoreActive\"\n            [class.t-no-margin]=\"isMoreAlone\"\n            [tuiFocusable]=\"isMoreFocusable\"\n            (keydown.arrowLeft.prevent)=\"onArrowLeft()\"\n        >\n            <ng-container *polymorpheusOutlet=\"moreContent || more as text\">\n                {{ text }}\n            </ng-container>\n        </button>\n        <ng-template #more>\n            {{ moreWord$ | async }}\n            <tui-svg\n                src=\"tuiIconChevronDown\"\n                class=\"t-icon\"\n                [class.t-icon_rotated]=\"open\"\n            ></tui-svg>\n        </ng-template>\n    </tui-hosted-dropdown>\n    <ng-template #dropdown>\n        <div\n            #element\n            class=\"t-dropdown\"\n            (keydown.arrowUp.prevent)=\"onWrapperArrow($event, element, true)\"\n            (keydown.arrowDown.prevent)=\"onWrapperArrow($event, element, false)\"\n        >\n            <div\n                *ngFor=\"let item of items; let index = index\"\n                (tui-tab-activate)=\"onClick(index)\"\n            >\n                <ng-container\n                    *ngIf=\"shouldShow(index)\"\n                    [ngTemplateOutlet]=\"item\"\n                ></ng-container>\n            </div>\n        </div>\n    </ng-template>\n    <tui-underline\n        *ngIf=\"underline\"\n        [element]=\"activeElement\"\n    ></tui-underline>\n</div>\n", styles: [":host{position:relative;display:flex;font:var(--tui-font-text-m);height:var(--tui-height-l);box-sizing:border-box;color:var(--tui-text-02);box-shadow:inset 0 -1px var(--tui-base-03);overflow:hidden}.t-wrapper{position:relative;display:flex}.t-tabs{height:inherit;font-size:inherit;font-weight:inherit;overflow:visible;box-shadow:none;color:inherit}.t-overflown{display:flex;margin:0;width:0;max-width:0;overflow:hidden;visibility:hidden}.t-more_wrapper{height:100%;pointer-events:none}.t-more_wrapper button{pointer-events:auto}.t-icon{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;margin-right:-.25rem;vertical-align:bottom}.t-icon_rotated{transform:rotate(180deg)}.t-dropdown{padding:.5rem 0}.t-dropdown ::ng-deep *[tuiTab]{width:100%;height:2.75rem;justify-content:flex-start;margin:0;padding:0 1rem;color:var(--tui-text-02)}.t-dropdown ::ng-deep *[tuiTab]:before{display:none}.t-dropdown ::ng-deep *[tuiTab]:hover,.t-dropdown ::ng-deep *[tuiTab]:focus,.t-dropdown ::ng-deep *[tuiTab]._active{box-shadow:none;color:var(--tui-base-08);background:var(--tui-base-02)}.t-no-margin{margin-left:0}\n"], components: [{ type: TuiTabsComponent, selector: "tui-tabs:not([vertical]), nav[tuiTabs]:not([vertical])", inputs: ["underline"] }, { type: i2__namespace$1.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: TuiUnderlineComponent, selector: "tui-underline", inputs: ["element"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TuiTabsDirective, selector: "tui-tabs, nav[tuiTabs]", inputs: ["activeItemIndex"], outputs: ["activeItemIndexChange"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i8__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i4.tuiDefaultProp()
     ], TuiTabsWithMoreComponent.prototype, "moreContent", void 0);
@@ -977,22 +1056,26 @@
     TuiTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     TuiTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsModule, declarations: [TuiTabsWithMoreComponent,
             TuiTabsComponent,
+            TuiTabsDirective,
+            TuiTabsVerticalComponent,
             TuiTabComponent,
             TuiUnderlineComponent], imports: [i5.CommonModule,
+            i8.PolymorpheusModule,
             i2.TuiHostedDropdownModule,
             i2.TuiSvgModule,
             i4.TuiFocusableModule,
-            i7.PolymorpheusModule,
             i4.TuiItemModule], exports: [TuiTabsWithMoreComponent,
             TuiTabsComponent,
+            TuiTabsDirective,
+            TuiTabsVerticalComponent,
             TuiTabComponent,
             i4.TuiItemDirective] });
     TuiTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsModule, imports: [[
                 i5.CommonModule,
+                i8.PolymorpheusModule,
                 i2.TuiHostedDropdownModule,
                 i2.TuiSvgModule,
                 i4.TuiFocusableModule,
-                i7.PolymorpheusModule,
                 i4.TuiItemModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiTabsModule, decorators: [{
@@ -1000,21 +1083,25 @@
                 args: [{
                         imports: [
                             i5.CommonModule,
+                            i8.PolymorpheusModule,
                             i2.TuiHostedDropdownModule,
                             i2.TuiSvgModule,
                             i4.TuiFocusableModule,
-                            i7.PolymorpheusModule,
                             i4.TuiItemModule,
                         ],
                         declarations: [
                             TuiTabsWithMoreComponent,
                             TuiTabsComponent,
+                            TuiTabsDirective,
+                            TuiTabsVerticalComponent,
                             TuiTabComponent,
                             TuiUnderlineComponent,
                         ],
                         exports: [
                             TuiTabsWithMoreComponent,
                             TuiTabsComponent,
+                            TuiTabsDirective,
+                            TuiTabsVerticalComponent,
                             TuiTabComponent,
                             i4.TuiItemDirective,
                         ],
@@ -1034,7 +1121,9 @@
     exports.TUI_TAB_PROVIDERS = TUI_TAB_PROVIDERS;
     exports.TuiTabComponent = TuiTabComponent;
     exports.TuiTabsComponent = TuiTabsComponent;
+    exports.TuiTabsDirective = TuiTabsDirective;
     exports.TuiTabsModule = TuiTabsModule;
+    exports.TuiTabsVerticalComponent = TuiTabsVerticalComponent;
     exports.TuiTabsWithMoreComponent = TuiTabsWithMoreComponent;
     exports.TuiUnderlineComponent = TuiUnderlineComponent;
     exports.tuiTabsOptionsProvider = tuiTabsOptionsProvider;