@taiga-ui/kit 2.40.0 → 2.42.0

package/bundles/taiga-ui-kit-components-input-range.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/abstract'), require('@angular/common'), require('@taiga-ui/kit/components/range'), require('angular2-text-mask')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-range', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/abstract', '@angular/common', '@taiga-ui/kit/components/range', 'angular2-text-mask'], factory) :
-    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components['input-range'] = {}), global.ng.core, global.ng.forms, global.cdk, global.core$1, global['taiga-ui'].kit.abstract, global.ng.common, global['taiga-ui'].kit.components.range, global.angular2TextMask));
-}(this, (function (exports, core, forms, cdk, core$1, abstract, common, range, angular2TextMask) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/abstract'), require('@taiga-ui/kit/components/input-number'), require('@taiga-ui/kit/components/range'), require('@taiga-ui/kit/constants'), require('@angular/common'), require('@tinkoff/ng-polymorpheus')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-range', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/abstract', '@taiga-ui/kit/components/input-number', '@taiga-ui/kit/components/range', '@taiga-ui/kit/constants', '@angular/common', '@tinkoff/ng-polymorpheus'], factory) :
+    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components['input-range'] = {}), global.ng.core, global.ng.forms, global.cdk, global.core$1, global['taiga-ui'].kit.abstract, global['taiga-ui'].kit.components['input-number'], global['taiga-ui'].kit.components.range, global['taiga-ui'].kit.constants, global.ng.common, global.ngPolymorpheus));
+}(this, (function (exports, core, forms, cdk, core$1, abstract, inputNumber, range, constants, common, ngPolymorpheus) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -226,88 +226,113 @@
     // @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 = cdk.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 && cdk.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 && cdk.isNativeFocused(this.nativeRight.nativeElement);
+                return cdk.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) &&
+                    !cdk.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) &&
+                    !cdk.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 core$1.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
@@ -315,186 +340,194 @@
         TuiInputRangeComponent.prototype.onActiveZone = function (active) {
             this.updateFocused(active);
         };
-        TuiInputRangeComponent.prototype.onMouseDown = function () {
-            if (this.nativeRight && !this.isMobile) {
-                cdk.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 (core$1.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 (core$1.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;
-                cdk.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 = core$1.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 = core$1.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 core$1.formatNumber(value, null, this.numberFormat.decimalSeparator, this.numberFormat.thousandSeparator);
+        TuiInputRangeComponent.prototype.calibrate = function (value) {
+            var roundedValue = cdk.round(Math.round(value / this.quantum) * this.quantum, constants.TUI_FLOATING_PRECISION);
+            return cdk.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: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }, { type: core.Inject, args: [forms.NgControl,] }] },
             { type: core.ChangeDetectorRef, decorators: [{ type: core.Inject, args: [core.ChangeDetectorRef,] }] },
-            { type: core$1.TuiModeDirective, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.TuiModeDirective,] }] },
             { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_MOBILE,] }] },
