@taiga-ui/kit 2.55.0 → 3.0.0-rc.0

package/fesm2015/taiga-ui-kit-components-slider.js

@@ -1,21 +1,22 @@
-import { __decorate, __param } from 'tslib';
-import { InjectionToken, Optional, Self, Inject, ChangeDetectorRef, ElementRef, Input, HostBinding, Component, ChangeDetectionStrategy, Output, HostListener, Directive, Pipe, ContentChild, forwardRef, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, ChangeDetectorRef, ElementRef, Component, ChangeDetectionStrategy, Optional, Self, Inject, Input, HostBinding, Directive, Output, HostListener, ContentChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { NgModel, NgControl } from '@angular/forms';
-import { watch, isEdgeOlderThan, CHROMIUM_EDGE_START_VERSION, tuiDefaultProp, AbstractTuiControl, typedFromEvent, isNativeFocused, clamp, tuiAssert, tuiCoerceBooleanProperty, TuiDestroyService, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiRepeatTimesModule, TuiFocusableModule, TuiFocusVisibleModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
-import { tuiPercentageToKeyStepValue, tuiKeyStepValueToPercentage, tuiCheckKeyStepsHaveMinMaxPercents } from '@taiga-ui/kit/utils';
+import { watch, tuiIsEdgeOlderThan, CHROMIUM_EDGE_START_VERSION, tuiDefaultProp, AbstractTuiControl, typedFromEvent, tuiIsNativeFocused, clamp, tuiAssert, tuiCoerceBooleanProperty, TuiDestroyService } from '@taiga-ui/cdk';
+import { tuiPercentageToKeyStepValue, tuiKeyStepValueToPercentage } from '@taiga-ui/kit/utils';
 import { take, map, tap, mapTo, filter, takeUntil } from 'rxjs/operators';
+import { __decorate } from 'tslib';
 import { USER_AGENT } from '@ng-web-apis/common';
+import * as i1$2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { merge, combineLatest, Observable } from 'rxjs';
-import { TuiFormatNumberPipeModule } from '@taiga-ui/core';
-import { AbstractTuiSlider } from '@taiga-ui/kit/abstract';
-import { TUI_FROM_TO_TEXTS } from '@taiga-ui/kit/tokens';
+import * as i1$1 from 'rxjs';
+import { merge, combineLatest } from 'rxjs';
 
 const TUI_SLIDER_DEFAULT_OPTIONS = {
-    size: 'm',
-    trackColor: 'var(--tui-base-03)',
+    size: `m`,
+    trackColor: `var(--tui-base-03)`,
 };
-const TUI_SLIDER_OPTIONS = new InjectionToken('Default parameters for Slider component', { factory: () => TUI_SLIDER_DEFAULT_OPTIONS });
+const TUI_SLIDER_OPTIONS = new InjectionToken(`Default parameters for Slider component`, { factory: () => TUI_SLIDER_DEFAULT_OPTIONS });
 function tuiSliderOptionsProvider(options) {
     return {
         provide: TUI_SLIDER_OPTIONS,
@@ -23,7 +24,7 @@ function tuiSliderOptionsProvider(options) {
     };
 }
 
-let TuiSliderComponent = class TuiSliderComponent {
+class TuiSliderComponent {
     constructor(control, changeDetectorRef, options, elementRef, userAgent) {
         var _a;
         this.control = control;
@@ -54,7 +55,7 @@ let TuiSliderComponent = class TuiSliderComponent {
     }
     get value() {
         const { elementRef, control } = this;
-        const noKeySteps = !elementRef.nativeElement.hasAttribute('data-key-steps');
+        const noKeySteps = !elementRef.nativeElement.hasAttribute(`data-key-steps`);
         if (noKeySteps && control instanceof NgModel) {
             /**
              * If developer uses `[(ngModel)]` and programmatically change value,
@@ -74,80 +75,91 @@ let TuiSliderComponent = class TuiSliderComponent {
         return 100 / Math.max(1, this.segments);
     }
     get isOldEdge() {
-        return isEdgeOlderThan(CHROMIUM_EDGE_START_VERSION, this.userAgent);
+        return tuiIsEdgeOlderThan(CHROMIUM_EDGE_START_VERSION, this.userAgent);
     }
-};
-TuiSliderComponent.ctorParameters = () => [
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_SLIDER_OPTIONS,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: String, decorators: [{ type: Inject, args: [USER_AGENT,] }] }
-];
+}
+TuiSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TUI_SLIDER_OPTIONS }, { token: ElementRef }, { token: USER_AGENT }], target: i0.ɵɵFactoryTarget.Component });
+TuiSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: { size: "size", segments: "segments" }, host: { listeners: { "input": "0" }, properties: { "style.--tui-slider-track-color": "options.trackColor", "attr.data-size": "this.size", "style.--tui-slider-fill-percentage.%": "this.valuePercentage", "style.--tui-slider-segment-width.%": "this.segmentWidth", "class._old-edge": "this.isOldEdge" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:block;width:100%;color:var(--tui-primary);cursor:pointer}:host:active{cursor:ew-resize}:host:disabled{opacity:var(--tui-disabled-opacity);cursor:auto}:host:not(._old-edge){-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.125rem;padding:.4375rem 0;background-color:transparent;background-clip:content-box;outline:none;border-radius:var(--tui-radius-m)}:host:not(._old-edge)::-webkit-slider-container{border-radius:inherit}:host:not(._old-edge)[data-size=m]::-webkit-slider-runnable-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-color:var(--tui-slider-track-color);background-image:linear-gradient(to right,currentColor 0px .625rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width)),linear-gradient(to right,currentColor var(--tui-slider-fill-percentage),transparent var(--tui-slider-fill-percentage));background-position-x:0,.375rem,0;background-size:calc(100% - 1rem),calc(100% - 1rem),auto}:host:not(._old-edge)[data-size=s]::-webkit-slider-runnable-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-color:var(--tui-slider-track-color);background-image:linear-gradient(to right,currentColor 0px .375rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width)),linear-gradient(to right,currentColor var(--tui-slider-fill-percentage),transparent var(--tui-slider-fill-percentage));background-position-x:0,.125rem,0;background-size:calc(100% - .5rem),calc(100% - .5rem),auto}:host:not(._old-edge)[data-size=m]::-moz-range-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-color:var(--tui-slider-track-color);background-image:linear-gradient(to right,currentColor 0px .625rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width));background-position-x:0,.375rem;background-size:calc(100% - 1rem)}:host:not(._old-edge)[data-size=s]::-moz-range-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-color:var(--tui-slider-track-color);background-image:linear-gradient(to right,currentColor 0px .375rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width));background-position-x:0,.125rem;background-size:calc(100% - .5rem)}:host:not(._old-edge)[data-size=m]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:1rem;width:1rem;margin-top:-.4375rem}:not(:disabled):host:not(._old-edge)[data-size=m]::-webkit-slider-thumb{cursor:ew-resize}:not(:disabled):host:not(._old-edge)[data-size=m]::-webkit-slider-thumb:hover{background:var(--tui-primary-hover)}:not(:disabled):host:not(._old-edge)[data-size=m]::-webkit-slider-thumb:active{background:var(--tui-primary-active)}:focus-visible:host:not(._old-edge)[data-size=m]::-webkit-slider-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size=s]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:.5rem;width:.5rem;margin-top:-.1875rem}:not(:disabled):host:not(._old-edge)[data-size=s]::-webkit-slider-thumb{cursor:ew-resize}:not(:disabled):host:not(._old-edge)[data-size=s]::-webkit-slider-thumb:hover{background:var(--tui-primary-hover)}:not(:disabled):host:not(._old-edge)[data-size=s]::-webkit-slider-thumb:active{background:var(--tui-primary-active)}:focus-visible:host:not(._old-edge)[data-size=s]::-webkit-slider-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size=m]::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:1rem;width:1rem}:not(:disabled):host:not(._old-edge)[data-size=m]::-moz-range-thumb{cursor:ew-resize}:not(:disabled):host:not(._old-edge)[data-size=m]::-moz-range-thumb:hover{background:var(--tui-primary-hover)}:not(:disabled):host:not(._old-edge)[data-size=m]::-moz-range-thumb:active{background:var(--tui-primary-active)}:focus-visible:host:not(._old-edge)[data-size=m]::-moz-range-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size=s]::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:.5rem;width:.5rem}:not(:disabled):host:not(._old-edge)[data-size=s]::-moz-range-thumb{cursor:ew-resize}:not(:disabled):host:not(._old-edge)[data-size=s]::-moz-range-thumb:hover{background:var(--tui-primary-hover)}:not(:disabled):host:not(._old-edge)[data-size=s]::-moz-range-thumb:active{background:var(--tui-primary-active)}:focus-visible:host:not(._old-edge)[data-size=s]::-moz-range-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)::-moz-range-progress{background:currentColor;border-radius:inherit 0 0 inherit}:host._old-edge::-ms-thumb{background:currentColor;border-radius:50%}:host._old-edge::-ms-fill-lower{background:currentColor}:host._old-edge::-ms-track{background:var(--tui-slider-track-color);border:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
-    Input(),
-    HostBinding('attr.data-size'),
     tuiDefaultProp()
 ], TuiSliderComponent.prototype, "size", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiSliderComponent.prototype, "segments", void 0);
-__decorate([
-    HostBinding('style.--tui-slider-fill-percentage.%')
-], TuiSliderComponent.prototype, "valuePercentage", null);
-__decorate([
-    HostBinding('style.--tui-slider-segment-width.%')
-], TuiSliderComponent.prototype, "segmentWidth", null);
-__decorate([
-    HostBinding('class._old-edge')
-], TuiSliderComponent.prototype, "isOldEdge", null);
-TuiSliderComponent = __decorate([
-    Component({
-        /**
-         * We have to call our component as `<input tuiSlider type="range" ... />`
-         * because otherwise built-in angular
-         * {@link https://github.com/angular/angular/blob/master/packages/forms/src/directives/range_value_accessor.ts#L45 RangeValueAccessor}
-         * cannot be matched by its CSS selector.
-         */
-        selector: 'input[type=range][tuiSlider]',
-        template: ``,
-        host: {
-            /**
-             * For change detection.
-             * Webkit does not have built-in method for customization of filling progress (as Firefox).
-             * We draw filling of progress by `background: linear-gradient(...)` of the track.
-             * This function triggers change detection (for {@link valuePercentage} function) when we drag thumb of the input.
-             */
-            '(input)': '0',
-            '[style.--tui-slider-track-color]': 'options.trackColor',
-        },
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{display:block;width:100%;color:var(--tui-primary);cursor:pointer}:host:active{cursor:ew-resize}:host:disabled{opacity:var(--tui-disabled-opacity);cursor:auto}:host:not(._old-edge){-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.125rem;padding:.4375rem 0;background-color:transparent;background-clip:content-box;outline:0;border-radius:var(--tui-radius-m)}:host:not(._old-edge)::-webkit-slider-container{border-radius:inherit}:host:not(._old-edge)[data-size='m']::-webkit-slider-runnable-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-color:var(--tui-slider-track-color);background-image:linear-gradient(to right,currentColor 0 .625rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width)),linear-gradient(to right,currentColor var(--tui-slider-fill-percentage),transparent var(--tui-slider-fill-percentage));background-position-x:0,.375rem,0;background-size:calc(100% - 1rem),calc(100% - 1rem),auto}:host:not(._old-edge)[data-size='s']::-webkit-slider-runnable-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-color:var(--tui-slider-track-color);background-image:linear-gradient(to right,currentColor 0 .375rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width)),linear-gradient(to right,currentColor var(--tui-slider-fill-percentage),transparent var(--tui-slider-fill-percentage));background-position-x:0,.125rem,0;background-size:calc(100% - .5rem),calc(100% - .5rem),auto}:host:not(._old-edge)[data-size='m']::-moz-range-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-color:var(--tui-slider-track-color);background-image:linear-gradient(to right,currentColor 0 .625rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width));background-position-x:0,.375rem;background-size:calc(100% - 1rem)}:host:not(._old-edge)[data-size='s']::-moz-range-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-color:var(--tui-slider-track-color);background-image:linear-gradient(to right,currentColor 0 .375rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width));background-position-x:0,.125rem;background-size:calc(100% - .5rem)}:host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:1rem;width:1rem;margin-top:-.4375rem}:not(:disabled):host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{cursor:ew-resize}:not(:disabled):host:not(._old-edge)[data-size='m']::-webkit-slider-thumb:hover{background:var(--tui-primary-hover)}:not(:disabled):host:not(._old-edge)[data-size='m']::-webkit-slider-thumb:active{background:var(--tui-primary-active)}:focus-visible:host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:.5rem;width:.5rem;margin-top:-.1875rem}:not(:disabled):host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{cursor:ew-resize}:not(:disabled):host:not(._old-edge)[data-size='s']::-webkit-slider-thumb:hover{background:var(--tui-primary-hover)}:not(:disabled):host:not(._old-edge)[data-size='s']::-webkit-slider-thumb:active{background:var(--tui-primary-active)}:focus-visible:host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='m']::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:1rem;width:1rem}:not(:disabled):host:not(._old-edge)[data-size='m']::-moz-range-thumb{cursor:ew-resize}:not(:disabled):host:not(._old-edge)[data-size='m']::-moz-range-thumb:hover{background:var(--tui-primary-hover)}:not(:disabled):host:not(._old-edge)[data-size='m']::-moz-range-thumb:active{background:var(--tui-primary-active)}:focus-visible:host:not(._old-edge)[data-size='m']::-moz-range-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='s']::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:.5rem;width:.5rem}:not(:disabled):host:not(._old-edge)[data-size='s']::-moz-range-thumb{cursor:ew-resize}:not(:disabled):host:not(._old-edge)[data-size='s']::-moz-range-thumb:hover{background:var(--tui-primary-hover)}:not(:disabled):host:not(._old-edge)[data-size='s']::-moz-range-thumb:active{background:var(--tui-primary-active)}:focus-visible:host:not(._old-edge)[data-size='s']::-moz-range-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)::-moz-range-progress{background:currentColor;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}:host._old-edge::-ms-thumb{background:currentColor;border-radius:50%}:host._old-edge::-ms-fill-lower{background:currentColor}:host._old-edge::-ms-track{background:var(--tui-slider-track-color);border:none}"]
-    }),
-    __param(0, Optional()),
-    __param(0, Self()),
-    __param(0, Inject(NgControl)),
-    __param(1, Inject(ChangeDetectorRef)),
-    __param(2, Inject(TUI_SLIDER_OPTIONS)),
-    __param(3, Inject(ElementRef)),
-    __param(4, Inject(USER_AGENT))
-], TuiSliderComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    /**
+                     * We have to call our component as `<input tuiSlider type="range" ... />`
+                     * because otherwise built-in angular
+                     * {@link https://github.com/angular/angular/blob/master/packages/forms/src/directives/range_value_accessor.ts#L45 RangeValueAccessor}
+                     * cannot be matched by its CSS selector.
+                     */
+                    selector: `input[type=range][tuiSlider]`,
+                    template: ``,
+                    styleUrls: [`./slider.style.less`],
+                    host: {
+                        /**
+                         * For change detection.
+                         * Webkit does not have built-in method for customization of filling progress (as Firefox).
+                         * We draw filling of progress by `background: linear-gradient(...)` of the track.
+                         * This function triggers change detection (for {@link valuePercentage} function) when we drag thumb of the input.
+                         */
+                        '(input)': `0`,
+                        '[style.--tui-slider-track-color]': `options.trackColor`,
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NgControl]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_SLIDER_OPTIONS]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [USER_AGENT]
+                }] }]; }, propDecorators: { size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: [`attr.data-size`]
+            }], segments: [{
+                type: Input
+            }], valuePercentage: [{
+                type: HostBinding,
+                args: [`style.--tui-slider-fill-percentage.%`]
+            }], segmentWidth: [{
+                type: HostBinding,
+                args: [`style.--tui-slider-segment-width.%`]
+            }], isOldEdge: [{
+                type: HostBinding,
+                args: [`class._old-edge`]
+            }] } });
 
 // @dynamic
