@taiga-ui/kit
Version:
Taiga UI Angular main components kit
94 lines • 13.1 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';
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;
}());
export { TuiUnderlineComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidW5kZXJsaW5lLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy90YWJzLyIsInNvdXJjZXMiOlsidW5kZXJsaW5lL3VuZGVybGluZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNwRCxPQUFPLEVBQUMsRUFBRSxFQUFFLGNBQWMsRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFLFdBQVcsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMxRixPQUFPLEVBQUMsYUFBYSxFQUFFLFFBQVEsRUFBZ0IsTUFBTSxnQkFBZ0IsQ0FBQztBQUN0RSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUN0RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDckQsT0FBTyxFQUFDLFVBQVUsRUFBRSxFQUFFLEVBQUUsYUFBYSxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBQ25ELE9BQU8sRUFBQyxZQUFZLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFZMUU7SUE4Q0ksK0JBQ3dCLEVBQTJCLEVBQ2QsTUFBYyxFQUNMLGVBQW1DLEVBQ2xDLFdBQW9CLEVBQzFCLEdBQVksRUFDUixPQUFnQixFQUM5QixLQUF1QztRQVB0RSxpQkFZQztZQVh3QixnQ0FBYTtRQUNELFdBQU0sR0FBTixNQUFNLENBQVE7UUFDTCxvQkFBZSxHQUFmLGVBQWUsQ0FBb0I7UUFDbEMsZ0JBQVcsR0FBWCxXQUFXLENBQVM7UUFDMUIsUUFBRyxHQUFI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WUFDekIsUUFBUSxFQUFFLEVBQUU7WUFFWixlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtZQUMvQyxTQUFTLEVBQUUsQ0FBQyxhQUFhLENBQUM7WUFDMUIsSUFBSSxFQUFFO2dCQUNGLG9CQUFvQixFQUFFLE9BQU87YUFDaEM7O1NBQ0osQ0FBQztRQWdETyxXQUFBLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQTtRQUNsQixXQUFBLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUNkLFdBQUEsTUFBTSxDQUFDLGVBQWUsQ0FBQyxDQUFBO1FBQ3ZCLFdBQUEsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUE7UUFDeEIsV0FBQSxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUE7UUFDbEIsV0FBQSxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUE7UUFDdEIsV0FBQSxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUE7T0FyRFoscUJBQXFCLENBMkRqQztJQUFELDRCQUFDO0NBQUEsQUEzREQsSUEyREM7U0EzRFkscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgRWxlbWVudFJlZixcbiAgICBIb3N0QmluZGluZyxcbiAgICBIb3N0TGlzdGVuZXIsXG4gICAgSW5qZWN0LFxuICAgIElucHV0LFxuICAgIE5nWm9uZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0FOSU1BVElPTl9GUkFNRX0gZnJvbSAnQG5nLXdlYi1hcGlzL2NvbW1vbic7XG5pbXBvcnQge3B4LCBUVUlfSVNfQU5EUk9JRCwgVFVJX0lTX0lPUywgdHVpRGVmYXVsdFByb3AsIHR1aVpvbmVmcmVlfSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcbmltcG9ydCB7TU9ERV9QUk9WSURFUiwgVFVJX01PREUsIFR1aUJyaWdodG5lc3N9IGZyb20gJ0B0YWlnYS11aS9jb3JlJztcbmltcG9ydCB7VFVJX01PQklMRV9BV0FSRX0gZnJvbSAnQHRhaWdhLXVpL2tpdC90b2tlbnMnO1xuaW1wb3J0IHthc0NhbGxhYmxlfSBmcm9tICdAdGlua29mZi9uZy1ldmVudC1wbHVnaW5zJztcbmltcG9ydCB7T2JzZXJ2YWJsZSwgb2YsIFJlcGxheVN1YmplY3R9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtkZWJvdW5jZVRpbWUsIG1hcCwgbWFwVG8sIHNoYXJlLCBzd2l0Y2hNYXB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0dWktdW5kZXJsaW5lJyxcbiAgICB0ZW1wbGF0ZTogJycsXG4gICAgc3R5bGVVcmxzOiBbJy4vdW5kZXJsaW5lLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtNT0RFX1BST1ZJREVSXSxcbiAgICBob3N0OiB7XG4gICAgICAgICcoJC5kYXRhLW1vZGUuYXR0ciknOiAnbW9kZSQnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVVuZGVybGluZUNvbXBvbmVudCB7XG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIHNldCBlbGVtZW50KGVsZW1lbnQ6IEhUTUxFbGVtZW50IHwgbnVsbCkge1xuICAgICAgICB0aGlzLmVsZW1lbnQkLm5leHQoZWxlbWVudCk7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5faW9zJylcbiAgICByZWFkb25seSBpc0lvcyA9IHRoaXMubW9iaWxlQXdhcmUgJiYgdGhpcy5pb3M7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLl9hbmRyb2lkJylcbiAgICByZWFkb25seSBpc0FuZHJvaWQgPSB0aGlzLm1vYmlsZUF3YXJlICYmIHRoaXMuYW5kcm9pZDtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudCQgPSBuZXcgUmVwbGF5U3ViamVjdDxIVE1MRWxlbWVudCB8IG51bGw+KDEpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSByZWZyZXNoJCA9IHRoaXMuZWxlbWVudCQucGlwZShcbiAgICAgICAgc3dpdGNoTWFwKGVsZW1lbnQgPT5cbiAgICAgICAgICAgIGVsZW1lbnRcbiAgICAgICAgICAgICAgICA/IHRoaXMuYW5pbWF0aW9uRnJhbWUkLnBpcGUobWFwVG8oZWxlbWVudCksIHR1aVpvbmVmcmVlKHRoaXMubmdab25lKSlcbiAgICAgICAgICAgICAgICA6IG9mKG51bGwpLFxuICAgICAgICApLFxuICAgICAgICBzaGFyZSgpLFxuICAgICk7XG5cbiAgICBASG9zdExpc3RlbmVyKCckLnN0eWxlLnRyYW5zaXRpb25Qcm9wZXJ0eScpXG4gICAgcmVhZG9ubHkgdHJhbnNpdGlvbiQgPSBhc0NhbGxhYmxlKFxuICAgICAgICB0aGlzLmVsZW1lbnQkLnBpcGUoXG4gICAgICAgICAgICBtYXAoZWxlbWVudCA9PiBlbGVtZW50ICYmICdhbGwnKSxcbiAgICAgICAgICAgIGRlYm91bmNlVGltZSg1MCksXG4gICAgICAgICksXG4gICAgKTtcblxuICAgIEBIb3N0TGlzdGVuZXIoJyQuc3R5bGUudHJhbnNmb3JtJylcbiAgICByZWFkb25seSB0cmFuc2Zvcm0kID0gYXNDYWxsYWJsZShcbiAgICAgICAgdGhpcy5yZWZyZXNoJC5waXBlKFxuICAgICAgICAgICAgbWFwKGVsZW1lbnQgPT5cbiAgICAgICAgICAgICAgICBlbGVtZW50ID8gYHRyYW5zbGF0ZTNkKCR7cHgoZWxlbWVudC5vZmZzZXRMZWZ0KX0sIDAsIDApYCA6IG51bGwsXG4gICAgICAgICAgICApLFxuICAgICAgICApLFxuICAgICk7XG5cbiAgICBASG9zdExpc3RlbmVyKCckLnN0eWxlLndpZHRoLnB4JylcbiAgICByZWFkb25seSB3aWR0aCQgPSBhc0NhbGxhYmxlKFxuICAgICAgICB0aGlzLnJlZnJlc2gkLnBpcGUobWFwKGVsZW1lbnQgPT4gKGVsZW1lbnQgPyBlbGVtZW50LmNsaWVudFdpZHRoIDogMCkpKSxcbiAgICApO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIEBJbmplY3QoRWxlbWVudFJlZikge25hdGl2ZUVsZW1lbnR9OiBFbGVtZW50UmVmLFxuICAgICAgICBASW5qZWN0KE5nWm9uZSkgcHJpdmF0ZSByZWFkb25seSBuZ1pvbmU6IE5nWm9uZSxcbiAgICAgICAgQEluamVjdChBTklNQVRJT05fRlJBTUUpIHByaXZhdGUgcmVhZG9ubHkgYW5pbWF0aW9uRnJhbWUkOiBPYnNlcnZhYmxlPG51bWJlcj4sXG4gICAgICAgIEBJbmplY3QoVFVJX01PQklMRV9BV0FSRSkgcHJpdmF0ZSByZWFkb25seSBtb2JpbGVBd2FyZTogYm9vbGVhbixcbiAgICAgICAgQEluamVjdChUVUlfSVNfSU9TKSBwcml2YXRlIHJlYWRvbmx5IGlvczogYm9vbGVhbixcbiAgICAgICAgQEluamVjdChUVUlfSVNfQU5EUk9JRCkgcHJpdmF0ZSByZWFkb25seSBhbmRyb2lkOiBib29sZWFuLFxuICAgICAgICBASW5qZWN0KFRVSV9NT0RFKSByZWFkb25seSBtb2RlJDogT2JzZXJ2YWJsZTxUdWlCcmlnaHRuZXNzIHwgbnVsbD4sXG4gICAgKSB7XG4gICAgICAgIG5hdGl2ZUVsZW1lbnRbJyQuc3R5bGUudHJhbnNpdGlvblByb3BlcnR5J10gPSB0aGlzLnRyYW5zaXRpb24kO1xuICAgICAgICBuYXRpdmVFbGVtZW50WyckLnN0eWxlLnRyYW5zZm9ybSddID0gdGhpcy50cmFuc2Zvcm0kO1xuICAgICAgICBuYXRpdmVFbGVtZW50WyckLnN0eWxlLndpZHRoLnB4J10gPSB0aGlzLndpZHRoJDtcbiAgICB9XG59XG4iXX0=