@progress/kendo-angular-inputs 8.0.0-dev.202112211528 → 8.0.0-dev.202201181548

package/dist/npm/rangeslider/rangeslider-model.js

@@ -31,8 +31,7 @@ var RangeSliderModel = /** @class */ (function (_super) {
                 max: max,
                 reverse: reverse,
                 value: value,
-                trackWidth: trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth: trackWidth
             });
             this.renderer.setStyle(dragHandle, position, this.startHandlePosition + "px");
         }
@@ -42,8 +41,7 @@ var RangeSliderModel = /** @class */ (function (_super) {
                 max: max,
                 reverse: reverse,
                 value: value,
-                trackWidth: trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth: trackWidth
             });
             this.renderer.setStyle(dragHandle, position, this.endHandlePosition + "px");
         }
@@ -52,12 +50,11 @@ var RangeSliderModel = /** @class */ (function (_super) {
         var _a = this.props, reverse = _a.reverse, vertical = _a.vertical;
         var dimension = vertical ? 'height' : 'width';
         var position = vertical ? 'bottom' : reverse ? 'right' : 'left';
-        var handleWidth = Math.floor(dragHandle.offsetWidth / 2);
         var size = Math.abs(this.endHandlePosition - this.startHandlePosition);
         var currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
         this.renderer.setStyle(selection, dimension, size + "px");
-        this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) - handleWidth + 'px'
-            : parseFloat(currentSelectionPosition) + handleWidth + 'px');
+        this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) + 'px'
+            : parseFloat(currentSelectionPosition) + 'px');
     };
     return RangeSliderModel;
 }(slider_model_base_1.SliderModelBase));

package/dist/npm/rangeslider/rangeslider.component.js

@@ -455,7 +455,7 @@ var RangeSliderComponent = /** @class */ (function (_super) {
                 { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return RangeSliderComponent_1; }) }
             ],
             selector: 'kendo-rangeslider',
