@taiga-ui/kit 2.75.0 → 2.76.0

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

@@ -69,6 +69,51 @@
         return function (target, key) { decorator(target, key, paramIndex); }
     }
 
+    function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+        function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+        var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+        var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+        var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+        var _, done = false;
+        for (var i = decorators.length - 1; i >= 0; i--) {
+            var context = {};
+            for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+            for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+            context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+            var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+            if (kind === "accessor") {
+                if (result === void 0) continue;
+                if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+                if (_ = accept(result.get)) descriptor.get = _;
+                if (_ = accept(result.set)) descriptor.set = _;
+                if (_ = accept(result.init)) initializers.push(_);
+            }
+            else if (_ = accept(result)) {
+                if (kind === "field") initializers.push(_);
+                else descriptor[key] = _;
+            }
+        }
+        if (target) Object.defineProperty(target, contextIn.name, descriptor);
+        done = true;
+    };
+
+    function __runInitializers(thisArg, initializers, value) {
+        var useValue = arguments.length > 2;
+        for (var i = 0; i < initializers.length; i++) {
+            value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+        }
+        return useValue ? value : void 0;
+    };
+
+    function __propKey(x) {
+        return typeof x === "symbol" ? x : "".concat(x);
+    };
+
+    function __setFunctionName(f, name, prefix) {
+        if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+        return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+    };
+
     function __metadata(metadataKey, metadataValue) {
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
     }
@@ -201,7 +246,7 @@
     function __asyncDelegator(o) {
         var i, p;
         return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
     }
 
     function __asyncValues(o) {
@@ -262,7 +307,7 @@
         ]; };
         TuiTabDirective = __decorate([
             core.Directive({
-                selector: "ng-template[tuiTab]",
+                selector: 'ng-template[tuiTab]',
             }),
             __param(0, core.Inject(core.TemplateRef))
         ], TuiTabDirective);
@@ -338,27 +383,27 @@
             { type: cdk.TuiFocusVisibleService, decorators: [{ type: core.Inject, args: [cdk.TuiFocusVisibleService,] }] }
         ]; };
         __decorate([
-            core.HostBinding("class._ios")
+            core.HostBinding('class._ios')
         ], TuiTabComponent.prototype, "isIos", void 0);
         __decorate([
-            core.HostBinding("class._android")
+            core.HostBinding('class._android')
         ], TuiTabComponent.prototype, "isAndroid", void 0);
         __decorate([
-            core.HostBinding("class._focus-visible")
+            core.HostBinding('class._focus-visible')
         ], TuiTabComponent.prototype, "focusVisible", void 0);
         __decorate([
-            core.HostBinding("class._active")
+            core.HostBinding('class._active')
         ], TuiTabComponent.prototype, "isActive", null);
         TuiTabComponent = __decorate([
             core.Component({
-                selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]",
-                template: "<ng-container *ngIf=\"event$ | async\"></ng-container>\n<span class=\"t-highlight\"><ng-content></ng-content></span>\n",
+                selector: 'a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]',
+                template: "<ng-container *ngIf=\"event$ | async\"></ng-container>\n<span class=\"t-highlight\">\n    <ng-content></ng-content>\n</span>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: TUI_TAB_PROVIDERS,
                 host: {
-                    '($.data-mode.attr)': "mode$",
-                    '[style.--tui-tab-margin.px]': "margin",
-                    type: "button",
+                    '($.data-mode.attr)': 'mode$',
+                    '[style.--tui-tab-margin.px]': 'margin',
+                    type: 'button',
                 },
                 styles: [":host-context(._underline):hover{box-shadow:inset 0 -2px var(--tui-base-03)}:host-context([tuiTabs]>):first-child,:host-context([tuiTabs]>:first-child),:host-context(tui-tabs>):first-child,:host-context(tui-tabs>:first-child){margin-left:0}:host{transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;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:0;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]._active,:host[data-mode=onDark]:hover{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]._active,:host[data-mode=onLight]:hover{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,300ms);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}"]
             }),
@@ -380,6 +425,7 @@
         underline: true,
         exposeActive: true,
         itemsLimit: Infinity,
+        minMoreWidth: 0,
     };
     var TUI_TABS_OPTIONS = new core.InjectionToken("Default parameters for tabs component", {
         factory: function () { return TUI_TABS_DEFAULT_OPTIONS; },
@@ -389,7 +435,7 @@
         useValue: __assign(__assign({}, TUI_TABS_DEFAULT_OPTIONS), options),
     }); };
 
