@taiga-ui/kit
Version:
Taiga UI Angular main components kit
83 lines • 12.4 kB
JavaScript
import { __decorate, __param } from "tslib";
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, Inject, Input, NgZone, } from '@angular/core';
import { ANIMATION_FRAME } from '@ng-web-apis/common';
import { px, TUI_IS_ANDROID, TUI_IS_IOS, tuiDefaultProp, tuiZonefree } from '@taiga-ui/cdk';
import { MODE_PROVIDER, TUI_MODE } from '@taiga-ui/core';
import { TUI_MOBILE_AWARE } from '@taiga-ui/kit/tokens';
import { asCallable } from '@tinkoff/ng-event-plugins';
import { Observable, of, ReplaySubject } from 'rxjs';
import { debounceTime, map, mapTo, share, switchMap } from 'rxjs/operators';
let TuiUnderlineComponent = class TuiUnderlineComponent {
constructor({ nativeElement }, ngZone, animationFrame$, mobileAware, ios, android, mode$) {
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(element => element
? this.animationFrame$.pipe(mapTo(element), tuiZonefree(this.ngZone))
: of(null)), share());
this.transition$ = asCallable(this.element$.pipe(map(element => element && 'all'), debounceTime(50)));
this.transform$ = asCallable(this.refresh$.pipe(map(element => element ? `translate3d(${px(element.offsetLeft)}, 0, 0)` : null)));
this.width$ = asCallable(this.refresh$.pipe(map(element => (element ? element.clientWidth : 0))));
nativeElement['$.style.transitionProperty'] = this.transition$;
nativeElement['$.style.transform'] = this.transform$;
nativeElement['$.style.width.px'] = this.width$;
}
set element(element) {
this.element$.next(element);
}
};
TuiUnderlineComponent.ctorParameters = () => [
{ 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);
export { TuiUnderlineComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidW5kZXJsaW5lLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy90YWJzLyIsInNvdXJjZXMiOlsidW5kZXJsaW5lL3VuZGVybGluZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNwRCxPQUFPLEVBQUMsRUFBRSxFQUFFLGNBQWMsRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFLFdBQVcsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMxRixPQUFPLEVBQUMsYUFBYSxFQUFFLFFBQVEsRUFBZ0IsTUFBTSxnQkFBZ0IsQ0FBQztBQUN0RSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUN0RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDckQsT0FBTyxFQUFDLFVBQVUsRUFBRSxFQUFFLEVBQUUsYUFBYSxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBQ25ELE9BQU8sRUFBQyxZQUFZLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFZMUUsSUFBYSxxQkFBcUIsR0FBbEMsTUFBYSxxQkFBcUI7SUE4QzlCLFlBQ3dCLEVBQUMsYUFBYSxFQUFhLEVBQ2QsTUFBYyxFQUNMLGVBQW1DLEVBQ2xDLFdBQW9CLEVBQzFCLEdBQVksRUFDUixPQUFnQixFQUM5QixLQUF1QztRQUxqQyxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQ0wsb0JBQWUsR0FBZixlQUFlLENBQW9CO1FBQ2xDLGdCQUFXLEdBQVgsV0FBVyxDQUFT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dUIsQ0FBQyxNQUFNO1FBQy9DLFNBQVMsRUFBRSxDQUFDLGFBQWEsQ0FBQztRQUMxQixJQUFJLEVBQUU7WUFDRixvQkFBb0IsRUFBRSxPQUFPO1NBQ2hDOztLQUNKLENBQUM7SUFnRE8sV0FBQSxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUE7SUFDbEIsV0FBQSxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUE7SUFDZCxXQUFBLE1BQU0sQ0FBQyxlQUFlLENBQUMsQ0FBQTtJQUN2QixXQUFBLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFBO0lBQ3hCLFdBQUEsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBQ2xCLFdBQUEsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFBO0lBQ3RCLFdBQUEsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFBO0dBckRaLHFCQUFxQixDQTJEakM7U0EzRFkscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgRWxlbWVudFJlZixcbiAgICBIb3N0QmluZGluZyxcbiAgICBIb3N0TGlzdGVuZXIsXG4gICAgSW5qZWN0LFxuICAgIElucHV0LFxuICAgIE5nWm9uZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0FOSU1BVElPTl9GUkFNRX0gZnJvbSAnQG5nLXdlYi1hcGlzL2NvbW1vbic7XG5pbXBvcnQge3B4LCBUVUlfSVNfQU5EUk9JRCwgVFVJX0lTX0lPUywgdHVpRGVmYXVsdFByb3AsIHR1aVpvbmVmcmVlfSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcbmltcG9ydCB7TU9ERV9QUk9WSURFUiwgVFVJX01PREUsIFR1aUJyaWdodG5lc3N9IGZyb20gJ0B0YWlnYS11aS9jb3JlJztcbmltcG9ydCB7VFVJX01PQklMRV9BV0FSRX0gZnJvbSAnQHRhaWdhLXVpL2tpdC90b2tlbnMnO1xuaW1wb3J0IHthc0NhbGxhYmxlfSBmcm9tICdAdGlua29mZi9uZy1ldmVudC1wbHVnaW5zJztcbmltcG9ydCB7T2JzZXJ2YWJsZSwgb2YsIFJlcGxheVN1YmplY3R9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtkZWJvdW5jZVRpbWUsIG1hcCwgbWFwVG8sIHNoYXJlLCBzd2l0Y2hNYXB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0dWktdW5kZXJsaW5lJyxcbiAgICB0ZW1wbGF0ZTogJycsXG4gICAgc3R5bGVVcmxzOiBbJy4vdW5kZXJsaW5lLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtNT0RFX1BST1ZJREVSXSxcbiAgICBob3N0OiB7XG4gICAgICAgICcoJC5kYXRhLW1vZGUuYXR0ciknOiAnbW9kZSQnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVVuZGVybGluZUNvbXBvbmVudCB7XG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIHNldCBlbGVtZW50KGVsZW1lbnQ6IEhUTUxFbGVtZW50IHwgbnVsbCkge1xuICAgICAgICB0aGlzLmVsZW1lbnQkLm5leHQoZWxlbWVudCk7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5faW9zJylcbiAgICByZWFkb25seSBpc0lvcyA9IHRoaXMubW9iaWxlQXdhcmUgJiYgdGhpcy5pb3M7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLl9hbmRyb2lkJylcbiAgICByZWFkb25seSBpc0FuZHJvaWQgPSB0aGlzLm1vYmlsZUF3YXJlICYmIHRoaXMuYW5kcm9pZDtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudCQgPSBuZXcgUmVwbGF5U3ViamVjdDxIVE1MRWxlbWVudCB8IG51bGw+KDEpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSByZWZyZXNoJCA9IHRoaXMuZWxlbWVudCQucGlwZShcbiAgICAgICAgc3dpdGNoTWFwKGVsZW1lbnQgPT5cbiAgICAgICAgICAgIGVsZW1lbnRcbiAgICAgICAgICAgICAgICA/IHRoaXMuYW5pbWF0aW9uRnJhbWUkLnBpcGUobWFwVG8oZWxlbWVudCksIHR1aVpvbmVmcmVlKHRoaXMubmdab25lKSlcbiAgICAgICAgICAgICAgICA6IG9mKG51bGwpLFxuICAgICAgICApLFxuICAgICAgICBzaGFyZSgpLFxuICAgICk7XG5cbiAgICBASG9zdExpc3RlbmVyKCckLnN0eWxlLnRyYW5zaXRpb25Qcm9wZXJ0eScpXG4gICAgcmVhZG9ubHkgdHJhbnNpdGlvbiQgPSBhc0NhbGxhYmxlKFxuICAgICAgICB0aGlzLmVsZW1lbnQkLnBpcGUoXG4gICAgICAgICAgICBtYXAoZWxlbWVudCA9PiBlbGVtZW50ICYmICdhbGwnKSxcbiAgICAgICAgICAgIGRlYm91bmNlVGltZSg1MCksXG4gICAgICAgICksXG4gICAgKTtcblxuICAgIEBIb3N0TGlzdGVuZXIoJyQuc3R5bGUudHJhbnNmb3JtJylcbiAgICByZWFkb25seSB0cmFuc2Zvcm0kID0gYXNDYWxsYWJsZShcbiAgICAgICAgdGhpcy5yZWZyZXNoJC5waXBlKFxuICAgICAgICAgICAgbWFwKGVsZW1lbnQgPT5cbiAgICAgICAgICAgICAgICBlbGVtZW50ID8gYHRyYW5zbGF0ZTNkKCR7cHgoZWxlbWVudC5vZmZzZXRMZWZ0KX0sIDAsIDApYCA6IG51bGwsXG4gICAgICAgICAgICApLFxuICAgICAgICApLFxuICAgICk7XG5cbiAgICBASG9zdExpc3RlbmVyKCckLnN0eWxlLndpZHRoLnB4JylcbiAgICByZWFkb25seSB3aWR0aCQgPSBhc0NhbGxhYmxlKFxuICAgICAgICB0aGlzLnJlZnJlc2gkLnBpcGUobWFwKGVsZW1lbnQgPT4gKGVsZW1lbnQgPyBlbGVtZW50LmNsaWVudFdpZHRoIDogMCkpKSxcbiAgICApO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIEBJbmplY3QoRWxlbWVudFJlZikge25hdGl2ZUVsZW1lbnR9OiBFbGVtZW50UmVmLFxuICAgICAgICBASW5qZWN0KE5nWm9uZSkgcHJpdmF0ZSByZWFkb25seSBuZ1pvbmU6IE5nWm9uZSxcbiAgICAgICAgQEluamVjdChBTklNQVRJT05fRlJBTUUpIHByaXZhdGUgcmVhZG9ubHkgYW5pbWF0aW9uRnJhbWUkOiBPYnNlcnZhYmxlPG51bWJlcj4sXG4gICAgICAgIEBJbmplY3QoVFVJX01PQklMRV9BV0FSRSkgcHJpdmF0ZSByZWFkb25seSBtb2JpbGVBd2FyZTogYm9vbGVhbixcbiAgICAgICAgQEluamVjdChUVUlfSVNfSU9TKSBwcml2YXRlIHJlYWRvbmx5IGlvczogYm9vbGVhbixcbiAgICAgICAgQEluamVjdChUVUlfSVNfQU5EUk9JRCkgcHJpdmF0ZSByZWFkb25seSBhbmRyb2lkOiBib29sZWFuLFxuICAgICAgICBASW5qZWN0KFRVSV9NT0RFKSByZWFkb25seSBtb2RlJDogT2JzZXJ2YWJsZTxUdWlCcmlnaHRuZXNzIHwgbnVsbD4sXG4gICAgKSB7XG4gICAgICAgIG5hdGl2ZUVsZW1lbnRbJyQuc3R5bGUudHJhbnNpdGlvblByb3BlcnR5J10gPSB0aGlzLnRyYW5zaXRpb24kO1xuICAgICAgICBuYXRpdmVFbGVtZW50WyckLnN0eWxlLnRyYW5zZm9ybSddID0gdGhpcy50cmFuc2Zvcm0kO1xuICAgICAgICBuYXRpdmVFbGVtZW50WyckLnN0eWxlLndpZHRoLnB4J10gPSB0aGlzLndpZHRoJDtcbiAgICB9XG59XG4iXX0=