@taiga-ui/kit
Version:
Taiga UI Angular main components kit
123 lines (118 loc) • 7.38 kB
JavaScript
import { TuiSliderComponent, TuiSliderKeyStepsBase, TuiSliderKeySteps } from '@taiga-ui/kit/components/slider';
import * as i0 from '@angular/core';
import { inject, computed, effect, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { TuiValueTransformer, TUI_IDENTITY_VALUE_TRANSFORMER, TuiNonNullableValueTransformer } from '@taiga-ui/cdk/classes';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiClamp } from '@taiga-ui/cdk/utils/math';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiInjectAuxiliary } from '@taiga-ui/core/components/textfield';
import * as i1 from '@taiga-ui/kit/components/input-number';
import { TuiInputNumberDirective, tuiInputNumberOptionsProvider, TuiWithQuantumValueTransformer } from '@taiga-ui/kit/components/input-number';
import { fromEvent, tap, filter, switchMap } from 'rxjs';
class TuiInputSliderDirective {
constructor() {
this.isMobile = inject(TUI_IS_MOBILE);
this.el = tuiInjectElement();
this.slider = tuiInjectAuxiliary((x) => x instanceof TuiSliderComponent);
this.controlTransformer = inject(TuiValueTransformer, { self: true });
this.keyStepsTransformer = computed(() => this.slider()?.keySteps?.transformer() ?? TUI_IDENTITY_VALUE_TRANSFORMER);
this.inputNumber = inject(TuiInputNumberDirective, { self: true });
this.value = computed(() => this.controlTransformer.toControlValue(this.inputNumber.value()));
this.nothing = tuiWithStyles(TuiInputSliderStyles);
this.textfieldToSliderSync = effect(() => {
const slider = this.slider();
if (!slider) {
return;
}
if (slider.keySteps?.transformer() &&
Number.isFinite(slider.keySteps?.totalSteps)) {
// TODO(v5): move all if-condition body inside `TuiSliderKeyStepsBase`
slider.min = 0;
slider.step = 1;
slider.max = slider.keySteps?.totalSteps ?? 100;
}
else {
slider.min = this.inputNumber.min();
slider.max = this.inputNumber.max();
}
slider.value = this.keyStepsTransformer().fromControlValue(this.value());
slider.el.disabled = !this.inputNumber.interactive();
}, TUI_ALLOW_SIGNAL_WRITES);
this.sliderInitEffect = effect((onCleanup) => {
const slider = this.slider();
if (!slider) {
return;
}
slider.el.style.setProperty('--tui-slider-track-color', 'transparent');
slider.el.setAttribute('tabindex', '-1');
if (slider.keySteps) {
slider.keySteps.value = this.value;
}
const subscription = fromEvent(slider.el, 'input')
.pipe(tap(() => this.inputNumber.setValue(this.keyStepsTransformer().toControlValue(slider.el.valueAsNumber))), filter(() => !this.isMobile), switchMap(() => fromEvent(this.el.ownerDocument, 'pointerup', { once: true })))
.subscribe(() => this.el.focus());
onCleanup(() => subscription.unsubscribe());
});
}
onStep(coefficient) {
const slider = this.slider();
if (slider && this.inputNumber.interactive()) {
const newValue = tuiClamp(slider.keySteps?.takeStep(coefficient) ??
slider.value + coefficient * slider.step, this.inputNumber.min(), this.inputNumber.max());
this.inputNumber.setValue(newValue);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputSliderDirective, isStandalone: true, selector: "input[tuiInputSlider]", host: { listeners: { "blur": "inputNumber.setValue(value() ?? null)", "keydown.arrowUp": "onStep(1)", "keydown.arrowDown": "onStep(-1)" } }, providers: [
tuiInputNumberOptionsProvider({
valueTransformer: new TuiNonNullableValueTransformer(),
}),
], hostDirectives: [{ directive: i1.TuiInputNumberDirective, inputs: ["min", "min", "max", "max", "prefix", "prefix", "postfix", "postfix", "invalid", "invalid", "readOnly", "readOnly"] }, { directive: i1.TuiWithQuantumValueTransformer }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputSliderDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'input[tuiInputSlider]',
providers: [
tuiInputNumberOptionsProvider({
valueTransformer: new TuiNonNullableValueTransformer(),
}),
],
hostDirectives: [
{
directive: TuiInputNumberDirective,
inputs: ['min', 'max', 'prefix', 'postfix', 'invalid', 'readOnly'],
},
TuiWithQuantumValueTransformer,
],
host: {
'(blur)': 'inputNumber.setValue(value() ?? null)',
'(keydown.arrowUp)': 'onStep(1)',
'(keydown.arrowDown)': 'onStep(-1)',
},
}]
}] });
class TuiInputSliderStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputSliderStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputSliderStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-input-slider" }, ngImport: i0, template: '', isInline: true, styles: ["tui-textfield [tuiInputSlider]~.t-content .t-clear{display:none!important}\n", "tui-textfield [tuiInputSlider]~[tuiSlider]:disabled{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputSliderStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-input-slider',
}, styles: ["tui-textfield [tuiInputSlider]~.t-content .t-clear{display:none!important}\n", "tui-textfield [tuiInputSlider]~[tuiSlider]:disabled{display:none}\n"] }]
}] });
const TuiInputSlider = [
TuiSliderComponent,
TuiSliderKeyStepsBase,
TuiSliderKeySteps,
TuiInputSliderDirective,
];
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputSlider, TuiInputSliderDirective };
//# sourceMappingURL=taiga-ui-kit-components-input-slider.mjs.map