@progress/kendo-angular-inputs 8.0.0-dev.202201121416 → 8.0.1-dev.202201201319

package/dist/fesm5/index.js

@@ -155,16 +155,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
  */
@@ -192,14 +182,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
@@ -368,8 +357,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;
@@ -381,22 +372,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;
@@ -463,16 +449,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;
         }
@@ -530,7 +514,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641996688,
+    publishDate: 1642684556,
     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'
 };
@@ -1164,7 +1148,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');
@@ -1339,7 +1323,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            <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            <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            <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,
@@ -1374,8 +1358,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");
         }
@@ -1385,8 +1368,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");
         }
@@ -1395,12 +1377,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));
@@ -1844,7 +1825,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,
@@ -1965,7 +1946,7 @@ var SwitchComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * Specifies the size of the Switch.
+         * Specifies the width and height of the Switch.
          *
          * The possible values are:
          * * `'small'`
@@ -3253,7 +3234,7 @@ var NumericTextBoxComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the NumericTextBox
+         * The size property specifies padding of the NumericTextBox internal input element
          * ([see example]({% slug appearance_numerictextbox %}#toc-size)).
          * The possible values are:
          * * `'small'`
@@ -4677,7 +4658,7 @@ var MaskedTextBoxComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the MaskedTextBox
+         * The size property specifies the padding of the MaskedTextBox internal input element
          * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
          * The possible values are:
          * * `'small'`
@@ -5208,8 +5189,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 = [];
     }
@@ -5232,9 +5212,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));
@@ -5287,9 +5264,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;
 }());
@@ -6129,7 +6104,7 @@ var TextBoxComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the TextBox
+         * The size property specifies the padding of the TextBox internal input element
          * ([see example]({% slug appearance_textbox %}#toc-size)).
          *
          * The possible values are:
@@ -7173,7 +7148,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the TextArea
+         * The size property specifies the padding of the internal textarea element
          * ([see example]({% slug appearance_textarea %}#toc-size)).
          *
          * The possible values are:
@@ -7555,7 +7530,8 @@ var TextAreaComponent = /** @class */ (function (_super) {
                 { provide: KendoInput, useExisting: forwardRef(function () { return TextAreaComponent_1; }) }
             ],
             selector: 'kendo-textarea',
-            template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input-inner\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    "
+            template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input-inner\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    ",
+            styles: ["\n        :host(.k-flex-col) {\n            flex-direction: column !important;\n        }\n        :host(.k-flex-row) {\n            flex-direction: row !important;\n        }\n    "]
         }),
         __metadata("design:paramtypes", [LocalizationService,
             NgZone,
@@ -10518,7 +10494,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the ColorPicker
+         * The size property specifies the padding of the ColorPicker internal elements
          * ([see example]({% slug appearance_colorpicker %}#toc-size)).
          *
          * The possible values are:
@@ -12426,4 +12402,4 @@ var InputsModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { CheckBoxModule, ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };
+export { ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, CheckBoxModule, RadioButtonModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };

package/dist/npm/colorpicker/colorpicker.component.js

@@ -278,7 +278,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the ColorPicker
+         * The size property specifies the padding of the ColorPicker internal elements
          * ([see example]({% slug appearance_colorpicker %}#toc-size)).
          *
          * The possible values are:

package/dist/npm/index.js

@@ -9,8 +9,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./main"), exports);
-var checkbox_module_1 = require("./checkbox.module");
-exports.CheckBoxModule = checkbox_module_1.CheckBoxModule
 var color_contrast_svg_component_1 = require("./colorpicker/color-contrast-svg.component");
 exports.ColorContrastSvgComponent = color_contrast_svg_component_1.ColorContrastSvgComponent
 var color_input_component_1 = require("./colorpicker/color-input.component");
@@ -45,8 +43,6 @@ var masking_service_1 = require("./maskedtextbox/masking.service");
 exports.MaskingService = masking_service_1.MaskingService
 var messages_2 = require("./numerictextbox/localization/messages");
 exports.NumericTextBoxMessages = messages_2.NumericTextBoxMessages
-var radiobutton_module_1 = require("./radiobutton.module");
-exports.RadioButtonModule = radiobutton_module_1.RadioButtonModule
 var custom_messages_component_2 = require("./rangeslider/localization/custom-messages.component");
 exports.RangeSliderCustomMessagesComponent = custom_messages_component_2.RangeSliderCustomMessagesComponent
 var messages_3 = require("./rangeslider/localization/messages");

package/dist/npm/main.js

@@ -41,6 +41,10 @@ var textbox_module_1 = require("./textbox.module");
 exports.TextBoxModule = textbox_module_1.TextBoxModule;
 var textarea_module_1 = require("./textarea.module");
 exports.TextAreaModule = textarea_module_1.TextAreaModule;
+var checkbox_module_1 = require("./checkbox.module");
+exports.CheckBoxModule = checkbox_module_1.CheckBoxModule;
+var radiobutton_module_1 = require("./radiobutton.module");
+exports.RadioButtonModule = radiobutton_module_1.RadioButtonModule;
 // All ColorPicker Components
 var colorpicker_component_1 = require("./colorpicker/colorpicker.component");
 exports.ColorPickerComponent = colorpicker_component_1.ColorPickerComponent;

package/dist/npm/maskedtextbox/maskedtextbox.component.js

@@ -210,7 +210,7 @@ var MaskedTextBoxComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the MaskedTextBox
+         * The size property specifies the padding of the MaskedTextBox internal input element
          * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
          * The possible values are:
          * * `'small'`

package/dist/npm/numerictextbox/numerictextbox.component.js

@@ -337,7 +337,7 @@ var NumericTextBoxComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the NumericTextBox
+         * The size property specifies padding of the NumericTextBox internal input element
          * ([see example]({% slug appearance_numerictextbox %}#toc-size)).
          * The possible values are:
          * * `'small'`

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: 1641996688,
+    publishDate: 1642684556,
     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/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            <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            <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            <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/switch/switch.component.js

@@ -124,7 +124,7 @@ var SwitchComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * Specifies the size of the Switch.
+         * Specifies the width and height of the Switch.
          *
          * The possible values are:
          * * `'small'`