-            { type: undefined, decorators: [{ type: core.Inject, args: [core$1.TUI_NUMBER_FORMAT,] }] },
-            { type: String, decorators: [{ type: core.Inject, args: [core$1.TUI_TEXTFIELD_APPEARANCE,] }] }
+            { type: String, decorators: [{ type: core.Inject, args: [core$1.TUI_TEXTFIELD_APPEARANCE,] }] },
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+            { type: core$1.TuiTextfieldController, decorators: [{ type: core.Inject, args: [core$1.TUI_TEXTFIELD_WATCHED_CONTROLLER,] }] },
+            { type: range.TuiNewRangeDirective, decorators: [{ type: core.Optional }, { type: core.Inject, args: [range.TuiNewRangeDirective,] }] }
         ]; };
         __decorate([
-            core.ViewChild('nativeLeft')
-        ], TuiInputRangeComponent.prototype, "nativeLeft", void 0);
+            core.ViewChildren(inputNumber.TuiInputNumberComponent)
+        ], TuiInputRangeComponent.prototype, "inputNumberRefs", void 0);
+        __decorate([
+            core.ViewChild(range.TuiRangeComponent)
+        ], TuiInputRangeComponent.prototype, "rangeRef", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputRangeComponent.prototype, "min", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputRangeComponent.prototype, "max", void 0);
         __decorate([
-            core.ViewChild('nativeRight')
-        ], TuiInputRangeComponent.prototype, "nativeRight", void 0);
+            core.Input(),
+            cdk.tuiDefaultProp(abstract.quantumAssertion, 'Quantum must be positive')
+        ], TuiInputRangeComponent.prototype, "quantum", void 0);
         __decorate([
-            core.HostBinding('class._min-label')
-        ], TuiInputRangeComponent.prototype, "showMinLabel", null);
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputRangeComponent.prototype, "steps", void 0);
         __decorate([
-            core.HostBinding('class._max-label')
-        ], TuiInputRangeComponent.prototype, "showMaxLabel", null);
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputRangeComponent.prototype, "segments", void 0);
         __decorate([
-            core.HostBinding('attr.data-mode')
-        ], TuiInputRangeComponent.prototype, "hostMode", null);
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputRangeComponent.prototype, "keySteps", void 0);
         __decorate([
-            cdk.tuiPure
-        ], TuiInputRangeComponent.prototype, "computedPureValueLeft", null);
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputRangeComponent.prototype, "leftValueContent", void 0);
         __decorate([
-            cdk.tuiPure
-        ], TuiInputRangeComponent.prototype, "computedPureValueRight", null);
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiInputRangeComponent.prototype, "rightValueContent", void 0);
+        __decorate([
+            core.HostBinding('class._label-outside')
+        ], TuiInputRangeComponent.prototype, "legacyLabelOutside", null);
         TuiInputRangeComponent = TuiInputRangeComponent_1 = __decorate([
             core.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: core.ChangeDetectionStrategy.OnPush,
                 providers: [
                     {
                         provide: cdk.TUI_FOCUSABLE_ITEM_ACCESSOR,
                         useExisting: core.forwardRef(function () { return TuiInputRangeComponent_1; }),
                     },
+                    core$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, core.Optional()),
             __param(0, core.Self()),
             __param(0, core.Inject(forms.NgControl)),
             __param(1, core.Inject(core.ChangeDetectorRef)),
-            __param(2, core.Optional()),
-            __param(2, core.Inject(core$1.TuiModeDirective)),
-            __param(3, core.Inject(cdk.TUI_IS_MOBILE)),
-            __param(4, core.Inject(core$1.TUI_NUMBER_FORMAT)),
-            __param(5, core.Inject(core$1.TUI_TEXTFIELD_APPEARANCE))
+            __param(2, core.Inject(cdk.TUI_IS_MOBILE)),
+            __param(3, core.Inject(core$1.TUI_TEXTFIELD_APPEARANCE)),
+            __param(4, core.Inject(core.ElementRef)),
+            __param(5, core.Inject(core$1.TUI_TEXTFIELD_WATCHED_CONTROLLER)),
+            __param(6, core.Optional()),
+            __param(6, core.Inject(range.TuiNewRangeDirective))
         ], TuiInputRangeComponent);
         return TuiInputRangeComponent;
     }(abstract.AbstractTuiInputSlider));
+    function tuiTextfieldAppearanceDirectiveFactory(_a) {
+        var nativeElement = _a.nativeElement;
+        return nativeElement.getAttribute('tuiTextfieldAppearance');
+    }
+    var TuiTextfieldAppearanceDirective = /** @class */ (function () {
+        function TuiTextfieldAppearanceDirective() {
+        }
+        TuiTextfieldAppearanceDirective = __decorate([
+            core.Directive({
+                selector: '[tuiTextfieldAppearance]',
+                providers: [
+                    {
+                        provide: core$1.TUI_TEXTFIELD_APPEARANCE,
+                        deps: [core.ElementRef],
+                        useFactory: tuiTextfieldAppearanceDirectiveFactory,
+                    },
+                ],
+            })
+        ], TuiTextfieldAppearanceDirective);
+        return TuiTextfieldAppearanceDirective;
+    }());
 
     var TuiInputRangeModule = /** @class */ (function () {
         function TuiInputRangeModule() {
@@ -505,19 +538,16 @@
                     common.CommonModule,
                     forms.FormsModule,
                     forms.ReactiveFormsModule,
-                    angular2TextMask.TextMaskModule,
-                    cdk.TuiFocusableModule,
-                    cdk.TuiFocusedModule,
-                    cdk.TuiHoveredModule,
-                    cdk.TuiPressedModule,
-                    cdk.TuiMapperPipeModule,
-                    cdk.TuiInputModeModule,
+                    ngPolymorpheus.PolymorpheusModule,
                     cdk.TuiActiveZoneModule,
+                    inputNumber.TuiInputNumberModule,
+                    cdk.TuiPressedModule,
                     range.TuiRangeModule,
+                    core$1.TuiTextfieldControllerModule,
                     core$1.TuiWrapperModule,
                 ],
-                declarations: [TuiInputRangeComponent],
-                exports: [TuiInputRangeComponent],
+                declarations: [TuiInputRangeComponent, TuiTextfieldAppearanceDirective],
+                exports: [TuiInputRangeComponent, range.TuiNewRangeDirective],
             })
         ], TuiInputRangeModule);
         return TuiInputRangeModule;
@@ -525,6 +555,8 @@
 
     exports.TuiInputRangeComponent = TuiInputRangeComponent;
     exports.TuiInputRangeModule = TuiInputRangeModule;
+    exports.TuiTextfieldAppearanceDirective = TuiTextfieldAppearanceDirective;
+    exports.tuiTextfieldAppearanceDirectiveFactory = tuiTextfieldAppearanceDirectiveFactory;
 
     Object.defineProperty(exports, '__esModule', { value: true });