@taiga-ui/kit 3.62.0 → 3.63.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/taiga-ui-kit-components-tabs.umd.js +44 -55
- package/bundles/taiga-ui-kit-components-tabs.umd.js.map +1 -1
- package/bundles/taiga-ui-kit-tokens.umd.js +1 -1
- package/bundles/taiga-ui-kit-tokens.umd.js.map +1 -1
- package/components/tabs/tab/tab.component.d.ts +2 -4
- package/esm2015/components/tabs/tab/tab.component.js +6 -17
- package/esm2015/tokens/countries-masks.js +2 -2
- package/fesm2015/taiga-ui-kit-components-tabs.js +6 -16
- package/fesm2015/taiga-ui-kit-components-tabs.js.map +1 -1
- package/fesm2015/taiga-ui-kit-tokens.js +1 -1
- package/fesm2015/taiga-ui-kit-tokens.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
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'), require('@taiga-ui/kit/components/arrow')) :
|
|
3
3
|
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', '@taiga-ui/kit/components/arrow'], factory) :
|
|
4
|
-
(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.
|
|
5
|
-
})(this, (function (exports, i0, i2$1,
|
|
4
|
+
(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.i7, global.i2, global["taiga-ui"].kit.tokens, global.mutationObserver, global.rxjs, global.rxjs.operators, global.ng.common, global.i8, global.common, global.ngEventPlugins, global["taiga-ui"].kit.components.arrow));
|
|
5
|
+
})(this, (function (exports, i0, i2$1, i7, i2, tokens, mutationObserver, i3, operators, i5, i8, common, ngEventPlugins, arrow) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
26
26
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
|
|
27
|
-
var
|
|
27
|
+
var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
|
|
28
28
|
var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
|
|
29
29
|
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
|
|
30
30
|
var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
var TUI_TAB_EVENT = new i0.InjectionToken('[TUI_TAB_EVENT]');
|
|
37
37
|
var TUI_TAB_ACTIVATE = 'tui-tab-activate';
|
|
38
38
|
var TUI_TAB_PROVIDERS = [
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
i7.TuiDestroyService,
|
|
40
|
+
i7.TuiFocusVisibleService,
|
|
41
41
|
i2.TuiRouterLinkActiveService,
|
|
42
42
|
{
|
|
43
43
|
provide: TUI_TAB_EVENT,
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
? mutationObserverService.pipe(operators.filter(function () { return routerLinkActive.isActive; }))
|
|
54
54
|
: i3.EMPTY;
|
|
55
55
|
return i3.merge(mutationObserver, routerLinkActiveService.pipe(operators.filter(i3.identity)), nativeElement.matches('button')
|
|
56
|
-
?
|
|
56
|
+
? i7.tuiTypedFromEvent(nativeElement, 'click')
|
|
57
57
|
: i3.EMPTY).pipe(operators.map(function () { return nativeElement.dispatchEvent(new CustomEvent(TUI_TAB_ACTIVATE, { bubbles: true })); }));
|
|
58
58
|
},
|
|
59
59
|
},
|
|
@@ -61,17 +61,12 @@
|
|
|
61
61
|
];
|
|
62
62
|
|
|
63
63
|
var TuiTabComponent = /** @class */ (function () {
|
|
64
|
-
function TuiTabComponent(routerLinkActive, el, mode$, event$, margin
|
|
65
|
-
var _this = this;
|
|
64
|
+
function TuiTabComponent(routerLinkActive, el, mode$, event$, margin) {
|
|
66
65
|
this.routerLinkActive = routerLinkActive;
|
|
67
66
|
this.el = el;
|
|
68
67
|
this.mode$ = mode$;
|
|
69
68
|
this.event$ = event$;
|
|
70
69
|
this.margin = margin;
|
|
71
|
-
this.focusVisible = false;
|
|
72
|
-
focusVisible$.subscribe(function (visible) {
|
|
73
|
-
_this.focusVisible = visible;
|
|
74
|
-
});
|
|
75
70
|
}
|
|
76
71
|
Object.defineProperty(TuiTabComponent.prototype, "isActive", {
|
|
77
72
|
get: function () {
|
|
@@ -81,14 +76,14 @@
|
|
|
81
76
|
configurable: true
|
|
82
77
|
});
|
|
83
78
|
TuiTabComponent.prototype.ngOnDestroy = function () {
|
|
84
|
-
if (
|
|
79
|
+
if (i7.tuiIsNativeFocused(this.el.nativeElement)) {
|
|
85
80
|
this.el.nativeElement.blur();
|
|
86
81
|
}
|
|
87
82
|
};
|
|
88
83
|
return TuiTabComponent;
|
|
89
84
|
}());
|
|
90
|
-
TuiTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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 }
|
|
91
|
-
TuiTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]", host: { attributes: { "type": "button" }, listeners: { "$.data-mode.attr": "mode$" }, properties: { "style.cursor": "\"pointer\"", "style.--tui-tab-margin.px": "margin", "class.
|
|
85
|
+
TuiTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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 }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
86
|
+
TuiTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]", host: { attributes: { "type": "button" }, listeners: { "$.data-mode.attr": "mode$" }, properties: { "style.cursor": "\"pointer\"", "style.--tui-tab-margin.px": "margin", "class._active": "this.isActive" } }, providers: TUI_TAB_PROVIDERS, ngImport: i0__namespace, template: "<ng-container *ngIf=\"event$ | async\"></ng-container>\n<span class=\"t-highlight\">\n <ng-content></ng-content>\n</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:color,box-shadow,opacity,background;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;text-decoration:none;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;color:inherit;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:#ffffffb8}: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 });
|
|
92
87
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTabComponent, decorators: [{
|
|
93
88
|
type: i0.Component,
|
|
94
89
|
args: [{
|
|
@@ -130,14 +125,8 @@
|
|
|
130
125
|
}] }, { type: undefined, decorators: [{
|
|
131
126
|
type: i0.Inject,
|
|
132
127
|
args: [tokens.TUI_TAB_MARGIN]
|
|
133
|
-
}] }, { type: i4__namespace.TuiFocusVisibleService, decorators: [{
|
|
134
|
-
type: i0.Inject,
|
|
135
|
-
args: [i4.TuiFocusVisibleService]
|
|
136
128
|
}] }];
|
|
137
|
-
}, propDecorators: {
|
|
138
|
-
type: i0.HostBinding,
|
|
139
|
-
args: ['class._focus-visible']
|
|
140
|
-
}], isActive: [{
|
|
129
|
+
}, propDecorators: { isActive: [{
|
|
141
130
|
type: i0.HostBinding,
|
|
142
131
|
args: ['class._active']
|
|
143
132
|
}] } });
|
|
@@ -173,7 +162,7 @@
|
|
|
173
162
|
};
|
|
174
163
|
TuiTabsDirective.prototype.moveFocus = function (current, step) {
|
|
175
164
|
var tabs = this.tabs;
|
|
176
|
-
|
|
165
|
+
i7.tuiMoveFocus(tabs.indexOf(current), tabs, step);
|
|
177
166
|
};
|
|
178
167
|
TuiTabsDirective.prototype.ngAfterViewChecked = function () {
|
|
179
168
|
var _a = this, tabs = _a.tabs, activeElement = _a.activeElement;
|
|
@@ -533,9 +522,9 @@
|
|
|
533
522
|
/**
|
|
534
523
|
* Default parameters for Tabs component
|
|
535
524
|
*/
|
|
536
|
-
var TUI_TABS_OPTIONS =
|
|
525
|
+
var TUI_TABS_OPTIONS = i7.tuiCreateToken(TUI_TABS_DEFAULT_OPTIONS);
|
|
537
526
|
function tuiTabsOptionsProvider(options) {
|
|
538
|
-
return
|
|
527
|
+
return i7.tuiProvideOptions(TUI_TABS_OPTIONS, options, TUI_TABS_DEFAULT_OPTIONS);
|
|
539
528
|
}
|
|
540
529
|
|
|
541
530
|
var TuiUnderlineComponent = /** @class */ (function () {
|
|
@@ -547,7 +536,7 @@
|
|
|
547
536
|
this.mode$ = mode$;
|
|
548
537
|
this.el$ = new i3.ReplaySubject(1);
|
|
549
538
|
this.refresh$ = this.el$.pipe(operators.switchMap(function (element) { return element
|
|
550
|
-
? _this.animationFrame$.pipe(operators.map(function () { return element; }),
|
|
539
|
+
? _this.animationFrame$.pipe(operators.map(function () { return element; }), i7.tuiZonefree(_this.zone))
|
|
551
540
|
: i3.of(null); }), operators.share());
|
|
552
541
|
this.transition$ = ngEventPlugins.asCallable(this.el$.pipe(operators.map(function (element) { return element && 'all'; }), operators.debounceTime(50)));
|
|
553
542
|
this.transform$ = ngEventPlugins.asCallable(this.refresh$.pipe(operators.map(function (element) { return element ? "translate3d(" + element.offsetLeft + "px, 0, 0)" : null; })));
|
|
@@ -612,7 +601,7 @@
|
|
|
612
601
|
this.options = options;
|
|
613
602
|
this.el = el;
|
|
614
603
|
this.tabs = tabs;
|
|
615
|
-
this.children =
|
|
604
|
+
this.children = i7.EMPTY_QUERY;
|
|
616
605
|
this.underline = this.options.underline;
|
|
617
606
|
resize$.pipe(operators.filter(function () { return _this.underline; })).subscribe(function () {
|
|
618
607
|
cdr.detectChanges();
|
|
@@ -661,10 +650,10 @@
|
|
|
661
650
|
};
|
|
662
651
|
return TuiTabsComponent;
|
|
663
652
|
}());
|
|
664
|
-
TuiTabsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTabsComponent, deps: [{ token: TUI_TABS_OPTIONS }, { token: i0.ElementRef }, { token: TuiTabsDirective }, { token: i0.ChangeDetectorRef }, { token:
|
|
653
|
+
TuiTabsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTabsComponent, deps: [{ token: TUI_TABS_OPTIONS }, { token: i0.ElementRef }, { token: TuiTabsDirective }, { token: i0.ChangeDetectorRef }, { token: i7.TuiResizeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
665
654
|
TuiTabsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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: [
|
|
666
|
-
|
|
667
|
-
|
|
655
|
+
i7.TuiDestroyService,
|
|
656
|
+
i7.TuiResizeService,
|
|
668
657
|
mutationObserver.MutationObserverService,
|
|
669
658
|
{
|
|
670
659
|
provide: mutationObserver.MUTATION_OBSERVER_INIT,
|
|
@@ -674,7 +663,7 @@
|
|
|
674
663
|
},
|
|
675
664
|
], 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;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;isolation:isolate}: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 });
|
|
676
665
|
__decorate([
|
|
677
|
-
|
|
666
|
+
i7.tuiPure
|
|
678
667
|
], TuiTabsComponent.prototype, "scrollTo", null);
|
|
679
668
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTabsComponent, decorators: [{
|
|
680
669
|
type: i0.Component,
|
|
@@ -684,8 +673,8 @@
|
|
|
684
673
|
styleUrls: ['./tabs.style.less'],
|
|
685
674
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
686
675
|
providers: [
|
|
687
|
-
|
|
688
|
-
|
|
676
|
+
i7.TuiDestroyService,
|
|
677
|
+
i7.TuiResizeService,
|
|
689
678
|
mutationObserver.MutationObserverService,
|
|
690
679
|
{
|
|
691
680
|
provide: mutationObserver.MUTATION_OBSERVER_INIT,
|
|
@@ -710,7 +699,7 @@
|
|
|
710
699
|
args: [i0.ChangeDetectorRef]
|
|
711
700
|
}] }, { type: i3__namespace.Observable, decorators: [{
|
|
712
701
|
type: i0.Inject,
|
|
713
|
-
args: [
|
|
702
|
+
args: [i7.TuiResizeService]
|
|
714
703
|
}] }];
|
|
715
704
|
}, propDecorators: { children: [{
|
|
716
705
|
type: i0.ContentChildren,
|
|
@@ -768,8 +757,8 @@
|
|
|
768
757
|
|
|
769
758
|
var TUI_TABS_REFRESH = new i0.InjectionToken('[TUI_TABS_REFRESH]');
|
|
770
759
|
var TUI_TABS_PROVIDERS = [
|
|
771
|
-
|
|
772
|
-
|
|
760
|
+
i7.TuiResizeService,
|
|
761
|
+
i7.TuiDestroyService,
|
|
773
762
|
mutationObserver.MutationObserverService,
|
|
774
763
|
i2.tuiDropdownOptionsProvider({ align: 'right' }),
|
|
775
764
|
{
|
|
@@ -783,9 +772,9 @@
|
|
|
783
772
|
{
|
|
784
773
|
provide: TUI_TABS_REFRESH,
|
|
785
774
|
deps: [
|
|
786
|
-
|
|
775
|
+
i7.TuiResizeService,
|
|
787
776
|
mutationObserver.MutationObserverService,
|
|
788
|
-
|
|
777
|
+
i7.TuiDestroyService,
|
|
789
778
|
i5.DOCUMENT,
|
|
790
779
|
i0.ElementRef,
|
|
791
780
|
i0.ChangeDetectorRef,
|
|
@@ -813,7 +802,7 @@
|
|
|
813
802
|
this.underline = this.options.underline;
|
|
814
803
|
this.itemsLimit = this.options.itemsLimit;
|
|
815
804
|
this.activeItemIndexChange = new i0.EventEmitter();
|
|
816
|
-
this.items =
|
|
805
|
+
this.items = i7.EMPTY_QUERY;
|
|
817
806
|
this.activeItemIndex = 0;
|
|
818
807
|
this.open = false;
|
|
819
808
|
}
|
|
@@ -837,7 +826,7 @@
|
|
|
837
826
|
get: function () {
|
|
838
827
|
var _a;
|
|
839
828
|
var tabs = this.tabs;
|
|
840
|
-
var safeActiveIndex =
|
|
829
|
+
var safeActiveIndex = i7.tuiClamp(this.activeItemIndex || 0, 0, tabs.length - 2);
|
|
841
830
|
return this.options.exposeActive || this.lastVisibleIndex >= safeActiveIndex
|
|
842
831
|
? tabs[safeActiveIndex] || null
|
|
843
832
|
: ((_a = this.moreButton) === null || _a === void 0 ? void 0 : _a.nativeElement) || null;
|
|
@@ -861,7 +850,7 @@
|
|
|
861
850
|
});
|
|
862
851
|
Object.defineProperty(TuiTabsWithMoreComponent.prototype, "isMoreFocusable", {
|
|
863
852
|
get: function () {
|
|
864
|
-
return !!this.moreButton &&
|
|
853
|
+
return !!this.moreButton && i7.tuiIsNativeFocused(this.moreButton.nativeElement);
|
|
865
854
|
},
|
|
866
855
|
enumerable: false,
|
|
867
856
|
configurable: true
|
|
@@ -905,7 +894,7 @@
|
|
|
905
894
|
this.updateActiveItemIndex(index);
|
|
906
895
|
};
|
|
907
896
|
TuiTabsWithMoreComponent.prototype.onArrowRight = function (event) {
|
|
908
|
-
if (
|
|
897
|
+
if (i7.tuiIsElement(event.target) && i7.tuiIsNativeFocused(event.target)) {
|
|
909
898
|
this.focusMore();
|
|
910
899
|
}
|
|
911
900
|
};
|
|
@@ -914,7 +903,7 @@
|
|
|
914
903
|
var index = tabs.length - 2;
|
|
915
904
|
while (index >= 0) {
|
|
916
905
|
tabs[index].focus();
|
|
917
|
-
if (
|
|
906
|
+
if (i7.tuiIsNativeFocused(tabs[index])) {
|
|
918
907
|
return;
|
|
919
908
|
}
|
|
920
909
|
index--;
|
|
@@ -922,7 +911,7 @@
|
|
|
922
911
|
};
|
|
923
912
|
TuiTabsWithMoreComponent.prototype.onWrapperArrow = function (event, wrapper, previous) {
|
|
924
913
|
var button = event.target;
|
|
925
|
-
var target =
|
|
914
|
+
var target = i7.tuiGetClosestFocusable({ initial: button, root: wrapper, previous: previous });
|
|
926
915
|
if (target) {
|
|
927
916
|
target.focus();
|
|
928
917
|
}
|
|
@@ -964,7 +953,7 @@
|
|
|
964
953
|
var activeOffset = activeDisplaced ? activeWidth + margin : 0;
|
|
965
954
|
var currentWidth = total + activeOffset + moreWidth + margin;
|
|
966
955
|
// Needed for different rounding of visible and hidden elements scrollWidth
|
|
967
|
-
var safetyOffset =
|
|
956
|
+
var safetyOffset = i7.tuiToInt(this.maxIndex === maxIndex - 1);
|
|
968
957
|
if (currentWidth + safetyOffset < clientWidth) {
|
|
969
958
|
return maxIndex;
|
|
970
959
|
}
|
|
@@ -978,7 +967,7 @@
|
|
|
978
967
|
return TuiTabsWithMoreComponent;
|
|
979
968
|
}());
|
|
980
969
|
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 }, { token: arrow.TUI_ARROW_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
981
|
-
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", itemIndex: ["activeItemIndex", "itemIndex"], itemsLimit: "itemsLimit" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { properties: { "class._underline": "this.underline" } }, providers: TUI_TABS_PROVIDERS, queries: [{ propertyName: "items", predicate:
|
|
970
|
+
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", itemIndex: ["activeItemIndex", "itemIndex"], itemsLimit: "itemsLimit" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { properties: { "class._underline": "this.underline" } }, providers: TUI_TABS_PROVIDERS, queries: [{ propertyName: "items", predicate: i7.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 [activeItemIndex]=\"activeItemIndex\"\n [underline]=\"false\"\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 class=\"t-icon\"\n [class.t-icon_rotated]=\"open\"\n [src]=\"arrowOptions.iconSmall\"\n ></tui-svg>\n </ng-template>\n </tui-hosted-dropdown>\n <ng-template #dropdown>\n <div\n #element\n class=\"t-dropdown\"\n (keydown.arrowDown.prevent)=\"onWrapperArrow($event, element, false)\"\n (keydown.arrowUp.prevent)=\"onWrapperArrow($event, element, true)\"\n >\n <div\n *ngFor=\"let item of items; let index = index\"\n class=\"t-dropdown-item\"\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:.25rem 0}.t-dropdown ::ng-deep *[tuiTab]{width:calc(100% - .75rem);height:2.75rem;justify-content:flex-start;margin:.125rem .375rem;padding:0 .625rem;border-radius:var(--tui-radius-s);font:var(--tui-font-text-m);color:var(--tui-text-01)}.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;background:var(--tui-clear)}.t-dropdown ::ng-deep *[tuiTab] .t-highlight{background:transparent!important}.t-dropdown-item{display:flex;flex-direction:column}.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: i7__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 });
|
|
982
971
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTabsWithMoreComponent, decorators: [{
|
|
983
972
|
type: i0.Component,
|
|
984
973
|
args: [{
|
|
@@ -1032,7 +1021,7 @@
|
|
|
1032
1021
|
type: i0.Output
|
|
1033
1022
|
}], items: [{
|
|
1034
1023
|
type: i0.ContentChildren,
|
|
1035
|
-
args: [
|
|
1024
|
+
args: [i7.TuiItemDirective, { read: i0.TemplateRef }]
|
|
1036
1025
|
}] } });
|
|
1037
1026
|
|
|
1038
1027
|
var TuiTabsModule = /** @class */ (function () {
|
|
@@ -1050,20 +1039,20 @@
|
|
|
1050
1039
|
i8.PolymorpheusModule,
|
|
1051
1040
|
i2.TuiHostedDropdownModule,
|
|
1052
1041
|
i2.TuiSvgModule,
|
|
1053
|
-
|
|
1054
|
-
|
|
1042
|
+
i7.TuiFocusableModule,
|
|
1043
|
+
i7.TuiItemModule], exports: [TuiTabsWithMoreComponent,
|
|
1055
1044
|
TuiTabsComponent,
|
|
1056
1045
|
TuiTabsDirective,
|
|
1057
1046
|
TuiTabsVerticalComponent,
|
|
1058
1047
|
TuiTabComponent,
|
|
1059
|
-
|
|
1048
|
+
i7.TuiItemDirective] });
|
|
1060
1049
|
TuiTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTabsModule, imports: [[
|
|
1061
1050
|
i5.CommonModule,
|
|
1062
1051
|
i8.PolymorpheusModule,
|
|
1063
1052
|
i2.TuiHostedDropdownModule,
|
|
1064
1053
|
i2.TuiSvgModule,
|
|
1065
|
-
|
|
1066
|
-
|
|
1054
|
+
i7.TuiFocusableModule,
|
|
1055
|
+
i7.TuiItemModule,
|
|
1067
1056
|
]] });
|
|
1068
1057
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTabsModule, decorators: [{
|
|
1069
1058
|
type: i0.NgModule,
|
|
@@ -1073,8 +1062,8 @@
|
|
|
1073
1062
|
i8.PolymorpheusModule,
|
|
1074
1063
|
i2.TuiHostedDropdownModule,
|
|
1075
1064
|
i2.TuiSvgModule,
|
|
1076
|
-
|
|
1077
|
-
|
|
1065
|
+
i7.TuiFocusableModule,
|
|
1066
|
+
i7.TuiItemModule,
|
|
1078
1067
|
],
|
|
1079
1068
|
declarations: [
|
|
1080
1069
|
TuiTabsWithMoreComponent,
|
|
@@ -1090,7 +1079,7 @@
|
|
|
1090
1079
|
TuiTabsDirective,
|
|
1091
1080
|
TuiTabsVerticalComponent,
|
|
1092
1081
|
TuiTabComponent,
|
|
1093
|
-
|
|
1082
|
+
i7.TuiItemDirective,
|
|
1094
1083
|
],
|
|
1095
1084
|
}]
|
|
1096
1085
|
}] });
|