@taiga-ui/kit 3.33.1 → 3.34.0

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

@@ -142,6 +142,70 @@
                     args: ['class._active']
                 }] } });
 
+    var TuiTabsDirective = /** @class */ (function () {
+        function TuiTabsDirective(el) {
+            this.el = el;
+            this.activeItemIndex = 0;
+            this.activeItemIndexChange = new i0.EventEmitter();
+        }
+        Object.defineProperty(TuiTabsDirective.prototype, "tabs", {
+            get: function () {
+                return Array.from(this.el.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 (event, element) {
+            var index = this.tabs.findIndex(function (tab) { return tab === element; });
+            event.stopPropagation();
+            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.17", 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.17", type: TuiTabsDirective, selector: "tui-tabs, nav[tuiTabs]", inputs: { activeItemIndex: "activeItemIndex" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { listeners: { "tui-tab-activate": "onActivate($event,$event.target)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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, ['$event', '$event.target']]
+                }] } });
+
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -460,73 +524,6 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var TuiTabsDirective = /** @class */ (function () {
-        function TuiTabsDirective(el) {
-            this.el = el;
-            this.activeItemIndex = 0;
-            this.activeItemIndexChange = new i0.EventEmitter();
-        }
-        Object.defineProperty(TuiTabsDirective.prototype, "tabs", {
-            get: function () {
-                return Array.from(this.el.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 (event, element) {
-            var index = this.tabs.findIndex(function (tab) { return tab === element; });
-            event.stopPropagation();
-            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.17", 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.17", type: TuiTabsDirective, selector: "tui-tabs, nav[tuiTabs]", inputs: { activeItemIndex: "activeItemIndex" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { listeners: { "tui-tab-activate": "onActivate($event,$event.target)" } }, ngImport: i0__namespace });
-    __decorate([
-        i4.tuiDefaultProp()
-    ], TuiTabsDirective.prototype, "activeItemIndex", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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, ['$event', '$event.target']]
-                }] } });
-
     var TUI_TABS_DEFAULT_OPTIONS = {
         underline: true,
         exposeActive: true,
@@ -573,9 +570,6 @@
     }());
     TuiUnderlineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiUnderlineComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -682,9 +676,6 @@
                 },
             },
         ], queries: [{ propertyName: "children", predicate: i0__namespace.forwardRef(function () { return TuiTabComponent; }) }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"children.changes | async\"></ng-container>\n<ng-content></ng-content>\n<tui-underline\n    *ngIf=\"underline\"\n    class=\"t-underline\"\n    [element]=\"activeElement\"\n></tui-underline>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:0;display:flex;font:var(--tui-font-text-m);height:var(--tui-height-l);color:var(--tui-text-02);box-shadow:inset 0 -1px var(--tui-base-03);overflow:auto}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{background:transparent;width:0;height:0}.t-underline{z-index:-1}\n"], components: [{ type: TuiUnderlineComponent, selector: "tui-underline", inputs: ["element"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    __decorate([
-        i4.tuiDefaultProp()
-    ], TuiTabsComponent.prototype, "underline", void 0);
     __decorate([
         i4.tuiPure
     ], TuiTabsComponent.prototype, "scrollTo", null);
@@ -752,9 +743,6 @@
     }());
     TuiTabsVerticalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: TuiTabsVerticalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -985,15 +973,6 @@
     }());
     TuiTabsWithMoreComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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:calc(100% - 1rem);height:2.75rem;justify-content:flex-start;margin:0 .5rem;border-radius:var(--tui-radius-s);padding:0 .625rem;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-clear)}.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", "sided", "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, "underline", void 0);
-    __decorate([
-        i4.tuiDefaultProp()
-    ], TuiTabsWithMoreComponent.prototype, "activeItemIndex", void 0);
-    __decorate([
-        i4.tuiDefaultProp()
-    ], TuiTabsWithMoreComponent.prototype, "itemsLimit", void 0);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTabsWithMoreComponent, decorators: [{
                 type: i0.Component,
                 args: [{