-let TuiSliderKeyStepsDirective = class TuiSliderKeyStepsDirective extends AbstractTuiControl {
+class TuiSliderKeyStepsDirective extends AbstractTuiControl {
     constructor(control, changeDetectorRef, elementRef, slider) {
         super(control, changeDetectorRef);
         this.elementRef = elementRef;
         this.slider = slider;
-        this.keySteps = [];
-        this.keyStepsInput = typedFromEvent(this.elementRef.nativeElement, 'input').pipe(map(() => this.controlValue));
+        this.keyStepsInput = typedFromEvent(this.elementRef.nativeElement, `input`).pipe(map(() => this.controlValue));
     }
     get nativeFocusableElement() {
         return this.computedDisabled ? null : this.elementRef.nativeElement;
     }
     get focused() {
-        return isNativeFocused(this.nativeFocusableElement);
+        return tuiIsNativeFocused(this.nativeFocusableElement);
     }
     get min() {
         var _a;
@@ -168,7 +180,7 @@ let TuiSliderKeyStepsDirective = class TuiSliderKeyStepsDirective extends Abstra
             return;
         }
         const clampedControlValue = clamp(controlValue, this.min, this.max);
-        tuiAssert.assert(controlValue === clampedControlValue, '\n[SliderKeySteps]: You cannot programmatically set value which is less/more than min/max');
+        tuiAssert.assert(controlValue === clampedControlValue, `\n[SliderKeySteps]: You cannot programmatically set value which is less/more than min/max`);
         this.slider.value = this.transformToNativeValue(clampedControlValue);
     }
     getFallbackValue() {
@@ -179,80 +191,70 @@ let TuiSliderKeyStepsDirective = class TuiSliderKeyStepsDirective extends Abstra
         const newValuePercentage = tuiKeyStepValueToPercentage(controlValue, this.keySteps);
         return (newValuePercentage * (max - min)) / 100 + min;
     }
-};
-TuiSliderKeyStepsDirective.ctorParameters = () => [
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: TuiSliderComponent, decorators: [{ type: Inject, args: [TuiSliderComponent,] }] }
-];
-__decorate([
-    Input(),
-    tuiDefaultProp(tuiCheckKeyStepsHaveMinMaxPercents, 'Should contain min and max values')
-], TuiSliderKeyStepsDirective.prototype, "keySteps", void 0);
-__decorate([
-    Output()
-], TuiSliderKeyStepsDirective.prototype, "keyStepsInput", void 0);
-__decorate([
-    HostListener('change')
-], TuiSliderKeyStepsDirective.prototype, "updateControlValue", null);
-TuiSliderKeyStepsDirective = __decorate([
-    Directive({
-        selector: 'input[tuiSlider][keySteps]',
-        host: {
-            '[attr.data-key-steps]': 'true',
-            '[attr.aria-valuenow]': 'controlValue',
-            '[attr.aria-valuemin]': 'min',
-            '[attr.aria-valuemax]': 'max',
-        },
-    }),
-    __param(0, Optional()),
-    __param(0, Self()),
-    __param(0, Inject(NgControl)),
-    __param(1, Inject(ChangeDetectorRef)),
-    __param(2, Inject(ElementRef)),
-    __param(3, Inject(TuiSliderComponent))
-], TuiSliderKeyStepsDirective);
-/**
- * @deprecated DONT USE IT! It is just temporary solution for internal purposes only. We will delete it in next major release.
- * TODO delete it in v3.0
- *
- */
-let TuiSliderTickLabelPipe = class TuiSliderTickLabelPipe {
-    transform(tickIndex, totalSegments, keySteps) {
-        const percentage = (100 / totalSegments) * tickIndex;
-        return tuiPercentageToKeyStepValue(percentage, keySteps);
-    }
-};
-TuiSliderTickLabelPipe = __decorate([
-    Pipe({ name: 'tuiSliderTickLabel' })
-], TuiSliderTickLabelPipe);
+}
+TuiSliderKeyStepsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderKeyStepsDirective, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: ElementRef }, { token: TuiSliderComponent }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSliderKeyStepsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSliderKeyStepsDirective, selector: "input[tuiSlider][keySteps]", inputs: { keySteps: "keySteps" }, outputs: { keyStepsInput: "keyStepsInput" }, host: { listeners: { "change": "updateControlValue()" }, properties: { "attr.data-key-steps": "true", "attr.aria-valuenow": "controlValue", "attr.aria-valuemin": "min", "attr.aria-valuemax": "max" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderKeyStepsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `input[tuiSlider][keySteps]`,
+                    host: {
+                        '[attr.data-key-steps]': `true`,
+                        '[attr.aria-valuenow]': `controlValue`,
+                        '[attr.aria-valuemin]': `min`,
+                        '[attr.aria-valuemax]': `max`,
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NgControl]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: TuiSliderComponent, decorators: [{
+                    type: Inject,
+                    args: [TuiSliderComponent]
+                }] }]; }, propDecorators: { keySteps: [{
+                type: Input
+            }], keyStepsInput: [{
+                type: Output
+            }], updateControlValue: [{
+                type: HostListener,
+                args: [`change`]
+            }] } });
 
 const SLIDER_INTERACTION_KEYS = new Set([
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowUp',
-    'ArrowDown',
-    'Home',
-    'End',
-    'PageUp',
-    'PageDown',
+    `ArrowLeft`,
+    `ArrowRight`,
+    `ArrowUp`,
+    `ArrowDown`,
+    `Home`,
+    `End`,
+    `PageUp`,
+    `PageDown`,
 ]);
 /**
  * Native <input type='range' readonly> doesn't work.
  * This directive imitates this native behaviour.
  */
 // @dynamic
