@taiga-ui/kit
Version:
Taiga UI Angular main components kit
76 lines • 12.6 kB
JavaScript
import { DOCUMENT } from '@angular/common';
import { Directive, EventEmitter, inject, Output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiClamp, tuiRound } from '@taiga-ui/cdk/utils/math';
import { TUI_FLOATING_PRECISION } from '@taiga-ui/kit/components/slider';
import { map, repeat, startWith, switchMap, takeUntil, tap } from 'rxjs';
import { TuiRange } from './range.component';
import * as i0 from "@angular/core";
class TuiRangeChange {
constructor() {
this.doc = inject(DOCUMENT);
this.el = tuiInjectElement();
this.range = inject(TuiRange);
this.activeThumbChange = new EventEmitter();
let activeThumb;
tuiTypedFromEvent(this.el, 'pointerdown', {
passive: true,
capture: true,
})
.pipe(tap(({ clientX, target, pointerId }) => {
activeThumb = this.detectActiveThumb(clientX, target);
this.range.slidersRefs
.get(activeThumb === 'left' ? 0 : 1)
?.nativeElement.setPointerCapture(pointerId);
this.activeThumbChange.emit(activeThumb);
if (this.range.focusable) {
this.el.focus();
}
}), switchMap((event) => tuiTypedFromEvent(this.doc, 'pointermove').pipe(startWith(event))), map(({ clientX }) => this.getFractionFromEvents(clientX ?? 0)), takeUntil(tuiTypedFromEvent(this.doc, 'pointerup', { passive: true })), repeat(), takeUntilDestroyed())
.subscribe((fraction) => {
const value = this.range.toValue(fraction);
this.range.processValue(value, activeThumb === 'right');
});
}
getFractionFromEvents(clickClientX) {
const hostRect = this.el.getBoundingClientRect();
const value = clickClientX - hostRect.left;
const total = hostRect.width;
return tuiClamp(tuiRound(value / total, TUI_FLOATING_PRECISION), 0, 1);
}
detectActiveThumb(clientX, target) {
const [leftSliderRef, rightSliderRef] = this.range.slidersRefs;
switch (target) {
case leftSliderRef?.nativeElement:
return 'left';
case rightSliderRef?.nativeElement:
return 'right';
default:
return this.findNearestActiveThumb(clientX);
}
}
findNearestActiveThumb(clientX) {
const fraction = this.getFractionFromEvents(clientX);
const deltaLeft = fraction * 100 - this.range.left();
const deltaRight = fraction * 100 - 100 + this.range.right();
return Math.abs(deltaLeft) > Math.abs(deltaRight) ||
deltaRight > 0 ||
(this.range.left() === 0 && this.range.right() === 100)
? 'right'
: 'left';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiRangeChange, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiRangeChange, isStandalone: true, outputs: { activeThumbChange: "activeThumbChange" }, ngImport: i0 }); }
}
export { TuiRangeChange };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiRangeChange, decorators: [{
type: Directive,
args: [{
standalone: true,
}]
}], ctorParameters: function () { return []; }, propDecorators: { activeThumbChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFuZ2UtY2hhbmdlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3JhbmdlL3JhbmdlLWNoYW5nZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3pDLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdEUsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDOUQsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLFFBQVEsRUFBRSxRQUFRLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUM1RCxPQUFPLEVBQUMsc0JBQXNCLEVBQUMsTUFBTSxpQ0FBaUMsQ0FBQztBQUN2RSxPQUFPLEVBQUMsR0FBRyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFdkUsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLG1CQUFtQixDQUFDOztBQUUzQyxNQUdhLGNBQWM7SUFRdkI7UUFQaUIsUUFBRyxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN2QixPQUFFLEdBQUcsZ0JBQWdCLEVBQUUsQ0FBQztRQUN4QixVQUFLLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRzFCLHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUFvQixDQUFDO1FBR3JFLElBQUksV0FBNkIsQ0FBQztRQUVsQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLGFBQWEsRUFBRTtZ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QUFVLEdBQUcsUUFBUSxHQUFHLEdBQUcsR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUU3RCxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxVQUFVLENBQUM7WUFDN0MsVUFBVSxHQUFHLENBQUM7WUFDZCxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxFQUFFLEtBQUssR0FBRyxDQUFDO1lBQ3ZELENBQUMsQ0FBQyxPQUFPO1lBQ1QsQ0FBQyxDQUFDLE1BQU0sQ0FBQztJQUNqQixDQUFDOytHQTVFUSxjQUFjO21HQUFkLGNBQWM7O1NBQWQsY0FBYzs0RkFBZCxjQUFjO2tCQUgxQixTQUFTO21CQUFDO29CQUNQLFVBQVUsRUFBRSxJQUFJO2lCQUNuQjswRUFPbUIsaUJBQWlCO3NCQURoQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtET0NVTUVOVH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7RGlyZWN0aXZlLCBFdmVudEVtaXR0ZXIsIGluamVjdCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dGFrZVVudGlsRGVzdHJveWVkfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge3R1aVR5cGVkRnJvbUV2ZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL29ic2VydmFibGVzJztcbmltcG9ydCB7dHVpSW5qZWN0RWxlbWVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9kb20nO1xuaW1wb3J0IHt0dWlDbGFtcCwgdHVpUm91bmR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWF0aCc7XG5pbXBvcnQge1RVSV9GTE9BVElOR19QUkVDSVNJT059IGZyb20gJ0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9zbGlkZXInO1xuaW1wb3J0IHttYXAsIHJlcGVhdCwgc3RhcnRXaXRoLCBzd2l0Y2hNYXAsIHRha2VVbnRpbCwgdGFwfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtUdWlSYW5nZX0gZnJvbSAnLi9yYW5nZS5jb21wb25lbnQnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlSYW5nZUNoYW5nZSB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBkb2MgPSBpbmplY3QoRE9DVU1FTlQpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50KCk7XG4gICAgcHJpdmF0ZSByZWFkb25seSByYW5nZSA9IGluamVjdChUdWlSYW5nZSk7XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgcmVhZG9ubHkgYWN0aXZlVGh1bWJDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPCdsZWZ0JyB8ICdyaWdodCc+KCk7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgbGV0IGFjdGl2ZVRodW1iOiAnbGVmdCcgfCAncmlnaHQnO1xuXG4gICAgICAgIHR1aVR5cGVkRnJvbUV2ZW50KHRoaXMuZWwsICdwb2ludGVyZG93bicsIHtcbiAgICAgICAgICAgIHBhc3NpdmU6IHRydWUsXG4gICAgICAgICAgICBjYXB0dXJlOiB0cnVlLFxuICAgICAgICB9KVxuICAgICAgICAgICAgLnBpcGUoXG4gICAgICAgICAgICAgICAgdGFwKCh7Y2xpZW50WCwgdGFyZ2V0LCBwb2ludGVySWR9KSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIGFjdGl2ZVRodW1iID0gdGhpcy5kZXRlY3RBY3RpdmVUaHVtYihjbGllbnRYLCB0YXJnZXQpO1xuICAgICAgICAgICAgICAgICAgICB0aGlzLnJhbmdlLnNsaWRlcnNSZWZzXG4gICAgICAgICAgICAgICAgICAgICAgICAuZ2V0KGFjdGl2ZVRodW1iID09PSAnbGVmdCcgPyAwIDogMSlcbiAgICAgICAgICAgICAgICAgICAgICAgID8ubmF0aXZlRWxlbWVudC5zZXRQb2ludGVyQ2FwdHVyZShwb2ludGVySWQpO1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmFjdGl2ZVRodW1iQ2hhbmdlLmVtaXQoYWN0aXZlVGh1bWIpO1xuXG4gICAgICAgICAgICAgICAgICAgIGlmICh0aGlzLnJhbmdlLmZvY3VzYWJsZSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5lbC5mb2N1cygpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfSksXG4gICAgICAgICAgICAgICAgc3dpdGNoTWFwKChldmVudCkgPT5cbiAgICAgICAgICAgICAgICAgICAgdHVpVHlwZWRGcm9tRXZlbnQodGhpcy5kb2MsICdwb2ludGVybW92ZScpLnBpcGUoc3RhcnRXaXRoKGV2ZW50KSksXG4gICAgICAgICAgICAgICAgKSxcbiAgICAgICAgICAgICAgICBtYXAoKHtjbGllbnRYfSkgPT4gdGhpcy5nZXRGcmFjdGlvbkZyb21FdmVudHMoY2xpZW50WCA/PyAwKSksXG4gICAgICAgICAgICAgICAgdGFrZVVudGlsKHR1aVR5cGVkRnJvbUV2ZW50KHRoaXMuZG9jLCAncG9pbnRlcnVwJywge3Bhc3NpdmU6IHRydWV9KSksXG4gICAgICAgICAgICAgICAgcmVwZWF0KCksXG4gICAgICAgICAgICAgICAgdGFrZVVudGlsRGVzdHJveWVkKCksXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuc3Vic2NyaWJlKChmcmFjdGlvbikgPT4ge1xuICAgICAgICAgICAgICAgIGNvbnN0IHZhbHVlID0gdGhpcy5yYW5nZS50b1ZhbHVlKGZyYWN0aW9uKTtcblxuICAgICAgICAgICAgICAgIHRoaXMucmFuZ2UucHJvY2Vzc1ZhbHVlKHZhbHVlLCBhY3RpdmVUaHVtYiA9PT0gJ3JpZ2h0Jyk7XG4gICAgICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGdldEZyYWN0aW9uRnJvbUV2ZW50cyhjbGlja0NsaWVudFg6IG51bWJlcik6IG51bWJlciB7XG4gICAgICAgIGNvbnN0IGhvc3RSZWN0ID0gdGhpcy5lbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICAgICAgY29uc3QgdmFsdWUgPSBjbGlja0NsaWVudFggLSBob3N0UmVjdC5sZWZ0O1xuICAgICAgICBjb25zdCB0b3RhbCA9IGhvc3RSZWN0LndpZHRoO1xuXG4gICAgICAgIHJldHVybiB0dWlDbGFtcCh0dWlSb3VuZCh2YWx1ZSAvIHRvdGFsLCBUVUlfRkxPQVRJTkdfUFJFQ0lTSU9OKSwgMCwgMSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBkZXRlY3RBY3RpdmVUaHVtYihcbiAgICAgICAgY2xpZW50WDogbnVtYmVyLFxuICAgICAgICB0YXJnZXQ6IEV2ZW50VGFyZ2V0IHwgbnVsbCxcbiAgICApOiAnbGVmdCcgfCAncmlnaHQnIHtcbiAgICAgICAgY29uc3QgW2xlZnRTbGlkZXJSZWYsIHJpZ2h0U2xpZGVyUmVmXSA9IHRoaXMucmFuZ2Uuc2xpZGVyc1JlZnM7XG5cbiAgICAgICAgc3dpdGNoICh0YXJnZXQpIHtcbiAgICAgICAgICAgIGNhc2UgbGVmdFNsaWRlclJlZj8ubmF0aXZlRWxlbWVudDpcbiAgICAgICAgICAgICAgICByZXR1cm4gJ2xlZnQnO1xuICAgICAgICAgICAgY2FzZSByaWdodFNsaWRlclJlZj8ubmF0aXZlRWxlbWVudDpcbiAgICAgICAgICAgICAgICByZXR1cm4gJ3JpZ2h0JztcbiAgICAgICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICAgICAgcmV0dXJuIHRoaXMuZmluZE5lYXJlc3RBY3RpdmVUaHVtYihjbGllbnRYKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHByaXZhdGUgZmluZE5lYXJlc3RBY3RpdmVUaHVtYihjbGllbnRYOiBudW1iZXIpOiAnbGVmdCcgfCAncmlnaHQnIHtcbiAgICAgICAgY29uc3QgZnJhY3Rpb24gPSB0aGlzLmdldEZyYWN0aW9uRnJvbUV2ZW50cyhjbGllbnRYKTtcbiAgICAgICAgY29uc3QgZGVsdGFMZWZ0ID0gZnJhY3Rpb24gKiAxMDAgLSB0aGlzLnJhbmdlLmxlZnQoKTtcbiAgICAgICAgY29uc3QgZGVsdGFSaWdodCA9IGZyYWN0aW9uICogMTAwIC0gMTAwICsgdGhpcy5yYW5nZS5yaWdodCgpO1xuXG4gICAgICAgIHJldHVybiBNYXRoLmFicyhkZWx0YUxlZnQpID4gTWF0aC5hYnMoZGVsdGFSaWdodCkgfHxcbiAgICAgICAgICAgIGRlbHRhUmlnaHQgPiAwIHx8XG4gICAgICAgICAgICAodGhpcy5yYW5nZS5sZWZ0KCkgPT09IDAgJiYgdGhpcy5yYW5nZS5yaWdodCgpID09PSAxMDApXG4gICAgICAgICAgICA/ICdyaWdodCdcbiAgICAgICAgICAgIDogJ2xlZnQnO1xuICAgIH1cbn1cbiJdfQ==