-            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-dragHandleStart=\"kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider.\"\n            dragHandleStart=\"Drag\"\n            i18n-dragHandleEnd=\"kendo.rangeslider.dragHandleEnd|The title of the **End** drag handle of the Slider.\"\n            dragHandleEnd=\"Drag\"\n        >\n\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <ul kendoSliderTicks\n                #ticks\n                *ngIf=\"tickPlacement !== 'none'\"\n                [tickTitle]=\"title\"\n                [vertical]=\"vertical\"\n                [step]=\"smallStep\"\n                [largeStep]=\"largeStep\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [labelTemplate]=\"labelTemplate?.templateRef\"\n                [attr.aria-hidden]=\"true\"\n            >\n            </ul>\n            <div #track class=\"k-slider-track\">\n                <div #sliderSelection class=\"k-slider-selection\">\n                </div>\n                <a #draghandleStart\n                    role=\"slider\"\n                    [id]=\"startHandleId\"\n                    [attr.tabindex]=\"disabled ? undefined : tabindex\"\n                    [attr.aria-valuemin]=\"min\"\n                    [attr.aria-valuemax]=\"max\"\n                    [attr.aria-valuenow]=\"value ? value[0] : null\"\n                    [attr.aria-valuetext]=\"valueText\"\n                    [attr.aria-disabled]=\"disabled ? true : undefined\"\n                    [attr.aria-readonly]=\"readonly ? true : undefined\"\n                    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                    [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                    class=\"k-draghandle\"\n                    [title]=\"textFor('dragHandleStart')\"\n                    kendoDraggable\n                    (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n                    (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n                    (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                ></a>\n                <a #draghandleEnd\n                    role=\"slider\"\n                    [id]=\"endHandleId\"\n                    [attr.tabindex]=\"disabled ? undefined : tabindex\"\n                    [attr.aria-valuemin]=\"min\"\n                    [attr.aria-valuemax]=\"max\"\n                    [attr.aria-valuenow]=\"value ? value[1] : null\"\n                    [attr.aria-valuetext]=\"valueText\"\n                    [attr.aria-disabled]=\"disabled ? true : undefined\"\n                    [attr.aria-readonly]=\"readonly ? true : undefined\"\n                    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                    [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                    class=\"k-draghandle\"\n                    [title]=\"textFor('dragHandleEnd')\"\n                    kendoDraggable\n                    (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n                    (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n                    (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                ></a>\n            </div>\n\n            <kendo-resize-sensor (resize)=\"sizeComponent()\"></kendo-resize-sensor>\n        </div>\n  "
+            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-dragHandleStart=\"kendo.rangeslider.dragHandleStart|The title of the **Start** drag handle of the Slider.\"\n            dragHandleStart=\"Drag\"\n            i18n-dragHandleEnd=\"kendo.rangeslider.dragHandleEnd|The title of the **End** drag handle of the Slider.\"\n            dragHandleEnd=\"Drag\"\n        >\n\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <div class=\"k-slider-track-wrap\">\n                <ul kendoSliderTicks\n                    #ticks\n                    *ngIf=\"tickPlacement !== 'none'\"\n                    [tickTitle]=\"title\"\n                    [vertical]=\"vertical\"\n                    [step]=\"smallStep\"\n                    [largeStep]=\"largeStep\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [labelTemplate]=\"labelTemplate?.templateRef\"\n                    [attr.aria-hidden]=\"true\"\n                >\n                </ul>\n                <div #track class=\"k-slider-track\">\n                    <div #sliderSelection class=\"k-slider-selection\">\n                    </div>\n                    <a #draghandleStart\n                        role=\"slider\"\n                        [id]=\"startHandleId\"\n                        [attr.tabindex]=\"disabled ? undefined : tabindex\"\n                        [attr.aria-valuemin]=\"min\"\n                        [attr.aria-valuemax]=\"max\"\n                        [attr.aria-valuenow]=\"value ? value[0] : null\"\n                        [attr.aria-valuetext]=\"valueText\"\n                        [attr.aria-disabled]=\"disabled ? true : undefined\"\n                        [attr.aria-readonly]=\"readonly ? true : undefined\"\n                        [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                        [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                        class=\"k-draghandle\"\n                        [title]=\"textFor('dragHandleStart')\"\n                        kendoDraggable\n                        (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n                        (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n                        (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                    ></a>\n                    <a #draghandleEnd\n                        role=\"slider\"\n                        [id]=\"endHandleId\"\n                        [attr.tabindex]=\"disabled ? undefined : tabindex\"\n                        [attr.aria-valuemin]=\"min\"\n                        [attr.aria-valuemax]=\"max\"\n                        [attr.aria-valuenow]=\"value ? value[1] : null\"\n                        [attr.aria-valuetext]=\"valueText\"\n                        [attr.aria-disabled]=\"disabled ? true : undefined\"\n                        [attr.aria-readonly]=\"readonly ? true : undefined\"\n                        [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                        [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                        class=\"k-draghandle\"\n                        [title]=\"textFor('dragHandleEnd')\"\n                        kendoDraggable\n                        (kendoPress)=\"ifEnabled(handleDragPress ,$event)\"\n                        (kendoDrag)=\"ifEnabled(onHandleDrag ,$event)\"\n                        (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                    ></a>\n                </div>\n            </div>\n            <kendo-resize-sensor (resize)=\"sizeComponent()\"></kendo-resize-sensor>\n        </div>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             core_1.Injector,

package/dist/npm/slider/slider-model.js

@@ -25,16 +25,14 @@ var SliderModel = /** @class */ (function (_super) {
             max: max,
             reverse: reverse,
             value: value,
-            trackWidth: trackWidth,
-            handleWidth: dragHandle.offsetWidth
+            trackWidth: trackWidth
         });
         this.renderer.setStyle(dragHandle, position, this.handlePosition + "px");
     };