-let TuiSliderReadonlyDirective = class TuiSliderReadonlyDirective {
+class TuiSliderReadonlyDirective {
     constructor(elementRef, documentRef, destroy$) {
         this.readonly = true;
-        const touchStart$ = typedFromEvent(elementRef.nativeElement, 'touchstart', {
+        const touchStart$ = typedFromEvent(elementRef.nativeElement, `touchstart`, {
             passive: false,
         });
-        const touchMove$ = typedFromEvent(documentRef, 'touchmove', {
+        const touchMove$ = typedFromEvent(documentRef, `touchmove`, {
             passive: false,
         });
-        const touchEnd$ = typedFromEvent(documentRef, 'touchend', {
+        const touchEnd$ = typedFromEvent(documentRef, `touchend`, {
             passive: true,
         });
         const shouldPreventMove$ = merge(touchStart$.pipe(tap(e => this.preventEvent(e)), mapTo(true)), touchEnd$.pipe(mapTo(false)));
@@ -274,36 +276,41 @@ let TuiSliderReadonlyDirective = class TuiSliderReadonlyDirective {
             this.preventEvent(event);
         }
     }
-};
-TuiSliderReadonlyDirective.ctorParameters = () => [
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TuiDestroyService,] }] }
-];
+}
+TuiSliderReadonlyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderReadonlyDirective, deps: [{ token: ElementRef }, { token: DOCUMENT }, { token: TuiDestroyService }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSliderReadonlyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSliderReadonlyDirective, selector: "input[tuiSlider][readonly]", inputs: { readonly: "readonly" }, host: { listeners: { "mousedown": "preventEvent($event)", "keydown": "preventKeyboardInteraction($event)" } }, providers: [TuiDestroyService], ngImport: i0 });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiSliderReadonlyDirective.prototype, "readonly", void 0);
-__decorate([
-    HostListener('mousedown', ['$event'])
-], TuiSliderReadonlyDirective.prototype, "preventEvent", null);
-__decorate([
-    HostListener('keydown', ['$event'])
-], TuiSliderReadonlyDirective.prototype, "preventKeyboardInteraction", null);
-TuiSliderReadonlyDirective = __decorate([
-    Directive({
-        selector: 'input[tuiSlider][readonly]',
-        providers: [TuiDestroyService],
-    }),
-    __param(0, Inject(ElementRef)),
-    __param(1, Inject(DOCUMENT)),
-    __param(2, Inject(TuiDestroyService))
-], TuiSliderReadonlyDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderReadonlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `input[tuiSlider][readonly]`,
+                    providers: [TuiDestroyService],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }]; }, propDecorators: { readonly: [{
+                type: Input
+            }], preventEvent: [{
+                type: HostListener,
+                args: [`mousedown`, [`$event`]]
+            }], preventKeyboardInteraction: [{
+                type: HostListener,
+                args: [`keydown`, [`$event`]]
+            }] } });
 