-    var TAB_ACTIVE_CLASS = "_active";
+    var TAB_ACTIVE_CLASS = '_active';
     // TODO: 3.0 remove in ivy compilation
     var OBSERVER_INIT = {
         childList: true,
@@ -421,7 +467,7 @@
         });
         Object.defineProperty(TuiTabsComponent.prototype, "tabs", {
             get: function () {
-                return Array.from(this.elementRef.nativeElement.querySelectorAll("[tuiTab]"));
+                return Array.from(this.elementRef.nativeElement.querySelectorAll('[tuiTab]'));
             },
             enumerable: true,
             configurable: true
@@ -450,11 +496,11 @@
             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");
+                _this.renderer.setAttribute(nativeElement, 'tabIndex', '-1');
             });
             if (activeElement) {
                 this.renderer.addClass(activeElement, TAB_ACTIVE_CLASS);
-                this.renderer.setAttribute(activeElement, "tabIndex", "0");
+                this.renderer.setAttribute(activeElement, 'tabIndex', '0');
             }
         };
         TuiTabsComponent.prototype.scrollTo = function (element) {
@@ -487,31 +533,31 @@
         ], TuiTabsComponent.prototype, "children", void 0);
         __decorate([
             core.Input(),
-            core.HostBinding("class._underline"),
+            core.HostBinding('class._underline'),
             cdk.tuiDefaultProp()
         ], TuiTabsComponent.prototype, "underline", void 0);
         __decorate([
-            core.Input("activeItemIndex")
+            core.Input('activeItemIndex')
         ], TuiTabsComponent.prototype, "activeItemIndexSetter", null);
         __decorate([
             core.Output()
         ], TuiTabsComponent.prototype, "activeItemIndexChange", void 0);
         __decorate([
-            core.HostBinding("class._ios")
+            core.HostBinding('class._ios')
         ], TuiTabsComponent.prototype, "isIos", void 0);
         __decorate([
-            core.HostBinding("class._android")
+            core.HostBinding('class._android')
         ], TuiTabsComponent.prototype, "isAndroid", void 0);
         __decorate([
-            core.HostListener(TUI_TAB_ACTIVATE + ".stop", ["$event.target"])
+            core.HostListener(TUI_TAB_ACTIVATE + ".stop", ['$event.target'])
         ], TuiTabsComponent.prototype, "onActivate", null);
         __decorate([
-            core.HostListener("keydown.arrowRight.prevent", ["$event.target", "1"]),
-            core.HostListener("keydown.arrowLeft.prevent", ["$event.target", "-1"])
+            core.HostListener('keydown.arrowRight.prevent', ['$event.target', '1']),
+            core.HostListener('keydown.arrowLeft.prevent', ['$event.target', '-1'])
         ], TuiTabsComponent.prototype, "onKeyDownArrow", null);
         TuiTabsComponent = __decorate([
             core.Component({
-                selector: "tui-tabs, nav[tuiTabs]",
+                selector: 'tui-tabs, nav[tuiTabs]',
                 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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -584,8 +630,8 @@
             this.changeDetectorRef = changeDetectorRef;
             this.moreWord$ = moreWord$;
             this.maxIndex = Infinity;
-            this.moreContent = "";
-            this.dropdownContent = "";
+            this.moreContent = '';
+            this.dropdownContent = '';
             this.underline = this.options.underline;
             this.activeItemIndex = 0;
             this.itemsLimit = this.options.itemsLimit;
@@ -596,7 +642,7 @@
         Object.defineProperty(TuiTabsWithMoreComponent.prototype, "tabs", {
             // TODO: Improve performance
             get: function () {
-                return Array.from(this.elementRef.nativeElement.querySelectorAll("[tuiTab]"));
+                return Array.from(this.elementRef.nativeElement.querySelectorAll('[tuiTab]'));
             },
             enumerable: true,
             configurable: true
@@ -712,9 +758,10 @@
             if (tabs.length < 2) {
                 return 0;
             }
+            var _b = this.options, exposeActive = _b.exposeActive, minMoreWidth = _b.minMoreWidth;
             var clientWidth = this.elementRef.nativeElement.clientWidth;
             var activeWidth = tabs[activeItemIndex] ? tabs[activeItemIndex].scrollWidth : 0;
-            var moreWidth = tabs[tabs.length - 1].scrollWidth;
+            var moreWidth = Math.max(tabs[tabs.length - 1].scrollWidth, minMoreWidth);
             var maxIndex = tabs.length - 2;
             var total = tabs.reduce(function (acc, _a) {
                 var scrollWidth = _a.scrollWidth;
@@ -728,7 +775,7 @@
             while (maxIndex) {
                 total -= tabs[maxIndex].scrollWidth + margin;
                 maxIndex--;
-                var activeDisplaced = this.options.exposeActive && activeItemIndex > maxIndex;
+                var activeDisplaced = exposeActive && activeItemIndex > maxIndex;
                 var activeOffset = activeDisplaced ? activeWidth + margin : 0;
                 var currentWidth = total + activeOffset + moreWidth + margin;
                 // Needed for different rounding of visible and hidden elements scrollWidth
@@ -768,7 +815,7 @@
         ], TuiTabsWithMoreComponent.prototype, "dropdownContent", void 0);
         __decorate([
             core.Input(),
-            core.HostBinding("class._underline"),
+            core.HostBinding('class._underline'),
             cdk.tuiDefaultProp()
         ], TuiTabsWithMoreComponent.prototype, "underline", void 0);
         __decorate([
@@ -787,7 +834,7 @@
         ], TuiTabsWithMoreComponent.prototype, "items", void 0);
         TuiTabsWithMoreComponent = __decorate([
             core.Component({
-                selector: "tui-tabs-with-more, nav[tuiTabsWithMore]",
+                selector: 'tui-tabs-with-more, nav[tuiTabsWithMore]',
                 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            <span\n                polymorpheus-outlet\n                [content]=\"moreContent || more\"\n            ></span>\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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: TABS_PROVIDERS,
@@ -821,14 +868,14 @@
             }), operators.share());
             this.isIos = this.mobileAware && this.ios;
             this.isAndroid = this.mobileAware && this.android;
-            this.transition$ = ngEventPlugins.asCallable(this.element$.pipe(operators.map(function (element) { return element && "all"; }), operators.debounceTime(50)));
+            this.transition$ = ngEventPlugins.asCallable(this.element$.pipe(operators.map(function (element) { return element && 'all'; }), operators.debounceTime(50)));
             this.transform$ = ngEventPlugins.asCallable(this.refresh$.pipe(operators.map(function (element) {
                 return element ? "translate3d(" + cdk.px(element.offsetLeft) + ", 0, 0)" : null;
             })));
             this.width$ = ngEventPlugins.asCallable(this.refresh$.pipe(operators.map(function (element) { return (element === null || element === void 0 ? void 0 : element.clientWidth) || 0; })));
-            nativeElement["$.style.transitionProperty"] = this.transition$;
-            nativeElement["$.style.transform"] = this.transform$;
-            nativeElement["$.style.width.px"] = this.width$;
+            nativeElement['$.style.transitionProperty'] = this.transition$;
+            nativeElement['$.style.transform'] = this.transform$;
+            nativeElement['$.style.width.px'] = this.width$;
         }
         Object.defineProperty(TuiUnderlineComponent.prototype, "element", {
             set: function (element) {
@@ -851,28 +898,28 @@
             cdk.tuiDefaultProp()
         ], TuiUnderlineComponent.prototype, "element", null);
         __decorate([
-            core.HostBinding("class._ios")
+            core.HostBinding('class._ios')
         ], TuiUnderlineComponent.prototype, "isIos", void 0);
         __decorate([
-            core.HostBinding("class._android")
+            core.HostBinding('class._android')
         ], TuiUnderlineComponent.prototype, "isAndroid", void 0);
         __decorate([
-            core.HostListener("$.style.transitionProperty")
+            core.HostListener('$.style.transitionProperty')
         ], TuiUnderlineComponent.prototype, "transition$", void 0);
         __decorate([
-            core.HostListener("$.style.transform")
+            core.HostListener('$.style.transform')
         ], TuiUnderlineComponent.prototype, "transform$", void 0);
         __decorate([
-            core.HostListener("$.style.width.px")
+            core.HostListener('$.style.width.px')
         ], TuiUnderlineComponent.prototype, "width$", void 0);
         TuiUnderlineComponent = __decorate([
             core.Component({
-                selector: "tui-underline",
-                template: "",
+                selector: 'tui-underline',
+                template: '',
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [core$1.MODE_PROVIDER],
                 host: {
-                    '($.data-mode.attr)': "mode$",
+                    '($.data-mode.attr)': 'mode$',
                 },
                 styles: [":host{transition-duration:var(--tui-duration,300ms);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._ios{border-radius:.4375rem;background:var(--tui-base-01);box-shadow:0 .1875rem .0625rem rgba(0,0,0,.04),0 .1875rem .5rem rgba(0,0,0,.12)}:host._android{box-shadow:inset 0 -.1875rem var(--tui-link)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-mode=onLight]{color:var(--tui-text-02)}"]
             }),