@progress/kendo-angular-inputs 7.5.1-dev.202110280909 → 7.5.3

package/dist/fesm5/index.js

@@ -10,7 +10,7 @@ import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, thro
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages, MessageService } from '@progress/kendo-angular-l10n';
 import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
-import { browser, mobileOS } from '@progress/kendo-common';
+import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { CommonModule } from '@angular/common';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
@@ -118,16 +118,6 @@ var calculateFixedTrackSize = function (_a) {
     var max = _a.max, min = _a.min, smallStep = _a.smallStep, fixedTickWidth = _a.fixedTickWidth;
     return ((max - min) / smallStep) * fixedTickWidth;
 };
-/**
- * @hidden
- */
-var calculateTrackSize = function (wrapperWidth, offset, showButtons) {
-    if (showButtons === void 0) { showButtons = true; }
-    var BUTTONS_COUNT = 2;
-    var trackOffset = showButtons ? parseFloat(offset) * BUTTONS_COUNT : 0;
-    var trackWidth = wrapperWidth - trackOffset;
-    return Math.floor(trackWidth);
-};
 /**
  * @hidden
  */
@@ -155,14 +145,13 @@ var calculateValueFromTick = function (index, _a) {
  * @hidden
  */
 var 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 = isPresent(value) ? step * (value - min) : min;
     if (reverse) {
         pos = trackWidth - pos;
     }
-    return Math.floor(pos - halfHandleWidth);
+    return Math.floor(pos);
 };
 /**
  * @hidden
@@ -331,8 +320,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;
@@ -344,22 +335,17 @@ var SliderModelBase = /** @class */ (function () {
     };
     SliderModelBase.prototype.resizeWrapper = function () {
         var dimension = this.props.vertical ? "height" : "width";
-        var wrapperSize = this.elementSize(this.wrapper);
-        var trackWidth = calculateTrackSize(wrapperSize, this.elementOffset(this.track));
         var fixedTrackWidth = 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 calculateFixedTrackSize(this.props);
         }
-        return 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;
@@ -426,16 +412,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;
         }
@@ -493,7 +477,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635411998,
+    publishDate: 1642518309,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -1127,7 +1111,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');
@@ -1302,7 +1286,7 @@ var SliderComponent = /** @class */ (function (_super) {
                 { provide: KendoInput, useExisting: 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  "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             Injector,
@@ -1337,8 +1321,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");
         }
@@ -1348,8 +1331,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");
         }
@@ -1358,12 +1340,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;
 }(SliderModelBase));
@@ -1807,7 +1788,7 @@ var RangeSliderComponent = /** @class */ (function (_super) {
                 { provide: KendoInput, useExisting: 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  "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             Injector,
@@ -5096,8 +5077,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 = [];
     }
@@ -5120,9 +5100,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));
@@ -5175,9 +5152,7 @@ var SliderTicksComponent = /** @class */ (function () {
         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  "
-        }),
-        __param(0, Optional()), __param(0, Inject(RTL)),
-        __metadata("design:paramtypes", [Boolean])
+        })
     ], SliderTicksComponent);
     return SliderTicksComponent;
 }());
@@ -5736,6 +5711,25 @@ var MaskedTextBoxModule = /** @class */ (function () {
     return MaskedTextBoxModule;
 }());
 
+/**
+ * @hidden
+ *
+ * Returns true if the used browser is Safari.
+ */
+var isSafari = function (userAgent) {
+    return detectDesktopBrowser(userAgent).safari ||
+        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
+};
+/**
+ * @hidden
+ *
+ * Checks if input is Japanese IME
+ */
+var isJapanese = function (input) {
+    var japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
+    return japaneseRegex.test(input);
+};
+
 /**
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
  *  @example
@@ -5981,7 +5975,7 @@ var TextBoxComponent = /** @class */ (function () {
          * @hidden
          */
         this.handleInput = function (ev) {
-            var incomingValue = ev.target.value;
+            var incomingValue = isSafari(navigator.userAgent) && isJapanese(ev.target.value) ? ev.data : ev.target.value;
             _this.updateValue(incomingValue);
         };
         this.ngChange = function (_) { };

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635411998,
+    publishDate: 1642518309,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

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/shared/utils.js

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var kendo_common_1 = require("@progress/kendo-common");
+/**
+ * @hidden
+ *
+ * Returns true if the used browser is Safari.
+ */
+exports.isSafari = function (userAgent) {
+    return kendo_common_1.detectDesktopBrowser(userAgent).safari ||
+        (kendo_common_1.detectMobileOS(userAgent) && kendo_common_1.detectMobileOS(userAgent).browser === 'mobilesafari');
+};
+/**
+ * @hidden
+ *
+ * Checks if input is Japanese IME
+ */
+exports.isJapanese = function (input) {
+    var japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
+    return japaneseRegex.test(input);
+};

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

@@ -5,17 +5,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var utils_1 = require("./../shared/utils");
 var dom_utils_1 = require("./../common/dom-utils");
 var forms_1 = require("@angular/forms");
 var core_1 = require("@angular/core");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
 var package_metadata_1 = require("../package-metadata");
 var dom_utils_2 = require("../common/dom-utils");
-var utils_1 = require("../common/utils");
+var utils_2 = require("../common/utils");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var textbox_suffix_directive_1 = require("./textbox-suffix.directive");
 var textbox_prefix_directive_1 = require("./textbox-prefix.directive");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var utils_3 = require("../shared/utils");
 var FOCUSED = 'k-state-focused';
 var TextBoxComponent = /** @class */ (function () {
     function TextBoxComponent(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
@@ -188,7 +190,7 @@ var TextBoxComponent = /** @class */ (function () {
          */
         this.handleInputBlur = function () {
             _this.changeDetector.markForCheck();
-            if (kendo_angular_common_1.hasObservers(_this.inputBlur) || utils_1.requiresZoneOnBlur(_this.control)) {
+            if (kendo_angular_common_1.hasObservers(_this.inputBlur) || utils_2.requiresZoneOnBlur(_this.control)) {
                 _this.ngZone.run(function () {
                     _this.ngTouched();
                     _this.inputBlur.emit();
@@ -199,7 +201,7 @@ var TextBoxComponent = /** @class */ (function () {
          * @hidden
          */
         this.handleInput = function (ev) {
-            var incomingValue = ev.target.value;
+            var incomingValue = utils_3.isSafari(navigator.userAgent) && utils_1.isJapanese(ev.target.value) ? ev.data : ev.target.value;
             _this.updateValue(incomingValue);
         };
         this.ngChange = function (_) { };
@@ -483,7 +485,7 @@ var TextBoxComponent = /** @class */ (function () {
     };
     TextBoxComponent.prototype.updateValue = function (value) {
         var _this = this;
-        if (!utils_1.areSame(this.value, value)) {
+        if (!utils_2.areSame(this.value, value)) {
             this.ngZone.run(function () {
                 _this.value = value;
                 _this.ngChange(value);