-let TuiSliderThumbLabelComponent = class TuiSliderThumbLabelComponent {
+class TuiSliderThumbLabelComponent {
     get size() {
         var _a;
-        return ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.size) || 'm';
+        return ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.size) || `m`;
     }
     get ratio() {
         var _a;
@@ -316,126 +323,60 @@ let TuiSliderThumbLabelComponent = class TuiSliderThumbLabelComponent {
     ngAfterContentInit() {
         var _a;
         tuiAssert.assert(Boolean((_a = this.control) === null || _a === void 0 ? void 0 : _a.valueChanges), `\n[tuiSliderThumbLabel] expected <input tuiSlider type="range" /> to use Angular Forms.\n` +
-            'Use [(ngModel)] or [formControl] or formControlName for correct work.');
-    }
-};
-__decorate([
-    ContentChild(TuiSliderComponent)
-], TuiSliderThumbLabelComponent.prototype, "slider", void 0);
-__decorate([
-    ContentChild(NgControl)
-], TuiSliderThumbLabelComponent.prototype, "control", void 0);
-TuiSliderThumbLabelComponent = __decorate([
-    Component({
-        selector: '[tuiSliderThumbLabel]',
-        template: "<ng-container *ngIf=\"control?.valueChanges | async\"></ng-container>\n\n<div\n    class=\"t-ghost\"\n    [attr.data-size]=\"size\"\n    [style.left.px]=\"ghostLeft\"\n    [style.--tui-slider-thumb-ratio]=\"ratio\"\n>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"input[type=range]\"></ng-content>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{position:relative}.t-ghost{position:absolute;top:0;bottom:0;margin:auto;border-radius:50%;pointer-events:none}.t-ghost[data-size='s']{width:.5rem;height:.5rem;transform:translateX(calc(var(--tui-slider-thumb-ratio) * -.5rem))}.t-ghost[data-size='m']{width:1rem;height:1rem;transform:translateX(calc(var(--tui-slider-thumb-ratio) * -1rem))}"]
-    })
-], TuiSliderThumbLabelComponent);
-
-var TuiSliderOldComponent_1;
-/**
- * @deprecated use {@link TuiSliderComponent} instead
- * TODO: 3.0 remove
- */
-// @dynamic
-let TuiSliderOldComponent = TuiSliderOldComponent_1 = class TuiSliderOldComponent extends AbstractTuiSlider {
-    constructor(control, changeDetectorRef, documentRef, fromToTexts$) {
-        super(control, changeDetectorRef, documentRef, fromToTexts$);
-    }
-    get nativeFocusableElement() {
-        return this.dotRight ? this.dotRight.nativeElement : null;
-    }
-    get focused() {
-        return isNativeFocused(this.nativeFocusableElement);
-    }
-    get left() {
-        return 0;
+            `Use [(ngModel)] or [formControl] or formControlName for correct work.`);
     }
