@taiga-ui/kit
Version:
Taiga UI Angular main components kit
598 lines (586 loc) • 31.3 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { TemplateRef, Inject, Directive, InjectionToken, ElementRef, Optional, HostBinding, Component, ChangeDetectionStrategy, EventEmitter, Renderer2, ChangeDetectorRef, Input, Output, ContentChildren, forwardRef, HostListener, ViewChild, NgZone, NgModule } from '@angular/core';
import { RouterLinkActive } from '@angular/router';
import { TuiDestroyService, TuiFocusVisibleService, identity, typedFromEvent, tuiCustomEvent, TUI_IS_IOS, TUI_IS_ANDROID, EMPTY_QUERY, itemsQueryListObservable, moveFocus, TuiResizeService, tuiDefaultProp, tuiPure, isNativeFocused, setNativeFocused, getClosestFocusable, tuiZonefree, px, TuiFocusableModule } from '@taiga-ui/cdk';
import { TuiRouterLinkActiveService, MODE_PROVIDER, TUI_MODE, TuiHostedDropdownModule, TuiSvgModule } from '@taiga-ui/core';
import { TUI_MOBILE_AWARE, TUI_MORE_WORD } from '@taiga-ui/kit/tokens';
import { merge, EMPTY, Observable, ReplaySubject, of } from 'rxjs';
import { DOCUMENT, CommonModule } from '@angular/common';
import { filter, map, mapTo, tap, debounceTime, startWith, takeUntil, switchMap, share } from 'rxjs/operators';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { MutationObserverService, MUTATION_OBSERVER_INIT } from '@ng-web-apis/mutation-observer';
import { ANIMATION_FRAME } from '@ng-web-apis/common';
import { asCallable } from '@tinkoff/ng-event-plugins';
var TuiTabDirective = /** @class */ (function () {
function TuiTabDirective(template) {
this.template = template;
}
TuiTabDirective.ctorParameters = function () { return [
{ type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] }
]; };
TuiTabDirective = __decorate([
Directive({
selector: "ng-template[tuiTab]",
}),
__param(0, Inject(TemplateRef))
], TuiTabDirective);
return TuiTabDirective;
}());
var TUI_TAB_ACTIVATE = 'tui-tab-activate';
var TUI_TAB_EVENT = new InjectionToken('Stream of tab activation events');
var TUI_TAB_PROVIDERS = [
TuiDestroyService,
TuiFocusVisibleService,
TuiRouterLinkActiveService,
{
provide: TUI_TAB_EVENT,
deps: [ElementRef, DOCUMENT, TuiRouterLinkActiveService],
useFactory: tabActiveFactory,
},
MODE_PROVIDER,
];
function tabActiveFactory(_a, documentRef, routerLinkActiveService) {
var nativeElement = _a.nativeElement;
return merge(routerLinkActiveService.pipe(filter(identity)), nativeElement.matches('button') ? typedFromEvent(nativeElement, 'click') : EMPTY).pipe(map(function () {
return nativeElement.dispatchEvent(tuiCustomEvent(TUI_TAB_ACTIVATE, { bubbles: true }, documentRef));
}));
}
var TuiTabComponent = /** @class */ (function () {
function TuiTabComponent(routerLinkActive, mode$, event$, mobileAware, isIos, isAndroid, focusVisible$) {
var _this = this;
this.routerLinkActive = routerLinkActive;
this.mode$ = mode$;
this.event$ = event$;
this.focusVisible = false;
this.isIos = mobileAware && isIos;
this.isAndroid = mobileAware && isAndroid;
focusVisible$.subscribe(function (visible) {
_this.focusVisible = visible;
});
}
Object.defineProperty(TuiTabComponent.prototype, "isActive", {
get: function () {
return !!this.routerLinkActive && this.routerLinkActive.isActive;
},
enumerable: true,
configurable: true
});
TuiTabComponent.ctorParameters = function () { return [
{ type: RouterLinkActive, decorators: [{ type: Optional }, { type: Inject, args: [RouterLinkActive,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_TAB_EVENT,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_MOBILE_AWARE,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_IOS,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_ANDROID,] }] },
{ type: TuiFocusVisibleService, decorators: [{ type: Inject, args: [TuiFocusVisibleService,] }] }
]; };
__decorate([
HostBinding('class._ios')
], TuiTabComponent.prototype, "isIos", void 0);
__decorate([
HostBinding('class._android')
], TuiTabComponent.prototype, "isAndroid", void 0);
__decorate([
HostBinding('class._focus-visible')
], TuiTabComponent.prototype, "focusVisible", void 0);
__decorate([
HostBinding('class._active')
], TuiTabComponent.prototype, "isActive", null);
TuiTabComponent = __decorate([
Component({
selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]",
template: "<ng-container *ngIf=\"event$ | async\"></ng-container>\n<span class=\"highlight\"><ng-content></ng-content></span>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: TUI_TAB_PROVIDERS,
host: {
'($.data-mode.attr)': 'mode$',
},
styles: [":host-context(._underline):hover{box-shadow:inset 0 -2px var(--tui-base-03)}:host{transition-duration:.3s;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%;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}:host:not(:last-child){margin-right:24px}:host:hover{color:var(--tui-text-01)}: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 .highlight{background:var(--tui-clear-inverse);color:var(--tui-text-01)}:host[data-mode=onLight]{color:rgba(0,0,0,.56)}:host[data-mode=onLight]._focus-visible .highlight{background:var(--tui-text-01);color:#fff}:host._focus-visible .highlight{background:var(--tui-selection)}:host._android{transition-property:opacity;transition-duration:.3s;transition-timing-function:ease-in-out;height:48px;flex:1;flex-shrink:0;justify-content:center;margin:0;text-transform:uppercase;color:var(--tui-base-09);opacity:.5;font-size:14px;font-weight:500;letter-spacing:-.13px;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 .highlight{width:auto}:host._ios{height:28px;flex:1;flex-shrink:0;justify-content:center;margin:0;color:var(--tui-base-01);opacity:1;font-size:13px;font-weight:500;letter-spacing:-.08px;font-family:-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif}:host._ios:hover{box-shadow:none}:host._ios._active{font-size:14px;font-weight:600;color:var(--tui-link)}:host._ios .highlight{width:auto}.highlight{display:inline-flex;width:100%;align-items:center;justify-content:inherit}.highlight ::ng-deep>*{flex-shrink:0}"]
}),
__param(0, Optional()),
__param(0, Inject(RouterLinkActive)),
__param(1, Inject(TUI_MODE)),
__param(2, Inject(TUI_TAB_EVENT)),
__param(3, Inject(TUI_MOBILE_AWARE)),
__param(4, Inject(TUI_IS_IOS)),
__param(5, Inject(TUI_IS_ANDROID)),
__param(6, Inject(TuiFocusVisibleService))
], TuiTabComponent);
return TuiTabComponent;
}());
var TAB_ACTIVE_CLASS = '_active';
var TAB_MARGIN = 24;
// @dynamic
var TuiTabsComponent = /** @class */ (function () {
function TuiTabsComponent(elementRef, renderer, changeDetectorRef, resize$, isIos, isAndroid, mobileAware) {
var _this = this;
this.elementRef = elementRef;
this.renderer = renderer;
this.underline = true;
this.activeItemIndexChange = new EventEmitter();
this.children = EMPTY_QUERY;
this.activeItemIndex = 0;
this.isIos = mobileAware && isIos;
this.isAndroid = mobileAware && isAndroid;
resize$.pipe(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: true,
configurable: true
});
Object.defineProperty(TuiTabsComponent.prototype, "refresh$", {
get: function () {
return itemsQueryListObservable(this.children).pipe(mapTo(true));
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiTabsComponent.prototype, "tabs", {
get: function () {
var tabs = Array.from(this.elementRef.nativeElement.querySelectorAll('[tuiTab]'));
return tabs;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiTabsComponent.prototype, "activeElement", {
get: function () {
return this.tabs[this.activeItemIndex] || null;
},
enumerable: true,
configurable: true
});
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');
}
};
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;
moveFocus(tabs.indexOf(current), tabs, step);
};
TuiTabsComponent.prototype.scrollTo = function (element) {
if (!element) {
return;
}
var offsetLeft = element.offsetLeft, offsetWidth = element.offsetWidth;
var nativeElement = this.elementRef.nativeElement;
if (offsetLeft < nativeElement.scrollLeft) {
nativeElement.scrollLeft = offsetLeft;
}
if (offsetLeft + offsetWidth >
nativeElement.scrollLeft + nativeElement.offsetWidth) {
nativeElement.scrollLeft =
offsetLeft + offsetWidth - nativeElement.offsetWidth;
}
};
TuiTabsComponent.ctorParameters = function () { return [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TuiResizeService,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_IOS,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_ANDROID,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_MOBILE_AWARE,] }] }
]; };
__decorate([
Input(),
HostBinding('class._underline'),
tuiDefaultProp()
], TuiTabsComponent.prototype, "underline", void 0);
__decorate([
Input('activeItemIndex')
], TuiTabsComponent.prototype, "activeItemIndexSetter", null);
__decorate([
Output()
], TuiTabsComponent.prototype, "activeItemIndexChange", void 0);
__decorate([
HostBinding('class._ios')
], TuiTabsComponent.prototype, "isIos", void 0);
__decorate([
HostBinding('class._android')
], TuiTabsComponent.prototype, "isAndroid", void 0);
__decorate([
ContentChildren(forwardRef(function () { return TuiTabComponent; }))
], TuiTabsComponent.prototype, "children", void 0);
__decorate([
tuiPure
], TuiTabsComponent.prototype, "refresh$", null);
__decorate([
HostListener(TUI_TAB_ACTIVATE + ".stop", ['$event.target'])
], TuiTabsComponent.prototype, "onActivate", null);
__decorate([
HostListener('keydown.arrowRight.prevent', ['$event.target', '1']),
HostListener('keydown.arrowLeft.prevent', ['$event.target', '-1'])
], TuiTabsComponent.prototype, "onKeyDownArrow", null);
TuiTabsComponent = __decorate([
Component({
selector: 'tui-tabs, nav[tuiTabs]',
template: "<tui-underline\n *ngIf=\"underline && (refresh$ | async)\"\n [element]=\"activeElement\"\n></tui-underline>\n<ng-content></ng-content>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class: 'tui-zero-scrollbar',
},
providers: [TuiDestroyService, TuiResizeService],
styles: [":host{font:var(--tui-font-text-m);position:relative;display:flex;height:var(--tui-height-l);color:var(--tui-text-02);box-shadow:inset 0 -1px var(--tui-base-03);overflow:auto}:host._android{height:auto}:host._ios{height:auto;border:2px solid transparent;border-radius:9px;background:var(--tui-link);box-shadow:none}"]
}),
__param(0, Inject(ElementRef)),
__param(1, Inject(Renderer2)),
__param(2, Inject(ChangeDetectorRef)),
__param(3, Inject(TuiResizeService)),
__param(4, Inject(TUI_IS_IOS)),
__param(5, Inject(TUI_IS_ANDROID)),
__param(6, Inject(TUI_MOBILE_AWARE))
], TuiTabsComponent);
return TuiTabsComponent;
}());
function tabsRefreshFactory(resize$, mutations$, destroy$, _a, _b, changeDetectorRef) {
var body = _a.body;
var nativeElement = _b.nativeElement;
return merge(resize$, mutations$.pipe(tap(function () { return changeDetectorRef.detectChanges(); }))).pipe(
// Ignoring cases when host is detached from DOM
filter(function () { return body.contains(nativeElement); }), debounceTime(0), startWith(null), takeUntil(destroy$));
}
var TABS_REFRESH = new InjectionToken('Refresh stream');
var ɵ0 = {
childList: true,
subtree: true,
};
var TABS_PROVIDERS = [
TuiResizeService,
TuiDestroyService,
MutationObserverService,
{
provide: MUTATION_OBSERVER_INIT,
useValue: ɵ0,
},
{
provide: TABS_REFRESH,
deps: [
TuiResizeService,
MutationObserverService,
TuiDestroyService,
DOCUMENT,
ElementRef,
ChangeDetectorRef,
],
useFactory: tabsRefreshFactory,
},
];
// @dynamic
var TuiTabsWithMoreComponent = /** @class */ (function () {
function TuiTabsWithMoreComponent(refresh$, elementRef, changeDetectorRef, moreWord$) {
this.refresh$ = refresh$;
this.elementRef = elementRef;
this.changeDetectorRef = changeDetectorRef;
this.moreWord$ = moreWord$;
this.moreContent = '';
this.underline = true;
this.activeItemIndex = 0;
this.itemsLimit = Infinity;
this.activeItemIndexChange = new EventEmitter();
this.items = EMPTY_QUERY;
this.open = false;
this.maxIndex = Infinity;
}
Object.defineProperty(TuiTabsWithMoreComponent.prototype, "tabs", {
get: function () {
return Array.from(this.elementRef.nativeElement.querySelectorAll('[tuiTab]'));
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiTabsWithMoreComponent.prototype, "activeElement", {
get: function () {
return this.tabs[this.activeItemIndex] || null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiTabsWithMoreComponent.prototype, "isMoreVisible", {
get: function () {
return this.lastVisibleIndex < this.items.length - 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiTabsWithMoreComponent.prototype, "isMoreFocusable", {
get: function () {
return !!this.moreButton && isNativeFocused(this.moreButton.nativeElement);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiTabsWithMoreComponent.prototype, "lastVisibleIndex", {
get: function () {
if (this.itemsLimit + 1 >= this.items.length) {
return this.maxIndex;
}
var offset = this.itemsLimit - 1 > this.activeItemIndex ? 1 : 2;
return Math.min(this.itemsLimit - offset, this.maxIndex);
},
enumerable: true,
configurable: true
});
TuiTabsWithMoreComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.refresh$
.pipe(map(function () { return _this.getMaxIndex(); }), filter(function (maxIndex) { return _this.maxIndex !== maxIndex; }))
.subscribe(function (maxIndex) {
_this.maxIndex = maxIndex;
_this.changeDetectorRef.detectChanges();
});
};
TuiTabsWithMoreComponent.prototype.onActiveItemIndexChange = function (activeItemIndex) {
this.updateActiveItemIndex(activeItemIndex);
};
TuiTabsWithMoreComponent.prototype.onClick = function (index) {
this.open = false;
this.focusMore();
this.updateActiveItemIndex(index);
};
TuiTabsWithMoreComponent.prototype.onArrowRight = function (element) {
if (isNativeFocused(element)) {
this.focusMore();
}
};
TuiTabsWithMoreComponent.prototype.onArrowLeft = function () {
var tabs = this.tabs;
var index = tabs.length - 2;
while (index >= 0) {
setNativeFocused(tabs[index]);
if (isNativeFocused(tabs[index])) {
return;
}
index--;
}
};
TuiTabsWithMoreComponent.prototype.onWrapperArrow = function (button, wrapper, prev) {
var target = getClosestFocusable(button, prev, wrapper);
if (target) {
setNativeFocused(target);
}
};
TuiTabsWithMoreComponent.prototype.focusMore = function () {
if (this.moreButton) {
setNativeFocused(this.moreButton.nativeElement);
}
};
TuiTabsWithMoreComponent.prototype.getMaxIndex = function () {
var _a = this, tabs = _a.tabs, activeItemIndex = _a.activeItemIndex;
if (tabs.length < 2) {
return 0;
}
var clientWidth = this.elementRef.nativeElement.clientWidth;
var activeWidth = tabs[activeItemIndex] ? tabs[activeItemIndex].scrollWidth : 0;
var moreWidth = tabs[tabs.length - 1].scrollWidth;
var maxIndex = tabs.length - 2;
var total = tabs.reduce(function (acc, tab) { return acc + tab.scrollWidth; }, 0) +
maxIndex * TAB_MARGIN -
moreWidth;
if (total <= clientWidth) {
return Infinity;
}
while (maxIndex) {
total -= tabs[maxIndex].scrollWidth + TAB_MARGIN;
maxIndex--;
var activeOffset = activeItemIndex > maxIndex ? activeWidth + TAB_MARGIN : 0;
if (total + activeOffset + moreWidth + TAB_MARGIN < clientWidth) {
return maxIndex;
}
}
return 0;
};
TuiTabsWithMoreComponent.prototype.updateActiveItemIndex = function (activeItemIndex) {
if (this.activeItemIndex === activeItemIndex) {
return;
}
this.activeItemIndex = activeItemIndex;
this.activeItemIndexChange.emit(activeItemIndex);
this.maxIndex = this.getMaxIndex();
};
TuiTabsWithMoreComponent.ctorParameters = function () { return [
{ type: Observable, decorators: [{ type: Inject, args: [TABS_REFRESH,] }] },
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_MORE_WORD,] }] }
]; };
__decorate([
Input(),
tuiDefaultProp()
], TuiTabsWithMoreComponent.prototype, "moreContent", void 0);
__decorate([
Input(),
HostBinding('class._underline'),
tuiDefaultProp()
], TuiTabsWithMoreComponent.prototype, "underline", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiTabsWithMoreComponent.prototype, "activeItemIndex", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiTabsWithMoreComponent.prototype, "itemsLimit", void 0);
__decorate([
Output()
], TuiTabsWithMoreComponent.prototype, "activeItemIndexChange", void 0);
__decorate([
ContentChildren(TuiTabDirective, { read: TemplateRef })
], TuiTabsWithMoreComponent.prototype, "items", void 0);
__decorate([
ViewChild(TuiTabComponent, { read: ElementRef })
], TuiTabsWithMoreComponent.prototype, "moreButton", void 0);
TuiTabsWithMoreComponent = __decorate([
Component({
selector: 'tui-tabs-with-more, nav[tuiTabsWithMore]',
template: "<ng-container *ngIf=\"items.changes | async\"></ng-container>\n<div class=\"wrapper\">\n <tui-tabs\n class=\"tabs\"\n [underline]=\"false\"\n [activeItemIndex]=\"activeItemIndex\"\n (activeItemIndexChange)=\"onActiveItemIndexChange($event)\"\n (keydown.arrowRight)=\"onArrowRight($event.target)\"\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\n class=\"overflown\"\n [class.overflown_hidden]=\"index !== activeItemIndex\"\n >\n <ng-container *ngTemplateOutlet=\"item\"></ng-container>\n </div>\n </ng-template>\n </ng-container>\n </tui-tabs>\n <tui-hosted-dropdown\n class=\"more_wrapper\"\n [class.overflown_hidden]=\"!isMoreVisible\"\n [content]=\"dropdown\"\n [(open)]=\"open\"\n >\n <button\n tuiTab\n type=\"button\"\n class=\"more\"\n [class._active]=\"open\"\n [tuiFocusable]=\"isMoreFocusable\"\n (keydown.arrowLeft.prevent)=\"onArrowLeft()\"\n >\n <span polymorpheus-outlet [content]=\"moreContent || more\"></span>\n </button>\n <ng-template #more>\n {{moreWord$ | async}}\n <tui-svg\n src=\"tuiIconChevronDown\"\n class=\"icon\"\n [class.icon_rotated]=\"open\"\n ></tui-svg>\n </ng-template>\n </tui-hosted-dropdown>\n <ng-template #dropdown>\n <div\n #element\n class=\"dropdown\"\n (keydown.arrowUp.prevent)=\"onWrapperArrow($event.target, element, true)\"\n (keydown.arrowDown.prevent)=\"onWrapperArrow($event.target, 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=\"index > lastVisibleIndex && index !== activeItemIndex\"\n [ngTemplateOutlet]=\"item\"\n ></ng-container>\n </div>\n </div>\n </ng-template>\n <tui-underline *ngIf=\"underline\" [element]=\"activeElement\"></tui-underline>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: TABS_PROVIDERS,
styles: [":host{font:var(--tui-font-text-m);position:relative;display:flex;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}.wrapper{position:relative;display:flex}.tabs{height:inherit;font-size:inherit;font-weight:inherit;overflow:visible;box-shadow:none;color:inherit}.overflown{margin-right:24px}.overflown_hidden{margin:0;width:0;max-width:0;overflow:hidden;visibility:hidden}.more_wrapper{height:100%}.icon{transition-property:transform;transition-duration:.3s;transition-timing-function:ease-in-out;margin-right:-4px;vertical-align:bottom}.icon_rotated{transform:rotate(180deg)}.dropdown{padding:8px 0}.dropdown ::ng-deep [tuiTab]{width:100%;height:44px;justify-content:flex-start;margin:0;padding:0 16px;color:var(--tui-text-02)}.dropdown ::ng-deep [tuiTab]:before{display:none}.dropdown ::ng-deep [tuiTab]._active,.dropdown ::ng-deep [tuiTab]:focus,.dropdown ::ng-deep [tuiTab]:hover{box-shadow:none;color:var(--tui-base-08);background:var(--tui-base-02)}"]
}),
__param(0, Inject(TABS_REFRESH)),
__param(1, Inject(ElementRef)),
__param(2, Inject(ChangeDetectorRef)),
__param(3, Inject(TUI_MORE_WORD))
], TuiTabsWithMoreComponent);
return TuiTabsWithMoreComponent;
}());
var TuiUnderlineComponent = /** @class */ (function () {
function TuiUnderlineComponent(_a, ngZone, animationFrame$, mobileAware, ios, android, mode$) {
var _this = this;
var nativeElement = _a.nativeElement;
this.ngZone = ngZone;
this.animationFrame$ = animationFrame$;
this.mobileAware = mobileAware;
this.ios = ios;
this.android = android;
this.mode$ = mode$;
this.isIos = this.mobileAware && this.ios;
this.isAndroid = this.mobileAware && this.android;
this.element$ = new ReplaySubject(1);
this.refresh$ = this.element$.pipe(switchMap(function (element) {
return element
? _this.animationFrame$.pipe(mapTo(element), tuiZonefree(_this.ngZone))
: of(null);
}), share());
this.transition$ = asCallable(this.element$.pipe(map(function (element) { return element && 'all'; }), debounceTime(50)));
this.transform$ = asCallable(this.refresh$.pipe(map(function (element) {
return element ? "translate3d(" + px(element.offsetLeft) + ", 0, 0)" : null;
})));
this.width$ = asCallable(this.refresh$.pipe(map(function (element) { return (element ? element.clientWidth : 0); })));
nativeElement['$.style.transitionProperty'] = this.transition$;
nativeElement['$.style.transform'] = this.transform$;
nativeElement['$.style.width.px'] = this.width$;
}
Object.defineProperty(TuiUnderlineComponent.prototype, "element", {
set: function (element) {
this.element$.next(element);
},
enumerable: true,
configurable: true
});
TuiUnderlineComponent.ctorParameters = function () { return [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: NgZone, decorators: [{ type: Inject, args: [NgZone,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [ANIMATION_FRAME,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_MOBILE_AWARE,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_IOS,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_ANDROID,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] }
]; };
__decorate([
Input(),
tuiDefaultProp()
], TuiUnderlineComponent.prototype, "element", null);
__decorate([
HostBinding('class._ios')
], TuiUnderlineComponent.prototype, "isIos", void 0);
__decorate([
HostBinding('class._android')
], TuiUnderlineComponent.prototype, "isAndroid", void 0);
__decorate([
HostListener('$.style.transitionProperty')
], TuiUnderlineComponent.prototype, "transition$", void 0);
__decorate([
HostListener('$.style.transform')
], TuiUnderlineComponent.prototype, "transform$", void 0);
__decorate([
HostListener('$.style.width.px')
], TuiUnderlineComponent.prototype, "width$", void 0);
TuiUnderlineComponent = __decorate([
Component({
selector: 'tui-underline',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [MODE_PROVIDER],
host: {
'($.data-mode.attr)': 'mode$',
},
styles: [":host{transition-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 -3px 0 -1px;transition-property:none;pointer-events:none}:host._ios{border-radius:7px;background:var(--tui-base-01);box-shadow:0 3px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.12)}:host._android{box-shadow:inset 0 -3px var(--tui-link)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-mode=onLight]{color:#666}"]
}),
__param(0, Inject(ElementRef)),
__param(1, Inject(NgZone)),
__param(2, Inject(ANIMATION_FRAME)),
__param(3, Inject(TUI_MOBILE_AWARE)),
__param(4, Inject(TUI_IS_IOS)),
__param(5, Inject(TUI_IS_ANDROID)),
__param(6, Inject(TUI_MODE))
], TuiUnderlineComponent);
return TuiUnderlineComponent;
}());
var TuiTabsModule = /** @class */ (function () {
function TuiTabsModule() {
}
TuiTabsModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiHostedDropdownModule,
TuiSvgModule,
TuiFocusableModule,
PolymorpheusModule,
],
declarations: [
TuiTabsWithMoreComponent,
TuiTabsComponent,
TuiTabComponent,
TuiUnderlineComponent,
TuiTabDirective,
],
exports: [
TuiTabsWithMoreComponent,
TuiTabsComponent,
TuiTabComponent,
TuiTabDirective,
],
})
], TuiTabsModule);
return TuiTabsModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TABS_PROVIDERS, TABS_REFRESH, TAB_ACTIVE_CLASS, TAB_MARGIN, TUI_TAB_ACTIVATE, TUI_TAB_EVENT, TUI_TAB_PROVIDERS, TuiTabComponent, TuiTabDirective, TuiTabsComponent, TuiTabsModule, TuiTabsWithMoreComponent, TuiUnderlineComponent, tabActiveFactory, tabsRefreshFactory, ɵ0 };
//# sourceMappingURL=taiga-ui-kit-components-tabs.js.map