@taiga-ui/kit
Version:
Taiga UI Angular main components kit
67 lines • 10.4 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';
let TuiTabComponent = class TuiTabComponent {
constructor(routerLinkActive, mode$, event$, mobileAware, isIos, isAndroid, focusVisible$) {
this.routerLinkActive = routerLinkActive;
this.mode$ = mode$;
this.event$ = event$;
this.focusVisible = false;
this.isIos = mobileAware && isIos;
this.isAndroid = mobileAware && isAndroid;
focusVisible$.subscribe(visible => {
this.focusVisible = visible;
});
}
get isActive() {
return !!this.routerLinkActive && this.routerLinkActive.isActive;
}
};
TuiTabComponent.ctorParameters = () => [
{ 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);
export { TuiTabComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy90YWJzLyIsInNvdXJjZXMiOlsidGFiL3RhYi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFdBQVcsRUFDWCxNQUFNLEVBQ04sUUFBUSxHQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ2pELE9BQU8sRUFBQyxjQUFjLEVBQUUsVUFBVSxFQUFFLHNCQUFzQixFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2pGLE9BQU8sRUFBQyxRQUFRLEVBQWdCLE1BQU0sZ0JBQWdCLENBQUM7QUFDdkQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDdEQsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUNoQyxPQUFPLEVBQUMsYUFBYSxFQUFFLGlCQUFpQixFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFZakUsSUFBYSxlQUFlLEdBQTVCLE1BQWEsZUFBZTtJQVV4QixZQUdxQixnQkFBeUMsRUFDL0IsS0FBdUMsRUFDbEMsTUFBeUIsRUFDL0IsV0FBb0IsRUFDMUIsS0FBYyxFQUNWLFNBQWtCLEVBQ1YsYUFBcUM7UUFOcEQscUJBQWdCLEdBQWhCLGdCQUFnQixDQUF5QjtRQUMvQixVQUFLLEdBQUwsS0FBSyxDQUFrQztRQUNsQyxXQUFNLEdBQU4sTUFBTSxDQUFtQjtRQVA3RCxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQWFqQixJQUFJLENBQUMsS0FBSyxHQUFHLFdBQVcsSUFBSSxLQUFLLENBQUM7UUFDbEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxXQUFXLElBQUksU0FBUyxDQUFDO1FBRTFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUM7UUFDaEMsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBR0QsSUFBSSxRQUFRO1FBQ1IsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLGdCQUFnQixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLENBQUM7SUFDckUsQ0FBQztDQUNKLENBQUE7O1lBcEIwQyxnQkFBZ0IsdUJBRmxELFFBQVEsWUFDUixNQUFNLFNBQUMsZ0JBQWdCO1lBRVUsVUFBVSx1QkFBM0MsTUFBTSxTQUFDLFFBQVE7WUFDd0IsVUFBVSx1QkFBakQsTUFBTSxTQUFDLGFBQWE7MENBQ3BCLE1BQU0sU0FBQyxnQkFBZ0I7MENBQ3ZCLE1BQU0sU0FBQyxVQUFVOzBDQUNqQixNQUFNLFNBQUMsY0FBYztZQUN5QixzQkFBc0IsdUJBQXBFLE1BQU0sU0FBQyxzQkFBc0I7O0FBakJsQztJQURDLFdBQVcsQ0FBQyxZQUFZLENBQUM7OENBQ0Y7QUFHeEI7SUFEQyxXQUFXLENBQUMsZ0JBQWdCLENBQUM7a0RBQ0Y7QUFHNUI7SUFEQyxXQUFXLENBQUMsc0JBQXNCLENBQUM7cURBQ2Y7QUFzQnJCO0lBREMsV0FBVyxDQUFDLGVBQWUsQ0FBQzsrQ0FHNUI7QUFoQ1EsZUFBZTtJQVYzQixTQUFTLENBQUM7UUFDUCxRQUFRLEVBQUUsc0ZBQXNGO1FBQ2hHLGdJQUFrQztRQUVsQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtRQUMvQyxTQUFTLEVBQUUsaUJBQWlCO1FBQzVCLElBQUksRUFBRTtZQUNGLG9CQUFvQixFQUFFLE9BQU87U0FDaEM7O0tBQ0osQ0FBQztJQVlPLFdBQUEsUUFBUSxFQUFFLENBQUE7SUFDVixXQUFBLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFBO0lBRXhCLFdBQUEsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFBO0lBQ2hCLFdBQUEsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFBO0lBQ3JCLFdBQUEsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUE7SUFDeEIsV0FBQSxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUE7SUFDbEIsV0FBQSxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUE7SUFDdEIsV0FBQSxNQUFNLENBQUMsc0JBQXNCLENBQUMsQ0FBQTtHQW5CMUIsZUFBZSxDQWlDM0I7U0FqQ1ksZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIEluamVjdCxcbiAgICBPcHRpb25hbCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1JvdXRlckxpbmtBY3RpdmV9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQge1RVSV9JU19BTkRST0lELCBUVUlfSVNfSU9TLCBUdWlGb2N1c1Zpc2libGVTZXJ2aWNlfSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcbmltcG9ydCB7VFVJX01PREUsIFR1aUJyaWdodG5lc3N9IGZyb20gJ0B0YWlnYS11aS9jb3JlJztcbmltcG9ydCB7VFVJX01PQklMRV9BV0FSRX0gZnJvbSAnQHRhaWdhLXVpL2tpdC90b2tlbnMnO1xuaW1wb3J0IHtPYnNlcnZhYmxlfSBmcm9tICdyeGpzJztcbmltcG9ydCB7VFVJX1RBQl9FVkVOVCwgVFVJX1RBQl9QUk9WSURFUlN9IGZyb20gJy4vdGFiLnByb3ZpZGVycyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiBgYVt0dWlUYWJdOm5vdChbcm91dGVyTGlua10pLCBhW3R1aVRhYl1bcm91dGVyTGlua11bcm91dGVyTGlua0FjdGl2ZV0sIGJ1dHRvblt0dWlUYWJdYCxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGFiLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3RhYi5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBUVUlfVEFCX1BST1ZJREVSUyxcbiAgICBob3N0OiB7XG4gICAgICAgICcoJC5kYXRhLW1vZGUuYXR0ciknOiAnbW9kZSQnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVRhYkNvbXBvbmVudCB7XG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5faW9zJylcbiAgICByZWFkb25seSBpc0lvczogYm9vbGVhbjtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuX2FuZHJvaWQnKVxuICAgIHJlYWRvbmx5IGlzQW5kcm9pZDogYm9vbGVhbjtcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuX2ZvY3VzLXZpc2libGUnKVxuICAgIGZvY3VzVmlzaWJsZSA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIEBPcHRpb25hbCgpXG4gICAgICAgIEBJbmplY3QoUm91dGVyTGlua0FjdGl2ZSlcbiAgICAgICAgcHJpdmF0ZSByZWFkb25seSByb3V0ZXJMaW5rQWN0aXZlOiBSb3V0ZXJMaW5rQWN0aXZlIHwgbnVsbCxcbiAgICAgICAgQEluamVjdChUVUlfTU9ERSkgcmVhZG9ubHkgbW9kZSQ6IE9ic2VydmFibGU8VHVpQnJpZ2h0bmVzcyB8IG51bGw+LFxuICAgICAgICBASW5qZWN0KFRVSV9UQUJfRVZFTlQpIHJlYWRvbmx5IGV2ZW50JDogT2JzZXJ2YWJsZTxFdmVudD4sXG4gICAgICAgIEBJbmplY3QoVFVJX01PQklMRV9BV0FSRSkgbW9iaWxlQXdhcmU6IGJvb2xlYW4sXG4gICAgICAgIEBJbmplY3QoVFVJX0lTX0lPUykgaXNJb3M6IGJvb2xlYW4sXG4gICAgICAgIEBJbmplY3QoVFVJX0lTX0FORFJPSUQpIGlzQW5kcm9pZDogYm9vbGVhbixcbiAgICAgICAgQEluamVjdChUdWlGb2N1c1Zpc2libGVTZXJ2aWNlKSBmb2N1c1Zpc2libGUkOiBUdWlGb2N1c1Zpc2libGVTZXJ2aWNlLFxuICAgICkge1xuICAgICAgICB0aGlzLmlzSW9zID0gbW9iaWxlQXdhcmUgJiYgaXNJb3M7XG4gICAgICAgIHRoaXMuaXNBbmRyb2lkID0gbW9iaWxlQXdhcmUgJiYgaXNBbmRyb2lkO1xuXG4gICAgICAgIGZvY3VzVmlzaWJsZSQuc3Vic2NyaWJlKHZpc2libGUgPT4ge1xuICAgICAgICAgICAgdGhpcy5mb2N1c1Zpc2libGUgPSB2aXNpYmxlO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLl9hY3RpdmUnKVxuICAgIGdldCBpc0FjdGl2ZSgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuICEhdGhpcy5yb3V0ZXJMaW5rQWN0aXZlICYmIHRoaXMucm91dGVyTGlua0FjdGl2ZS5pc0FjdGl2ZTtcbiAgICB9XG59XG4iXX0=