UNPKG

@taiga-ui/kit

Version:

Taiga UI Angular main components kit

132 lines (127 loc) 7.18 kB
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, tuiIsElement, tuiIsInput } 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 } from '@taiga-ui/kit/components/input-number'; import { fromEvent, filter } from 'rxjs'; class TuiInputSliderDirective { constructor() { this.isMobile = inject(TUI_IS_MOBILE); this.element = tuiInjectElement(); this.inputNumber = inject(TuiInputNumberDirective, { self: true }); this.slider = tuiInjectAuxiliary((x) => x instanceof TuiSliderComponent); this.controlTransformer = inject(TuiValueTransformer, { self: true }); this.value = computed(() => this.controlTransformer.toControlValue(this.inputNumber.value())); this.keyStepsTransformer = computed(() => this.slider()?.keySteps?.transformer() ?? TUI_IDENTITY_VALUE_TRANSFORMER); 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'); if (slider.keySteps) { slider.keySteps.value = this.value; } const subscription = fromEvent(slider.el, 'input', (x) => x.target) .pipe(filter(tuiIsElement), filter(tuiIsInput)) .subscribe((x) => this.onSliderInput(x.valueAsNumber)); 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); } } onBlur() { if (!this.element.value) { this.inputNumber.setValue(this.value() ?? null); } } onSliderInput(value) { this.inputNumber.setValue(this.keyStepsTransformer().toControlValue(value)); if (!this.isMobile) { this.element.focus(); } } 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": "onBlur()", "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"] }], 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'], }, ], host: { '(blur)': 'onBlur()', '(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"], 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"] }] }] }); const TuiInputSlider = [ TuiSliderComponent, TuiSliderKeyStepsBase, TuiSliderKeySteps, TuiInputSliderDirective, ]; /** * Generated bundle index. Do not edit. */ export { TuiInputSlider, TuiInputSliderDirective }; //# sourceMappingURL=taiga-ui-kit-components-input-slider.mjs.map