-    get right() {
-        return 100 - 100 * this.getFractionFromValue(this.value);
-    }
-    processValue(value) {
-        this.updateValue(this.valueGuard(value));
-    }
-    decrement() {
-        this.processStep(false);
-    }
-    increment() {
-        this.processStep(true);
-    }
-    getFallbackValue() {
-        return 0;
-    }
-    processStep(increment) {
-        const fraction = this.getFractionFromValue(this.value);
-        const step = this.computedStep;
-        const value = this.getValueFromFraction(increment ? fraction + step : fraction - step);
-        this.processValue(value);
-    }
-};
-TuiSliderOldComponent.ctorParameters = () => [
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_FROM_TO_TEXTS,] }] }
-];
-TuiSliderOldComponent = TuiSliderOldComponent_1 = __decorate([
-    Component({
-        selector: 'tui-slider',
-        template: "<div\n    class=\"event-catcher\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (touchstart)=\"onTouchStart($event)\"\n>\n    <div class=\"wrapper\">\n        <div\n            *ngIf=\"segmented\"\n            class=\"segments\"\n        >\n            <span\n                *tuiRepeatTimes=\"let segmentIndex of segments + 1\"\n                automation-id=\"tui-slider__segment\"\n                class=\"segment\"\n            >\n                <span\n                    *ngIf=\"fromToTexts$ | async as fromToText\"\n                    class=\"number\"\n                >\n                    {{ getSegmentPrefix(segmentIndex, fromToText) }}\n                    {{ getSegmentLabel(segmentIndex) | tuiFormatNumber }}\n                    <span *ngIf=\"pluralizeMap\">\n                        {{ getSegmentLabel(segmentIndex) | i18nPlural: pluralizeMap }}\n                    </span>\n                </span>\n            </span>\n        </div>\n        <div\n            automation-id=\"tui-slider__bar\"\n            class=\"bar\"\n            [style.left.%]=\"left\"\n            [style.right.%]=\"right\"\n        >\n            <div\n                #dotLeft\n                automation-id=\"tui-slider__left\"\n                class=\"dot\"\n                [class.dot_focus-visible]=\"focusVisibleLeft && computedFocused\"\n                [tuiFocusable]=\"isLeftFocusable\"\n                (tuiFocusVisibleChange)=\"onLeftFocusVisible($event)\"\n                (keydown.arrowLeft.prevent)=\"decrement()\"\n                (keydown.arrowDown.prevent)=\"decrement()\"\n                (keydown.arrowRight.prevent)=\"increment()\"\n                (keydown.arrowUp.prevent)=\"increment()\"\n            ></div>\n            <div\n                #dotRight\n                automation-id=\"tui-slider__right\"\n                class=\"dot\"\n                [class.dot_focus-visible]=\"focusVisibleRight && computedFocused\"\n                [tuiFocusable]=\"isRightFocusable\"\n                (tuiFocusVisibleChange)=\"onRightFocusVisible($event)\"\n                (keydown.arrowLeft.prevent)=\"decrement()\"\n                (keydown.arrowDown.prevent)=\"decrement()\"\n                (keydown.arrowRight.prevent)=\"increment()\"\n                (keydown.arrowUp.prevent)=\"increment()\"\n            ></div>\n        </div>\n    </div>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [
-            {
-                provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
-                useExisting: forwardRef(() => TuiSliderOldComponent_1),
-            },
-        ],
-        styles: [":host{display:block;border-radius:var(--tui-radius-m);color:var(--tui-base-03);min-height:.125rem;font-size:1rem}:host[data-size='s']{min-height:.125rem;font-size:.5rem}:host._segmented{padding-bottom:1.25rem}:host._disabled{cursor:default;pointer-events:none;opacity:var(--tui-disabled-opacity)}.event-catcher{min-height:inherit;border-radius:inherit;padding:.4375rem 0;cursor:pointer}.wrapper{position:relative;min-height:inherit;border-radius:inherit;background-color:currentColor;border:solid transparent;border-width:0 1em}.bar{position:absolute;top:0;bottom:0;margin:0 -1em;border-radius:inherit;background-color:var(--tui-primary)}:host-context(tui-input-slider) .bar{margin-left:calc(var(--tui-radius-m)/ 2);border-bottom-left-radius:calc(var(--tui-radius-m) * 5) calc(var(--tui-radius-m) * 1.5)}.dot{transition-property:background-color;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:absolute;top:50%;z-index:1;width:1em;height:1em;transform:translate(0,-50%);border-radius:100%;background-color:var(--tui-primary);outline:0;cursor:ew-resize}.dot:last-child{right:0;transform:translate(0,-50%)}.dot:hover{background-color:var(--tui-primary-hover)}.dot:active{background-color:var(--tui-primary-active)}.dot_focus-visible{box-shadow:inset 0 0 0 2px var(--tui-focus)}.segments{position:relative;z-index:1;display:flex;justify-content:space-between;min-height:inherit;margin:0 -1em}.segments-spacer{height:1.625rem}.segment{position:relative;height:inherit;width:.25rem;background-color:rgba(0,0,0,.36);pointer-events:none}.segment:first-of-type,.segment:last-of-type{background-color:transparent}.number{position:absolute;left:50%;transform:translate(-50%,0);top:100%;font:var(--tui-font-text-s);margin-top:.5rem;color:var(--tui-text-02);white-space:nowrap}.segment:first-of-type .number{left:-.05em;transform:none}.segment:last-of-type .number{left:auto;right:-.05em;transform:none}:host._disabled .number{color:var(--tui-text-01)}", ".dot:first-child{display:none}.wrapper{border-left:none}.bar,.segments{margin-left:0}"]
-    }),
-    __param(0, Optional()),
-    __param(0, Self()),
-    __param(0, Inject(NgControl)),
-    __param(1, Inject(ChangeDetectorRef)),
-    __param(2, Inject(DOCUMENT)),
-    __param(3, Inject(TUI_FROM_TO_TEXTS))
-], TuiSliderOldComponent);
+}
+TuiSliderThumbLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderThumbLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TuiSliderThumbLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiSliderThumbLabelComponent, selector: "[tuiSliderThumbLabel]", queries: [{ propertyName: "slider", first: true, predicate: TuiSliderComponent, descendants: true }, { propertyName: "control", first: true, predicate: NgControl, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"control?.valueChanges | async\"></ng-container>\n\n<div\n    class=\"t-ghost\"\n    [attr.data-size]=\"size\"\n    [style.left.px]=\"ghostLeft\"\n    [style.--tui-slider-thumb-ratio]=\"ratio\"\n>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"input[type=range]\"></ng-content>\n", styles: [":host{position:relative}.t-ghost{position:absolute;top:0;bottom:0;margin:auto;border-radius:50%;pointer-events:none}.t-ghost[data-size=s]{width:.5rem;height:.5rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.5rem))}.t-ghost[data-size=m]{width:1rem;height:1rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -1rem))}\n"], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1$2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderThumbLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `[tuiSliderThumbLabel]`,
+                    templateUrl: `./slider-thumb-label.template.html`,
+                    styleUrls: [`./slider-thumb-label.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { slider: [{
+                type: ContentChild,
+                args: [TuiSliderComponent]
+            }], control: [{
+                type: ContentChild,
+                args: [NgControl]
+            }] } });
 
-let TuiSliderModule = class TuiSliderModule {
-};
-TuiSliderModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            TuiRepeatTimesModule,
-            TuiFocusableModule,
-            TuiFocusVisibleModule,
-            TuiActiveZoneModule,
-            TuiFormatNumberPipeModule,
-        ],
-        declarations: [
-            TuiSliderComponent,
-            TuiSliderThumbLabelComponent,
-            TuiSliderKeyStepsDirective,
-            TuiSliderReadonlyDirective,
-            TuiSliderTickLabelPipe,
-            TuiSliderOldComponent,
-        ],
-        exports: [
-            TuiSliderComponent,
-            TuiSliderThumbLabelComponent,
-            TuiSliderKeyStepsDirective,
-            TuiSliderReadonlyDirective,
-            TuiSliderTickLabelPipe,
-            TuiSliderOldComponent,
-        ],
-    })
-], TuiSliderModule);
+class TuiSliderModule {
+}
+TuiSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderModule, declarations: [TuiSliderComponent,
+        TuiSliderThumbLabelComponent,
+        TuiSliderKeyStepsDirective,
+        TuiSliderReadonlyDirective], imports: [CommonModule], exports: [TuiSliderComponent,
+        TuiSliderThumbLabelComponent,
+        TuiSliderKeyStepsDirective,
+        TuiSliderReadonlyDirective] });
+TuiSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        TuiSliderComponent,
+                        TuiSliderThumbLabelComponent,
+                        TuiSliderKeyStepsDirective,
+                        TuiSliderReadonlyDirective,
+                    ],
+                    exports: [
+                        TuiSliderComponent,
+                        TuiSliderThumbLabelComponent,
+                        TuiSliderKeyStepsDirective,
+                        TuiSliderReadonlyDirective,
+                    ],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_SLIDER_DEFAULT_OPTIONS, TUI_SLIDER_OPTIONS, TuiSliderComponent, TuiSliderKeyStepsDirective, TuiSliderModule, TuiSliderOldComponent, TuiSliderReadonlyDirective, TuiSliderThumbLabelComponent, TuiSliderTickLabelPipe, tuiSliderOptionsProvider };
+export { TUI_SLIDER_DEFAULT_OPTIONS, TUI_SLIDER_OPTIONS, TuiSliderComponent, TuiSliderKeyStepsDirective, TuiSliderModule, TuiSliderReadonlyDirective, TuiSliderThumbLabelComponent, tuiSliderOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-slider.js.map