@taiga-ui/kit
Version:
Taiga UI Angular main components kit
73 lines • 10.8 kB
JavaScript
import { __decorate, __param } from "tslib";
import { ChangeDetectionStrategy, Component, HostBinding, Inject, Optional, } from '@angular/core';
import { RouterLinkActive } from '@angular/router';
import { TUI_IS_ANDROID, TUI_IS_IOS, TuiFocusVisibleService } from '@taiga-ui/cdk';
import { TUI_MODE } from '@taiga-ui/core';
import { TUI_MOBILE_AWARE } from '@taiga-ui/kit/tokens';
import { Observable } from 'rxjs';
import { TUI_TAB_EVENT, TUI_TAB_PROVIDERS } from './tab.providers';
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;
}());
export { TuiTabComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy90YWJzLyIsInNvdXJjZXMiOlsidGFiL3RhYi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFdBQVcsRUFDWCxNQUFNLEVBQ04sUUFBUSxHQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ2pELE9BQU8sRUFBQyxjQUFjLEVBQUUsVUFBVSxFQUFFLHNCQUFzQixFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2pGLE9BQU8sRUFBQyxRQUFRLEVBQWdCLE1BQU0sZ0JBQWdCLENBQUM7QUFDdkQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDdEQsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUNoQyxPQUFPLEVBQUMsYUFBYSxFQUFFLGlCQUFpQixFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFZakU7SUFVSSx5QkFHcUIsZ0JBQXlDLEVBQy9CLEtBQXVDLEVBQ2xDLE1BQXlCLEVBQy9CLFdBQW9CLEVBQzFCLEtBQWMsRUFDVixTQUFrQixFQUNWLGFBQXFDO1FBVHpFLGlCQWlCQztRQWRvQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQXlCO1FBQy9CLFVBQUssR0FBTCxLQUFLLENBQWtDO1FBQ2xDLFdBQU0sR0FBTixNQUFNLENBQW1CO1FBUDdELGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBYWpCLElBQUksQ0FBQyxLQUFLLEdBQUcsV0FBVyxJQUFJLEtBQUssQ0FBQztRQUNsQyxJQUFJLENBQUMsU0FBUyxHQUFHLFdBQVcsSUFBSSxTQUFTLENBQUM7UUFFMUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxVQUFBLE9BQU87WUFDM0IsS0FBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUM7UUFDaEMsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBR0Qsc0JBQUkscUNBQVE7YUFBWjtZQUNJLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxDQUFDO1FBQ3JFLENBQUM7OztPQUFBOztnQkFuQnNDLGdCQUFnQix1QkFGbEQsUUFBUSxZQUNSLE1BQU0sU0FBQyxnQkFBZ0I7Z0JBRVUsVUFBVSx1QkFBM0MsTUFBTSxTQUFDLFFBQVE7Z0JBQ3dCLFVBQVUsdUJBQWpELE1BQU0sU0FBQyxhQUFhOzhDQUNwQixNQUFNLFNBQUMsZ0JBQWdCOzhDQUN2QixNQUFNLFNBQUMsVUFBVTs4Q0FDakIsTUFBTSxTQUFDLGNBQWM7Z0JBQ3lCLHNCQUFzQix1QkFBcEUsTUFBTSxTQUFDLHNCQUFzQjs7SUFqQmxDO1FBREMsV0FBVyxDQUFDLFlBQVksQ0FBQztrREFDRjtJQUd4QjtRQURDLFdBQVcsQ0FBQyxnQkFBZ0IsQ0FBQztzREFDRjtJQUc1QjtRQURDLFdBQVcsQ0FBQyxzQkFBc0IsQ0FBQzt5REFDZjtJQXNCckI7UUFEQyxXQUFXLENBQUMsZUFBZSxDQUFDO21EQUc1QjtJQWhDUSxlQUFlO1FBVjNCLFNBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSxzRkFBc0Y7WUFDaEcsZ0lBQWtDO1lBRWxDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO1lBQy9DLFNBQVMsRUFBRSxpQkFBaUI7WUFDNUIsSUFBSSxFQUFFO2dCQUNGLG9CQUFvQixFQUFFLE9BQU87YUFDaEM7O1NBQ0osQ0FBQztRQVlPLFdBQUEsUUFBUSxFQUFFLENBQUE7UUFDVixXQUFBLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFBO1FBRXhCLFdBQUEsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFBO1FBQ2hCLFdBQUEsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFBO1FBQ3JCLFdBQUEsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUE7UUFDeEIsV0FBQSxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUE7UUFDbEIsV0FBQSxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUE7UUFDdEIsV0FBQSxNQUFNLENBQUMsc0JBQXNCLENBQUMsQ0FBQTtPQW5CMUIsZUFBZSxDQWlDM0I7SUFBRCxzQkFBQztDQUFBLEFBakNELElBaUNDO1NBakNZLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBIb3N0QmluZGluZyxcbiAgICBJbmplY3QsXG4gICAgT3B0aW9uYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtSb3V0ZXJMaW5rQWN0aXZlfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuaW1wb3J0IHtUVUlfSVNfQU5EUk9JRCwgVFVJX0lTX0lPUywgVHVpRm9jdXNWaXNpYmxlU2VydmljZX0gZnJvbSAnQHRhaWdhLXVpL2Nkayc7XG5pbXBvcnQge1RVSV9NT0RFLCBUdWlCcmlnaHRuZXNzfSBmcm9tICdAdGFpZ2EtdWkvY29yZSc7XG5pbXBvcnQge1RVSV9NT0JJTEVfQVdBUkV9IGZyb20gJ0B0YWlnYS11aS9raXQvdG9rZW5zJztcbmltcG9ydCB7T2JzZXJ2YWJsZX0gZnJvbSAncnhqcyc7XG5pbXBvcnQge1RVSV9UQUJfRVZFTlQsIFRVSV9UQUJfUFJPVklERVJTfSBmcm9tICcuL3RhYi5wcm92aWRlcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogYGFbdHVpVGFiXTpub3QoW3JvdXRlckxpbmtdKSwgYVt0dWlUYWJdW3JvdXRlckxpbmtdW3JvdXRlckxpbmtBY3RpdmVdLCBidXR0b25bdHVpVGFiXWAsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RhYi50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogVFVJX1RBQl9QUk9WSURFUlMsXG4gICAgaG9zdDoge1xuICAgICAgICAnKCQuZGF0YS1tb2RlLmF0dHIpJzogJ21vZGUkJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUYWJDb21wb25lbnQge1xuICAgIEBIb3N0QmluZGluZygnY2xhc3MuX2lvcycpXG4gICAgcmVhZG9ubHkgaXNJb3M6IGJvb2xlYW47XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLl9hbmRyb2lkJylcbiAgICByZWFkb25seSBpc0FuZHJvaWQ6IGJvb2xlYW47XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLl9mb2N1cy12aXNpYmxlJylcbiAgICBmb2N1c1Zpc2libGUgPSBmYWxzZTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBAT3B0aW9uYWwoKVxuICAgICAgICBASW5qZWN0KFJvdXRlckxpbmtBY3RpdmUpXG4gICAgICAgIHByaXZhdGUgcmVhZG9ubHkgcm91dGVyTGlua0FjdGl2ZTogUm91dGVyTGlua0FjdGl2ZSB8IG51bGwsXG4gICAgICAgIEBJbmplY3QoVFVJX01PREUpIHJlYWRvbmx5IG1vZGUkOiBPYnNlcnZhYmxlPFR1aUJyaWdodG5lc3MgfCBudWxsPixcbiAgICAgICAgQEluamVjdChUVUlfVEFCX0VWRU5UKSByZWFkb25seSBldmVudCQ6IE9ic2VydmFibGU8RXZlbnQ+LFxuICAgICAgICBASW5qZWN0KFRVSV9NT0JJTEVfQVdBUkUpIG1vYmlsZUF3YXJlOiBib29sZWFuLFxuICAgICAgICBASW5qZWN0KFRVSV9JU19JT1MpIGlzSW9zOiBib29sZWFuLFxuICAgICAgICBASW5qZWN0KFRVSV9JU19BTkRST0lEKSBpc0FuZHJvaWQ6IGJvb2xlYW4sXG4gICAgICAgIEBJbmplY3QoVHVpRm9jdXNWaXNpYmxlU2VydmljZSkgZm9jdXNWaXNpYmxlJDogVHVpRm9jdXNWaXNpYmxlU2VydmljZSxcbiAgICApIHtcbiAgICAgICAgdGhpcy5pc0lvcyA9IG1vYmlsZUF3YXJlICYmIGlzSW9zO1xuICAgICAgICB0aGlzLmlzQW5kcm9pZCA9IG1vYmlsZUF3YXJlICYmIGlzQW5kcm9pZDtcblxuICAgICAgICBmb2N1c1Zpc2libGUkLnN1YnNjcmliZSh2aXNpYmxlID0+IHtcbiAgICAgICAgICAgIHRoaXMuZm9jdXNWaXNpYmxlID0gdmlzaWJsZTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5fYWN0aXZlJylcbiAgICBnZXQgaXNBY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiAhIXRoaXMucm91dGVyTGlua0FjdGl2ZSAmJiB0aGlzLnJvdXRlckxpbmtBY3RpdmUuaXNBY3RpdmU7XG4gICAgfVxufVxuIl19