-    SliderModel.prototype.positionSelection = function (dragHandle, selection) {
+    SliderModel.prototype.positionSelection = function (selection) {
         var _a = this.props, reverse = _a.reverse, vertical = _a.vertical;
         var dimension = vertical ? 'height' : 'width';
-        var handleWidth = Math.floor(dragHandle.offsetWidth / 2);
-        var size = this.handlePosition + handleWidth;
+        var size = this.handlePosition;
         if (reverse) {
             size = this.trackWidth() - size;
         }

package/dist/npm/slider/slider.component.js

@@ -295,7 +295,7 @@ var SliderComponent = /** @class */ (function (_super) {
             model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(function (element) { return element.nativeElement; }));
         }
         model.positionHandle(dragHandleEl);
-        model.positionSelection(dragHandleEl, selectionEl);
+        model.positionSelection(selectionEl);
         if (!animate) {
             this.hostElement.nativeElement.getBoundingClientRect();
             this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
@@ -470,7 +470,7 @@ var SliderComponent = /** @class */ (function (_super) {
                 { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return SliderComponent_1; }) }
             ],
             selector: 'kendo-slider',
-            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n            increment=\"increment\"\n            i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n            decrement=\"decrement\"\n            i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n            dragHandle=\"Drag\"\n        >\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-buttons]=\"showButtons\"\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <span\n                #decreaseButton\n                *ngIf=\"showButtons\"\n                class=\"k-button k-button-decrease\"\n                [title]=\"decrementMessage\"\n                role=\"presentation\"\n            >\n                <span class=\"k-icon\"\n                    [class.k-i-arrow-w]=\"!vertical\"\n                    [class.k-i-arrow-s]=\"vertical\"\n                >\n                </span>\n            </span>\n            <span\n                *ngIf=\"showButtons\"\n                #increaseButton\n                class=\"k-button k-button-increase\"\n                [title]=\"incrementMessage\"\n                (click)=\"$event.preventDefault()\"\n                [attr.aria-label]=\"currentValue\"\n            >\n                <span class=\"k-icon\"\n                    [class.k-i-arrow-e]=\"!vertical\"\n                    [class.k-i-arrow-n]=\"vertical\"\n                >\n                </span>\n            </span>\n            <ul kendoSliderTicks\n                #ticks\n                *ngIf=\"tickPlacement !== 'none'\"\n                [tickTitle]=\"title\"\n                [vertical]=\"vertical\"\n                [step]=\"smallStep\"\n                [largeStep]=\"largeStep\"\n                [min]=\"min\"\n                [max]=\"max\"\n                [labelTemplate]=\"labelTemplate?.templateRef\"\n                [attr.aria-hidden]=\"true\"\n            >\n            </ul>\n            <div #track class=\"k-slider-track\">\n                <div #sliderSelection class=\"k-slider-selection\">\n                </div>\n                <a #draghandle\n                    role=\"slider\"\n                    [attr.aria-valuemin]=\"min\"\n                    [attr.aria-valuemax]=\"max\"\n                    [attr.aria-valuenow]=\"currentValue\"\n                    [attr.aria-valuetext]=\"currentValue\"\n                    [attr.aria-disabled]=\"disabled ? true : undefined\"\n                    [attr.aria-readonly]=\"readonly ? true : undefined\"\n                    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                    [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                    class=\"k-draghandle\"\n                    [title]=\"dragHandleMessage\"\n                    [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n                    [id]=\"focusableId\"\n                    kendoDraggable\n                    (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n                    (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n                    (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                ></a>\n            </div>\n            <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n        </div>\n  "
+            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n            increment=\"increment\"\n            i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n            decrement=\"decrement\"\n            i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n            dragHandle=\"Drag\"\n        >\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-buttons]=\"showButtons\"\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <button *ngIf=\"showButtons\" type=\"button\" #decreaseButton\n                class=\"k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n                [title]=\"decrementMessage\"\n                [attr.tabindex]=\"-1\"\n                role=\"presentation\">\n                    <span class=\"k-button-icon k-icon\"\n                        [class.k-i-arrow-w]=\"!vertical\"\n                        [class.k-i-arrow-s]=\"vertical\">\n                    </span>\n            </button>\n            <div class=\"k-slider-track-wrap\">\n                <ul kendoSliderTicks\n                    #ticks\n                    *ngIf=\"tickPlacement !== 'none'\"\n                    [tickTitle]=\"title\"\n                    [vertical]=\"vertical\"\n                    [step]=\"smallStep\"\n                    [largeStep]=\"largeStep\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [labelTemplate]=\"labelTemplate?.templateRef\"\n                    [attr.aria-hidden]=\"true\"\n                >\n                </ul>\n                <div #track class=\"k-slider-track\">\n                    <div #sliderSelection class=\"k-slider-selection\">\n                    </div>\n                    <a #draghandle\n                        role=\"slider\"\n                        [attr.aria-valuemin]=\"min\"\n                        [attr.aria-valuemax]=\"max\"\n                        [attr.aria-valuenow]=\"currentValue\"\n                        [attr.aria-valuetext]=\"currentValue\"\n                        [attr.aria-disabled]=\"disabled ? true : undefined\"\n                        [attr.aria-readonly]=\"readonly ? true : undefined\"\n                        [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                        [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                        class=\"k-draghandle\"\n                        [title]=\"dragHandleMessage\"\n                        [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n                        [id]=\"focusableId\"\n                        kendoDraggable\n                        (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n                        (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n                        (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                    ></a>\n                </div>\n            </div>\n            <button *ngIf=\"showButtons\" type=\"button\" #increaseButton\n                class=\"k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n                [title]=\"incrementMessage\"\n                (click)=\"$event.preventDefault()\"\n                [attr.tabindex]=\"-1\"\n                [attr.aria-label]=\"currentValue\"\n                role=\"presentation\">\n                    <span class=\"k-button-icon k-icon\"\n                        [class.k-i-arrow-e]=\"!vertical\"\n                        [class.k-i-arrow-n]=\"vertical\">\n                    </span>\n            </button>\n            <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n        </div>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             core_1.Injector,

package/dist/npm/sliders-common/slider-model.base.js

@@ -22,8 +22,10 @@ var SliderModelBase = /** @class */ (function () {
     }
     SliderModelBase.prototype.resizeTrack = function () {
         var orientation = this.props.vertical ? 'height' : 'width';
+        var altOrientation = this.props.vertical ? 'width' : 'height';
         var trackWidth = this.trackWidth();
-        this.track.style[orientation] = trackWidth + "px";
+        this.track.parentElement.style[orientation] = trackWidth + "px";
+        this.track.parentElement.style[altOrientation] = '';
     };
     SliderModelBase.prototype.resizeTicks = function (ticksContainer, ticks) {
         var _this = this;
@@ -35,22 +37,17 @@ var SliderModelBase = /** @class */ (function () {
     };
     SliderModelBase.prototype.resizeWrapper = function () {
         var dimension = this.props.vertical ? "height" : "width";
-        var wrapperSize = this.elementSize(this.wrapper);
-        var trackWidth = sliders_util_1.calculateTrackSize(wrapperSize, this.elementOffset(this.track));
         var fixedTrackWidth = sliders_util_1.calculateFixedTrackSize(this.props);
         var wrapperParentEl = this.wrapper.parentElement;
-        if (trackWidth > fixedTrackWidth) {
-            wrapperParentEl.style[dimension] = wrapperSize - (trackWidth - fixedTrackWidth) + "px";
-        }
-        else {
-            wrapperParentEl.style[dimension] = wrapperSize + (fixedTrackWidth - trackWidth) + "px";
+        if (fixedTrackWidth) {
+            wrapperParentEl.style[dimension] = "auto";
         }
     };
     SliderModelBase.prototype.trackWidth = function () {
         if (this.props.fixedTickWidth) {
             return sliders_util_1.calculateFixedTrackSize(this.props);
         }
-        return sliders_util_1.calculateTrackSize(this.elementSize(this.wrapper), this.elementOffset(this.track), this.props.buttons);
+        return this.elementSize(this.track.parentElement);
     };
     SliderModelBase.prototype.getTickSizes = function () {
         var _a = this.props, min = _a.min, max = _a.max, smallStep = _a.smallStep;

package/dist/npm/sliders-common/slider-ticks.component.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 /* tslint:disable:component-selector */
 var core_1 = require("@angular/core");
-var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var sliders_util_1 = require("./sliders-util");
 /**
  * @hidden
@@ -25,8 +24,7 @@ var SliderTick = /** @class */ (function () {
  * @hidden
  */
 var SliderTicksComponent = /** @class */ (function () {
-    function SliderTicksComponent(rtl) {
-        this.rtl = rtl;
+    function SliderTicksComponent() {
         this.wrapperClasses = 'k-reset k-slider-items';
         this.ticks = [];
     }
@@ -49,9 +47,6 @@ var SliderTicksComponent = /** @class */ (function () {
                 result[i].classes['k-tick-large'] = true;
             }
         }
-        if (this.rtl || this.vertical) {
-            result = result.reverse();
-        }
         if (result.length > 0) {
             Object.assign(result[0].classes, this.endTickClasses(true));
             Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
@@ -104,9 +99,7 @@ var SliderTicksComponent = /** @class */ (function () {
         core_1.Component({
             selector: '[kendoSliderTicks]',
             template: "\n    <li #tickElement *ngFor=\"let tick of ticks;\"\n        [ngClass]=\"tick.classes\"\n        title=\"{{ tickTitle(tick.value) }}\"\n        role=\"presentation\"\n     >\n         <ng-container [ngSwitch]=\"tick.large\">\n            <span class=\"k-label\" *ngSwitchCase=\"true\">\n                <ng-container [ngTemplateOutlet]=\"labelTemplate || defaultLabel\" [ngTemplateOutletContext]=\"tick\">\n                </ng-container>\n            </span>\n            <ng-container *ngSwitchCase=\"false\">&nbsp;</ng-container>\n         </ng-container>\n     </li>\n\n     <ng-template #defaultLabel let-value=\"value\">\n        {{ tickTitle(value) }}\n     </ng-template>\n  "
-        }),
-        tslib_1.__param(0, core_1.Optional()), tslib_1.__param(0, core_1.Inject(kendo_angular_l10n_1.RTL)),
-        tslib_1.__metadata("design:paramtypes", [Boolean])
+        })
     ], SliderTicksComponent);
     return SliderTicksComponent;
 }());

package/dist/npm/sliders-common/sliders-util.js

@@ -51,14 +51,13 @@ exports.calculateValueFromTick = function (index, _a) {
  * @hidden
  */
 exports.calculateHandlePosition = function (_a) {
-    var handleWidth = _a.handleWidth, trackWidth = _a.trackWidth, min = _a.min, max = _a.max, reverse = _a.reverse, value = _a.value;
-    var halfHandleWidth = Math.floor(handleWidth / 2);
+    var trackWidth = _a.trackWidth, min = _a.min, max = _a.max, reverse = _a.reverse, value = _a.value;
     var step = trackWidth / Math.abs(max - min);
     var pos = utils_1.isPresent(value) ? step * (value - min) : min;
     if (reverse) {
         pos = trackWidth - pos;
     }
-    return Math.floor(pos - halfHandleWidth);
+    return Math.floor(pos);
 };
 /**
  * @hidden

package/dist/npm/textbox/textbox.component.js

@@ -745,7 +745,7 @@ var TextBoxComponent = /** @class */ (function () {
                 { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return TextBoxComponent_1; }) }
             ],
             selector: 'kendo-textbox',
-            template: "\n        <ng-container kendoTextBoxLocalizedMessages\n            i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n            clear=\"Clear\">\n        </ng-container>\n        <span class=\"k-input-prefix\">\n            <ng-template\n                *ngIf=\"prefixTemplate\"\n                [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n        <input\n            class=\"k-input-inner\"\n            #input\n            [id]=\"focusableId\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.tabindex]=\"disabled ? undefined : tabindex\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\"/>\n        <span class=\"k-input-suffix\">\n            <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n            <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n            <span\n                role=\"button\"\n                class=\"k-clear-value\"\n                *ngIf=\"showClearButton\"\n                (click)=\"clearValue()\"\n                (mousedown)=\"$event.preventDefault()\"\n                [tabindex]=\"tabIndex\"\n                [attr.aria-label]=\"clearTitle()\"\n                [title]=\"clearTitle()\"\n                (keydown.enter)=\"clearValue($event)\"\n                (keydown.space)=\"clearValue($event)\"\n                >\n                <span [ngClass]=\"clearButtonClasses\"></span>\n            </span>\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
+            template: "\n        <ng-container kendoTextBoxLocalizedMessages\n            i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n            clear=\"Clear\">\n        </ng-container>\n        <span class=\"k-input-prefix\">\n            <ng-template\n                *ngIf=\"prefixTemplate\"\n                [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n        <input #input\n            class=\"k-input-inner\"\n            [id]=\"focusableId\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.tabindex]=\"disabled ? undefined : tabindex\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\"\n        />\n        <span\n            role=\"button\"\n            class=\"k-clear-value\"\n            *ngIf=\"showClearButton\"\n            (click)=\"clearValue()\"\n            (mousedown)=\"$event.preventDefault()\"\n            [tabindex]=\"tabIndex\"\n            [attr.aria-label]=\"clearTitle()\"\n            [title]=\"clearTitle()\"\n            (keydown.enter)=\"clearValue($event)\"\n            (keydown.space)=\"clearValue($event)\">\n                <span [ngClass]=\"clearButtonClasses\"></span>\n        </span>\n        <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n        <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n        <span class=\"k-input-suffix\">\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             core_1.NgZone,