@taiga-ui/kit 2.39.0 → 2.41.1

package/fesm5/taiga-ui-kit-components-input-range.js

@@ -1,98 +1,125 @@
-import { __extends, __decorate, __param } from 'tslib';
-import { Optional, Self, Inject, ChangeDetectorRef, ViewChild, HostBinding, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
+import { __extends, __read, __decorate, __param } from 'tslib';
+import { Optional, Self, Inject, ChangeDetectorRef, ElementRef, ViewChildren, ViewChild, Input, HostBinding, Component, ChangeDetectionStrategy, forwardRef, Directive, NgModule } from '@angular/core';
 import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { isNativeFocused, setNativeFocused, TUI_IS_MOBILE, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableModule, TuiFocusedModule, TuiHoveredModule, TuiPressedModule, TuiMapperPipeModule, TuiInputModeModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
-import { maskedMoneyValueIsEmpty, maskedNumberStringToNumber, formatNumber, TuiModeDirective, TUI_NUMBER_FORMAT, TUI_TEXTFIELD_APPEARANCE, TuiWrapperModule } from '@taiga-ui/core';
-import { AbstractTuiInputSlider } from '@taiga-ui/kit/abstract';
+import { EMPTY_QUERY, isNativeFocusedIn, isNativeFocused, round, clamp, TUI_IS_MOBILE, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiActiveZoneModule, TuiPressedModule } from '@taiga-ui/cdk';
+import { getFractionPartPadded, TUI_TEXTFIELD_APPEARANCE, TuiTextfieldController, TUI_TEXTFIELD_WATCHED_CONTROLLER, TEXTFIELD_CONTROLLER_PROVIDER, TuiTextfieldControllerModule, TuiWrapperModule } from '@taiga-ui/core';
+import { quantumAssertion, AbstractTuiInputSlider } from '@taiga-ui/kit/abstract';
+import { TuiInputNumberComponent, TuiInputNumberModule } from '@taiga-ui/kit/components/input-number';
+import { TuiNewRangeDirective, TuiRangeComponent, TuiRangeModule } from '@taiga-ui/kit/components/range';
+import { TUI_FLOATING_PRECISION } from '@taiga-ui/kit/constants';
 import { CommonModule } from '@angular/common';
-import { TuiRangeModule } from '@taiga-ui/kit/components/range';
-import { TextMaskModule } from 'angular2-text-mask';
+import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
 
 // @dynamic
 var TuiInputRangeComponent = /** @class */ (function (_super) {
     __extends(TuiInputRangeComponent, _super);
-    function TuiInputRangeComponent(control, changeDetectorRef, modeDirective, isMobile, numberFormat, appearance) {
+    function TuiInputRangeComponent(control, changeDetectorRef, isMobile, appearance, elementRef, controller, isNew) {
         var _this = _super.call(this, control, changeDetectorRef) || this;
-        _this.modeDirective = modeDirective;
         _this.isMobile = isMobile;
-        _this.numberFormat = numberFormat;
         _this.appearance = appearance;
+        _this.elementRef = elementRef;
+        _this.controller = controller;
+        _this.isNew = isNew;
+        _this.inputNumberRefs = EMPTY_QUERY;
+        _this.rangeRef = null;
+        _this.min = 0;
+        /* TODO: make `100` as default value (like in native sliders) */
+        _this.max = Infinity;
+        _this.quantum = 1;
+        _this.steps = 0;
+        _this.segments = 0;
+        _this.keySteps = null;
+        _this.leftValueContent = '';
+        _this.rightValueContent = '';
+        _this.lastActiveSide = 'left';
         return _this;
     }
     TuiInputRangeComponent_1 = TuiInputRangeComponent;
-    Object.defineProperty(TuiInputRangeComponent.prototype, "nativeFocusableElement", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "leftFocusableElement", {
         get: function () {
-            return !this.nativeLeft || this.disabled ? null : this.nativeLeft.nativeElement;
+            var _a;
+            return ((_a = this.inputNumberRefs.first) === null || _a === void 0 ? void 0 : _a.nativeFocusableElement) || null;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "focused", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "rightFocusableElement", {
         get: function () {
-            return this.focusedLeft || this.focusedRight;
+            var _a;
+            return ((_a = this.inputNumberRefs.last) === null || _a === void 0 ? void 0 : _a.nativeFocusableElement) || null;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "focusedLeft", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "nativeFocusableElement", {
         get: function () {
-            return !!this.nativeLeft && isNativeFocused(this.nativeLeft.nativeElement);
+            return this.disabled
+                ? null
+                : this.leftFocusableElement || this.rightFocusableElement;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "focusedRight", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "focused", {
         get: function () {
-            return !!this.nativeRight && isNativeFocused(this.nativeRight.nativeElement);
+            return isNativeFocusedIn(this.elementRef.nativeElement);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "showMinLabel", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "showLeftValueContent", {
         get: function () {
-            return !this.focusedLeft && !!this.minLabel && this.value[0] === this.min;
+            var _a;
+            return Boolean((this.minLabel || this.leftValueContent) &&
+                !isNativeFocused(this.leftFocusableElement) &&
+                !(((_a = this.rangeRef) === null || _a === void 0 ? void 0 : _a.focused) && this.lastActiveSide === 'left'));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "showMaxLabel", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "showRightValueContent", {
         get: function () {
-            return !this.focusedRight && !!this.maxLabel && this.value[1] === this.max;
+            var _a;
+            return Boolean((this.maxLabel || this.rightValueContent) &&
+                !isNativeFocused(this.rightFocusableElement) &&
+                !(((_a = this.rangeRef) === null || _a === void 0 ? void 0 : _a.focused) && this.lastActiveSide === 'right'));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "hostMode", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "precision", {
         get: function () {
-            return this.modeDirective && this.modeDirective.mode;
+            return getFractionPartPadded(this.quantum).length;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "inputValueLeft", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "decimal", {
         get: function () {
-            return this.nativeLeft ? this.nativeLeft.nativeElement.value : '';
+            return this.precision ? 'not-zero' : 'never';
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "inputValueRight", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "computedSteps", {
         get: function () {
-            return this.nativeRight ? this.nativeRight.nativeElement.value : '';
+            return this.steps || (this.max - this.min) / this.quantum;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "computedValueLeft", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "computedSize", {
         get: function () {
-            return this.computedPureValueLeft(this.value[0]);
+            return this.isNew && this.controller.size !== 's'
+                ? this.controller.size
+                : this.size;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiInputRangeComponent.prototype, "computedValueRight", {
+    Object.defineProperty(TuiInputRangeComponent.prototype, "legacyLabelOutside", {
         get: function () {
-            return this.computedPureValueRight(this.value[1]);
+            return this.isNew ? this.controller.labelOutside : this.computedSize === 'm';
         },
         enumerable: true,
         configurable: true
@@ -100,186 +127,194 @@ var TuiInputRangeComponent = /** @class */ (function (_super) {
     TuiInputRangeComponent.prototype.onActiveZone = function (active) {
         this.updateFocused(active);
     };
-    TuiInputRangeComponent.prototype.onMouseDown = function () {
-        if (this.nativeRight && !this.isMobile) {
-            setNativeFocused(this.nativeRight.nativeElement);
-        }
-    };
-    TuiInputRangeComponent.prototype.onKeyDownArrowUpLeft = function (event) {
-        if (this.readOnly) {
+    TuiInputRangeComponent.prototype.onTextInputFocused = function (focused, right) {
+        if (focused) {
             return;
         }
-        event.preventDefault();
-        this.processStep(true, false);
-    };
-    TuiInputRangeComponent.prototype.onKeyDownArrowDownLeft = function (event) {
-        if (this.readOnly) {
-            return;
+        var _a = __read(this.inputNumberRefs, 2), leftTextInputRef = _a[0], rightTextInputRef = _a[1];
+        var inputRef = right ? rightTextInputRef : leftTextInputRef;
+        var valueIndex = right ? 1 : 0;
+        if (!inputRef.nativeValue || inputRef.value !== this.value[valueIndex]) {
+            this.updateTextInputValue(this.safeCurrentValue[valueIndex], right);
         }
-        event.preventDefault();
-        this.processStep(false, false);
     };
-    TuiInputRangeComponent.prototype.onKeyDownArrowUpRight = function (event) {
+    TuiInputRangeComponent.prototype.changeByStep = function (event, _a) {
+        var _b = __read(_a, 2), leftCoefficient = _b[0], rightCoefficient = _b[1];
         if (this.readOnly) {
             return;
         }
         event.preventDefault();
-        this.processStep(true, true);
-    };
-    TuiInputRangeComponent.prototype.onKeyDownArrowDownRight = function (event) {
-        if (this.readOnly) {
-            return;
+        var newValue = this.valueGuard([
+            this.value[0] + leftCoefficient * this.step,
+            this.value[1] + rightCoefficient * this.step,
+        ]);
+        var leftValueChanged = newValue[0] !== this.value[0];
+        var rightValueChanged = newValue[1] !== this.value[1];
+        if (leftValueChanged || rightValueChanged) {
+            this.safelyUpdateValue(newValue);
+            this.updateTextInputValue(newValue[rightValueChanged ? 1 : 0], rightValueChanged);
         }
-        event.preventDefault();
-        this.processStep(false, true);
     };
-    TuiInputRangeComponent.prototype.onInputLeft = function () {
-        var value = this.inputValueLeft;
-        var capped = this.capInputValue(value, this.value[1]);
-        var postfix = value.slice(-1)[0] === ',' ? ',' : '';
-        if (maskedMoneyValueIsEmpty(value) || capped === null) {
-            return;
-        }
-        var newValue = this.formatNumber(capped) + postfix;
-        if (this.nativeLeft && this.inputValueLeft !== newValue) {
-            this.nativeLeft.nativeElement.value = newValue;
-        }
-        this.updateValue([capped, this.value[1]]);
+    TuiInputRangeComponent.prototype.onInputLeft = function (value) {
+        this.safelyUpdateValue([value !== null && value !== void 0 ? value : this.safeCurrentValue[0], this.value[1]]);
     };
-    TuiInputRangeComponent.prototype.onInputRight = function () {
-        var value = this.inputValueRight;
-        var capped = this.capInputValue(value);
-        var postfix = value.slice(-1)[0] === ',' ? ',' : '';
-        if (maskedMoneyValueIsEmpty(value) || capped === null) {
-            return;
-        }
-        var newValue = this.formatNumber(capped) + postfix;
-        if (this.nativeRight && this.inputValueRight !== newValue) {
-            this.nativeRight.nativeElement.value = newValue;
-        }
-        if (capped >= this.value[0]) {
-            this.updateValue([this.value[0], capped]);
-        }
+    TuiInputRangeComponent.prototype.onInputRight = function (value) {
+        this.safelyUpdateValue([this.value[0], value !== null && value !== void 0 ? value : this.safeCurrentValue[1]]);
     };
-    TuiInputRangeComponent.prototype.onRangeValue = function (value) {
-        var _this = this;
-        var guardedValue = value.map(function (item) { return _this.valueGuard(item); });
-        if (!this.nativeLeft ||
-            !this.nativeRight ||
-            (guardedValue[0] === this.value[0] && guardedValue[1] === this.value[1])) {
-            return;
-        }
-        if (!this.isMobile) {
-            var element = guardedValue[0] !== this.value[0]
-                ? this.nativeLeft.nativeElement
-                : this.nativeRight.nativeElement;
-            setNativeFocused(element);
-        }
-        this.updateValue(guardedValue);
-        this.nativeLeft.nativeElement.value = this.formatNumber(guardedValue[0]);
+    TuiInputRangeComponent.prototype.onRangeValue = function (_a) {
+        var _b = __read(_a, 2), left = _b[0], right = _b[1];
+        var _c, _d;
+        (_d = (_c = this.rangeRef) === null || _c === void 0 ? void 0 : _c.nativeFocusableElement) === null || _d === void 0 ? void 0 : _d.focus();
+        this.safelyUpdateValue([left, right]);
     };
-    TuiInputRangeComponent.prototype.onLeftFocused = function (focused) {
-        if (focused || !this.nativeLeft) {
-            return;
-        }
-        var inputValue = maskedNumberStringToNumber(this.computedValueLeft, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
-        var value = isNaN(inputValue) ? this.min : this.valueGuard(inputValue);
-        this.nativeLeft.nativeElement.value = this.formatNumber(value);
-        if (value !== this.value[0]) {
-            this.updateValue([value, this.value[1]]);
+    TuiInputRangeComponent.prototype.focusToTextInput = function () {
+        var element = this.lastActiveSide === 'left'
+            ? this.leftFocusableElement
+            : this.rightFocusableElement;
+        if (!this.isMobile && element) {
+            element.focus();
         }
     };
-    TuiInputRangeComponent.prototype.onRightFocused = function (focused) {
-        if (focused || !this.nativeRight) {
-            return;
-        }
-        var inputValue = maskedNumberStringToNumber(this.computedValueRight, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
-        var value = isNaN(inputValue)
-            ? this.value[0]
-            : this.valueGuard(Math.max(inputValue, this.value[0]));
-        this.nativeRight.nativeElement.value = this.formatNumber(value);
-        if (value !== this.value[1]) {
-            this.updateValue([this.value[0], value]);
-        }
+    TuiInputRangeComponent.prototype.onActiveThumbChange = function (activeThumb) {
+        this.lastActiveSide = activeThumb;
     };
     TuiInputRangeComponent.prototype.getFallbackValue = function () {
         return [0, 0];
     };
-    TuiInputRangeComponent.prototype.computedPureValueLeft = function (value) {
-        return this.formatNumber(value);
+    TuiInputRangeComponent.prototype.safelyUpdateValue = function (value) {
+        this.updateValue(this.valueGuard(value));
     };
-    TuiInputRangeComponent.prototype.computedPureValueRight = function (value) {
-        return this.formatNumber(value);
+    TuiInputRangeComponent.prototype.valueGuard = function (_a) {
+        var _b = __read(_a, 2), leftValue = _b[0], rightValue = _b[1];
+        var leftCalibratedValue = this.calibrate(leftValue);
+        var rightCalibratedValue = this.calibrate(rightValue);
+        return [
+            Math.min(leftCalibratedValue, this.value[1]),
+            Math.max(rightCalibratedValue, this.value[0]),
+        ];
     };
-    TuiInputRangeComponent.prototype.formatNumber = function (value) {
-        return formatNumber(value, null, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
+    TuiInputRangeComponent.prototype.calibrate = function (value) {
+        var roundedValue = round(Math.round(value / this.quantum) * this.quantum, TUI_FLOATING_PRECISION);
+        return clamp(roundedValue, this.min, this.max);
     };
-    TuiInputRangeComponent.prototype.processStep = function (increment, right) {
-        var start = this.valueGuard(increment ? this.value[0] + this.step : this.value[0] - this.step);
-        var end = this.valueGuard(increment ? this.value[1] + this.step : this.value[1] - this.step);
-        var value = [
-            right ? this.value[0] : Math.min(start, this.value[1]),
-            right ? Math.max(end, this.value[0]) : this.value[1],
-        ];
-        if (value[0] !== this.value[0] || value[1] !== this.value[1]) {
-            this.updateValue(value);
+    TuiInputRangeComponent.prototype.updateTextInputValue = function (value, right) {
+        var _a = __read(this.inputNumberRefs, 2), leftInputRef = _a[0], rightInputRef = _a[1];
+        var textInputRef = right ? rightInputRef : leftInputRef;
+        if (textInputRef) {
+            textInputRef.nativeValue = textInputRef.getFormattedValue(value);
         }
     };
     var TuiInputRangeComponent_1;
     TuiInputRangeComponent.ctorParameters = function () { return [
         { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
         { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-        { type: TuiModeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiModeDirective,] }] },
         { type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_MOBILE,] }] },
-        { type: undefined, decorators: [{ type: Inject, args: [TUI_NUMBER_FORMAT,] }] },
-        { type: String, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_APPEARANCE,] }] }
+        { type: String, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_APPEARANCE,] }] },
+        { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
+        { type: TuiTextfieldController, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_WATCHED_CONTROLLER,] }] },
+        { type: TuiNewRangeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiNewRangeDirective,] }] }
     ]; };
     __decorate([
-        ViewChild('nativeLeft')
-    ], TuiInputRangeComponent.prototype, "nativeLeft", void 0);
+        ViewChildren(TuiInputNumberComponent)
+    ], TuiInputRangeComponent.prototype, "inputNumberRefs", void 0);
+    __decorate([
+        ViewChild(TuiRangeComponent)
+    ], TuiInputRangeComponent.prototype, "rangeRef", void 0);
+    __decorate([
+        Input(),
+        tuiDefaultProp()
+    ], TuiInputRangeComponent.prototype, "min", void 0);
+    __decorate([
+        Input(),
+        tuiDefaultProp()
+    ], TuiInputRangeComponent.prototype, "max", void 0);
     __decorate([
-        ViewChild('nativeRight')
-    ], TuiInputRangeComponent.prototype, "nativeRight", void 0);
+        Input(),
+        tuiDefaultProp(quantumAssertion, 'Quantum must be positive')
+    ], TuiInputRangeComponent.prototype, "quantum", void 0);
     __decorate([
-        HostBinding('class._min-label')
-    ], TuiInputRangeComponent.prototype, "showMinLabel", null);
+        Input(),
+        tuiDefaultProp()
+    ], TuiInputRangeComponent.prototype, "steps", void 0);
     __decorate([
-        HostBinding('class._max-label')
-    ], TuiInputRangeComponent.prototype, "showMaxLabel", null);
+        Input(),
+        tuiDefaultProp()
+    ], TuiInputRangeComponent.prototype, "segments", void 0);
     __decorate([
-        HostBinding('attr.data-mode')
-    ], TuiInputRangeComponent.prototype, "hostMode", null);
+        Input(),
+        tuiDefaultProp()
+    ], TuiInputRangeComponent.prototype, "keySteps", void 0);
     __decorate([
-        tuiPure
-    ], TuiInputRangeComponent.prototype, "computedPureValueLeft", null);
+        Input(),
+        tuiDefaultProp()
+    ], TuiInputRangeComponent.prototype, "leftValueContent", void 0);
     __decorate([
-        tuiPure
-    ], TuiInputRangeComponent.prototype, "computedPureValueRight", null);
+        Input(),
+        tuiDefaultProp()
+    ], TuiInputRangeComponent.prototype, "rightValueContent", void 0);
+    __decorate([
+        HostBinding('class._label-outside')
+    ], TuiInputRangeComponent.prototype, "legacyLabelOutside", null);
     TuiInputRangeComponent = TuiInputRangeComponent_1 = __decorate([
         Component({
             selector: 'tui-input-range',
-            template: "<tui-wrapper\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"disabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [invalid]=\"computedInvalid\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <span\n        *ngIf=\"hasPlaceholder\"\n        automation-id=\"tui-input-range__placeholder\"\n        class=\"t-placeholder t-placeholder_raised\"\n    >\n        <ng-content></ng-content>\n    </span>\n    <div class=\"t-content\">\n        <span *ngIf=\"!showMinLabel\" class=\"t-label\">\n            <span class=\"t-value\">{{ inputValueLeft }}</span>\n            <span\n                *ngIf=\"pluralizeMap\"\n                automation-id=\"tui-input-range__pluralize-left\"\n                class=\"t-pluralize\"\n            >\n                {{ value[0] | i18nPlural: pluralizeMap }}\n            </span>\n        </span>\n        <span\n            *ngIf=\"showMinLabel\"\n            automation-id=\"tui-input-range__min-label\"\n            class=\"t-label\"\n        >\n            {{ minLabel }}\n        </span>\n        <span\n            *ngIf=\"showMaxLabel\"\n            automation-id=\"tui-input-range__max-label\"\n            class=\"t-max\"\n        >\n            {{ maxLabel }}\n        </span>\n    </div>\n\n    <div class=\"t-native-wrapper\" (tuiHoveredChange)=\"onHovered($event)\">\n        <input\n            #nativeLeft\n            automation-id=\"tui-input-range__native-left\"\n            class=\"t-native\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readOnly\"\n            [class.t-native_hidden]=\"showMinLabel\"\n            [tuiInputMode]=\"inputMode\"\n            [tuiFocusable]=\"focusable\"\n            [textMask]=\"quantum | tuiMapper: mask:min\"\n            [ngModel]=\"computedValueLeft\"\n            (ngModelChange)=\"onInputLeft()\"\n            (tuiFocusedChange)=\"onLeftFocused($event)\"\n            (keydown.arrowUp)=\"onKeyDownArrowUpLeft($event)\"\n            (keydown.arrowDown)=\"onKeyDownArrowDownLeft($event)\"\n        />\n        <input\n            #nativeRight\n            automation-id=\"tui-input-range__native-right\"\n            class=\"t-native t-native_right\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readOnly\"\n            [class.t-native_hidden]=\"showMaxLabel\"\n            [tuiInputMode]=\"inputMode\"\n            [tuiFocusable]=\"focusable\"\n            [textMask]=\"quantum | tuiMapper: mask:min\"\n            [ngModel]=\"computedValueRight\"\n            (ngModelChange)=\"onInputRight()\"\n            (tuiFocusedChange)=\"onRightFocused($event)\"\n            (keydown.arrowUp)=\"onKeyDownArrowUpRight($event)\"\n            (keydown.arrowDown)=\"onKeyDownArrowDownRight($event)\"\n        />\n        <span\n            *ngIf=\"pluralizeMap && !showMaxLabel\"\n            automation-id=\"tui-input-range__pluralize-right\"\n            class=\"t-pluralize t-pluralize_right\"\n            (mousedown)=\"onMouseDown()\"\n        >\n            {{ value[1] | i18nPlural: pluralizeMap }}\n        </span>\n    </div>\n    <tui-range\n        class=\"t-slider\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [steps]=\"computedSteps\"\n        [segments]=\"segments\"\n        [keySteps]=\"keySteps\"\n        [pluralize]=\"segmentsPluralizeMap\"\n        [focusable]=\"false\"\n        [disabled]=\"readOnly || disabled\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onRangeValue($event)\"\n        (mousedown.prevent)=\"onMouseDown()\"\n    ></tui-range>\n</tui-wrapper>\n",
+            template: "<tui-wrapper\n    class=\"t-wrapper\"\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"disabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [invalid]=\"computedInvalid\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-input-number\n        tuiTextfieldAppearance=\"none\"\n        automation-id=\"tui-input-range__left-input\"\n        class=\"t-left t-text-input\"\n        [min]=\"min\"\n        [max]=\"value[1]\"\n        [precision]=\"precision\"\n        [decimal]=\"decimal\"\n        [postfix]=\"pluralizeMap && !showLeftValueContent ? (value[0] | i18nPlural: pluralizeMap) : ''\"\n        [disabled]=\"computedDisabled\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldSize]=\"computedSize\"\n        [tuiTextfieldLabelOutside]=\"legacyLabelOutside\"\n        [ngModel]=\"value[0]\"\n        (ngModelChange)=\"onInputLeft($event)\"\n        (focusedChange)=\"onTextInputFocused($event, false)\"\n        (keydown.arrowUp)=\"changeByStep($event, [1, 0])\"\n        (keydown.arrowDown)=\"changeByStep($event, [-1, 0])\"\n    >\n        <ng-content></ng-content>\n        <div\n            *ngIf=\"showLeftValueContent\"\n            polymorpheus-outlet\n            [content]=\"minLabel ? legacyMinLabel : leftValueContent\"\n            [context]=\"{$implicit: value[0]}\"\n        ></div>\n    </tui-input-number>\n\n    <div class=\"t-right\">\n        <tui-input-number\n            tuiTextfieldAppearance=\"none\"\n            automation-id=\"tui-input-range__right-input\"\n            class=\"t-text-input\"\n            [min]=\"value[0]\"\n            [max]=\"max\"\n            [precision]=\"precision\"\n            [decimal]=\"decimal\"\n            [disabled]=\"computedDisabled\"\n            [readOnly]=\"readOnly\"\n            [tuiTextfieldSize]=\"computedSize\"\n            [tuiTextfieldLabelOutside]=\"legacyLabelOutside\"\n            [ngModel]=\"value[1]\"\n            (ngModelChange)=\"onInputRight($event)\"\n            (focusedChange)=\"onTextInputFocused($event, true)\"\n            (keydown.arrowUp)=\"changeByStep($event, [0, 1])\"\n            (keydown.arrowDown)=\"changeByStep($event, [0, -1])\"\n        >\n            <div\n                *ngIf=\"showRightValueContent\"\n                polymorpheus-outlet\n                [content]=\"maxLabel ? legacyMaxLabel : rightValueContent\"\n                [context]=\"{$implicit: value[1]}\"\n            ></div>\n        </tui-input-number>\n\n        <!-- TODO replace by postfix of the right InputNumber (after fix https://github.com/Tinkoff/taiga-ui/issues/1193) -->\n        <span\n            *ngIf=\"!showRightValueContent && pluralizeMap\"\n            automation-id=\"tui-input-range__pluralize-right\"\n            class=\"t-pluralize-right\"\n        >\n            &nbsp;{{value[1] | i18nPlural: pluralizeMap}}\n        </span>\n    </div>\n\n    <tui-range\n        class=\"t-slider\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [steps]=\"computedSteps\"\n        [segments]=\"segments\"\n        [keySteps]=\"keySteps\"\n        [pluralize]=\"segmentsPluralizeMap\"\n        [focusable]=\"false\"\n        [disabled]=\"readOnly || disabled\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onRangeValue($event)\"\n        (tuiPressedChange)=\"focusToTextInput()\"\n        (activeThumbChange)=\"onActiveThumbChange($event)\"\n    ></tui-range>\n</tui-wrapper>\n\n<!-- TODO remove in v3.0 -->\n<ng-template\n    #legacyMinLabel\n    let-value\n>\n    <ng-container *ngIf=\"value === min\">{{minLabel}}</ng-container>\n    <ng-container *ngIf=\"value !== min\">\n        {{value}}&nbsp;{{value | i18nPlural: pluralizeMap ||\n        pluralizeMapFallback}}\n    </ng-container>\n</ng-template>\n\n<!-- TODO remove in v3.0 -->\n<ng-template\n    #legacyMaxLabel\n    let-value\n>\n    <ng-container *ngIf=\"value === max\">{{maxLabel}}</ng-container>\n    <ng-container *ngIf=\"value !== max\">\n        {{value}}&nbsp;{{value | i18nPlural: pluralizeMap ||\n        pluralizeMapFallback}}\n    </ng-container>\n</ng-template>\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             providers: [
                 {
                     provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
                     useExisting: forwardRef(function () { return TuiInputRangeComponent_1; }),
                 },
+                TEXTFIELD_CONTROLLER_PROVIDER,
             ],
-            styles: [":host{position:relative;z-index:0;display:block;font:var(--tui-font-text-m);border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host._segmented{border-bottom:26px solid transparent}:host[data-mode=onDark]{color:var(--tui-base-01)}.t-native-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.t-pluralize{display:flex;align-items:center;padding-right:.75rem;margin-left:-.5rem}.t-pluralize_right{margin-left:-.75rem}:host[data-size='l'] .t-pluralize_right{padding-top:1.25rem}:host._disabled .t-pluralize_right{color:var(--tui-text-03)}:host[data-mode=onDark]._disabled .t-pluralize_right{color:var(--tui-text-03-night)}.t-native{padding:0 1rem;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;flex:1;min-width:0;color:var(--tui-text-01);box-sizing:border-box;outline:0}.t-native:-webkit-autofill,.t-native:-webkit-autofill:focus,.t-native:-webkit-autofill:hover{border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}.t-native_right{text-align:right}.t-native_hidden{opacity:0}:host._disabled .t-native{color:var(--tui-text-03);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host[data-size='l'] .t-native{padding:1.25rem 1rem 0}:host[data-mode=onDark] .t-native{color:var(--tui-text-01-night)}:host[data-mode=onDark]._disabled .t-native{color:var(--tui-text-03-night)}.t-content{display:flex;height:var(--tui-height-m);padding:0 1rem;justify-content:space-between;align-items:center}:host[data-size='l'] .t-content{height:var(--tui-height-l);padding:0 1rem}:host[data-size='l']._disabled .t-content{color:var(--tui-text-03)}:host[data-size='l'][data-mode=onDark]._disabled .t-content{color:var(--tui-text-03-night)}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none;position:absolute;top:0;width:100%;height:100%;left:1rem;line-height:var(--tui-height-l)}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size='m'] .t-placeholder_raised{font:var(--tui-font-text-xs);transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .t-placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size='l']._focused._label-outside .t-placeholder,:host[data-size='m']._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size='l'] .t-placeholder{font-size:.9375rem}:host[data-size='l'] .t-placeholder_raised{font-size:.8156rem}:host[data-size='l']._focused:not(._label-outside) .t-placeholder,:host[data-size='m']._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size='l'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .t-placeholder,:host[data-size='l'][data-mode=onDark]._focused._label-outside .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused._label-outside .t-placeholder{color:var(--tui-text-02-night)}.t-value{visibility:hidden;overflow:hidden;padding-right:.75rem}:host._disabled .t-value{color:var(--tui-text-03)}.t-label{display:flex;width:50%}:host[data-size='l'] .t-label{padding-top:1.25rem}.t-max{text-align:right;flex:1}:host[data-size='l'] .t-max{padding-top:1.25rem;line-height:calc(var(--tui-height-l) - 1.25rem)}.t-slider{position:absolute;top:100%;left:0;right:0;z-index:1;border-top-left-radius:0;border-top-right-radius:0;margin:-.5625rem 0 0;color:transparent}:host._disabled .t-slider,:host._readonly .t-slider{pointer-events:none}"]
-        }),
+            host: {
+                /**
+                 * TODO delete it in v3.0
+                 * Dont forget to clear html-tags
+                 */
+                '[class._show-ticks-labels]': '!isNew',
+            },
+            styles: [".t-wrapper{position:relative}.t-left{width:100%}.t-right{position:absolute;right:0;top:0;display:flex;width:50%;height:100%;text-align:right}.t-right .t-text-input{flex:1}.t-text-input{text-align:inherit}.t-pluralize-right{display:flex;align-items:center;padding:1.125rem var(--tui-padding-m) 0 0;margin-left:-.75rem;font:var(--tui-font-text-s)}:host[data-size='l'] .t-pluralize-right{font:var(--tui-font-text-m);padding-top:1.25rem;margin-left:-1rem;padding-right:var(--tui-padding-l)}:host._label-outside .t-pluralize-right{padding-top:0}:host._disabled .t-pluralize-right{color:var(--tui-text-03)}:host{display:block;border-radius:var(--tui-radius-m)}:host._show-ticks-labels._segmented{border-bottom:26px solid transparent}.t-slider{position:absolute;top:100%;left:0;right:0;z-index:1;margin:-.125rem 0 0;background:0 0}"]
+        })
+        /**
+         * `AbstractTuiInputSlider` includes all legacy code (it can be deleted in v3.0)
+         * TODO replace `extends AbstractTuiInputSlider<[number, number]>` by `extends AbstractTuiControl<[number, number]> implements TuiWithOptionalMinMax<number>`
+         */
+        ,
         __param(0, Optional()),
         __param(0, Self()),
         __param(0, Inject(NgControl)),
         __param(1, Inject(ChangeDetectorRef)),
-        __param(2, Optional()),
-        __param(2, Inject(TuiModeDirective)),
-        __param(3, Inject(TUI_IS_MOBILE)),
-        __param(4, Inject(TUI_NUMBER_FORMAT)),
-        __param(5, Inject(TUI_TEXTFIELD_APPEARANCE))
+        __param(2, Inject(TUI_IS_MOBILE)),
+        __param(3, Inject(TUI_TEXTFIELD_APPEARANCE)),
+        __param(4, Inject(ElementRef)),
+        __param(5, Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER)),
+        __param(6, Optional()),
+        __param(6, Inject(TuiNewRangeDirective))
     ], TuiInputRangeComponent);
     return TuiInputRangeComponent;
 }(AbstractTuiInputSlider));
+function tuiTextfieldAppearanceDirectiveFactory(_a) {
+    var nativeElement = _a.nativeElement;
+    return nativeElement.getAttribute('tuiTextfieldAppearance');
+}
+var TuiTextfieldAppearanceDirective = /** @class */ (function () {
+    function TuiTextfieldAppearanceDirective() {
+    }
+    TuiTextfieldAppearanceDirective = __decorate([
+        Directive({
+            selector: '[tuiTextfieldAppearance]',
+            providers: [
+                {
+                    provide: TUI_TEXTFIELD_APPEARANCE,
+                    deps: [ElementRef],
+                    useFactory: tuiTextfieldAppearanceDirectiveFactory,
+                },
+            ],
+        })
+    ], TuiTextfieldAppearanceDirective);
+    return TuiTextfieldAppearanceDirective;
+}());
 
 var TuiInputRangeModule = /** @class */ (function () {
     function TuiInputRangeModule() {
@@ -290,19 +325,16 @@ var TuiInputRangeModule = /** @class */ (function () {
                 CommonModule,
                 FormsModule,
                 ReactiveFormsModule,
-                TextMaskModule,
-                TuiFocusableModule,
-                TuiFocusedModule,
-                TuiHoveredModule,
-                TuiPressedModule,
-                TuiMapperPipeModule,
-                TuiInputModeModule,
+                PolymorpheusModule,
                 TuiActiveZoneModule,
+                TuiInputNumberModule,
+                TuiPressedModule,
                 TuiRangeModule,
+                TuiTextfieldControllerModule,
                 TuiWrapperModule,
             ],
-            declarations: [TuiInputRangeComponent],
-            exports: [TuiInputRangeComponent],
+            declarations: [TuiInputRangeComponent, TuiTextfieldAppearanceDirective],
+            exports: [TuiInputRangeComponent, TuiNewRangeDirective],
         })
     ], TuiInputRangeModule);
     return TuiInputRangeModule;
@@ -312,5 +344,5 @@ var TuiInputRangeModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { TuiInputRangeComponent, TuiInputRangeModule };
+export { TuiInputRangeComponent, TuiInputRangeModule, TuiTextfieldAppearanceDirective, tuiTextfieldAppearanceDirectiveFactory };
 //# sourceMappingURL=taiga-ui-kit-components-input-range.js.map