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

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

@@ -29,8 +29,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");
         }
@@ -40,8 +39,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");
         }
@@ -50,12 +48,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));

package/dist/es/rangeslider/rangeslider.component.js

@@ -453,7 +453,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  "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             Injector,

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

@@ -23,16 +23,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/es/slider/slider.component.js

@@ -293,7 +293,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');
@@ -468,7 +468,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  "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             Injector,

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

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { calculateTrackSize, calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
+import { calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
 import { subtract } from '../common/math';
 /**
  * @hidden
@@ -20,8 +20,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;
@@ -33,22 +35,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;

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

@@ -4,8 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 /* tslint:disable:component-selector */
-import { Component, Inject, Input, Optional, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
-import { RTL } from '@progress/kendo-angular-l10n';
+import { Component, Input, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
 import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
 /**
  * @hidden
@@ -23,8 +22,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 = [];
     }
@@ -47,9 +45,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));
@@ -102,9 +97,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  "
-        }),
-        tslib_1.__param(0, Optional()), tslib_1.__param(0, Inject(RTL)),
-        tslib_1.__metadata("design:paramtypes", [Boolean])
+        })
     ], SliderTicksComponent);
     return SliderTicksComponent;
 }());

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

@@ -49,14 +49,13 @@ export var calculateValueFromTick = function (index, _a) {
  * @hidden
  */
 export 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

package/dist/es/textbox/textbox.component.js

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

package/dist/es2015/colorpicker/color-gradient.component.js

@@ -10,6 +10,7 @@ import { BehaviorSubject, Subject } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isChanged, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
+import { validatePackage } from '@progress/kendo-licensing';
 import { containsFocus, isUntouched } from '../common/dom-utils';
 import { parseColor, getHSV, getColorFromHSV, getColorFromHue } from './utils';
 import { isPresent, fitIntoBounds } from '../common/utils';
@@ -17,6 +18,7 @@ import { SliderComponent } from '../slider/slider.component';
 import { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
 import { ColorInputComponent } from './color-input.component';
 import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED } from './constants';
+import { packageMetadata } from '../package-metadata';
 let serial = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -95,6 +97,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.updateValues = new Subject();
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });

package/dist/es2015/colorpicker/color-input.component.js

@@ -183,7 +183,7 @@ ColorInputComponent = tslib_1.__decorate([
             <input
                 #hexInput
                 [id]="focusableId"
-                class="k-textbox k-hex-value"
+                class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [value]="hex || ''"

package/dist/es2015/colorpicker/color-palette.component.d.ts

@@ -4,9 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { OnInit, EventEmitter, SimpleChanges, OnChanges, OnDestroy, ChangeDetectorRef, Renderer2, ElementRef, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { TileSize, OutputFormat, TableCell } from './models';
 import { ColorPaletteService } from './services/color-palette.service';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
 /**
  * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
  * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.

package/dist/es2015/colorpicker/color-palette.component.js

@@ -6,13 +6,15 @@ import * as tslib_1 from "tslib";
 var ColorPaletteComponent_1;
 import { Component, Input, EventEmitter, Output, HostBinding, HostListener, forwardRef, ChangeDetectorRef, Renderer2, ElementRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Keys, KendoInput, guid } from '@progress/kendo-angular-common';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { ColorPaletteLocalizationService } from './localization/colorpalette-localization.service';
+import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
 import { parseColor } from './utils';
 import { isPresent } from '../common/utils';
 import { ColorPaletteService } from './services/color-palette.service';
-import { Keys, KendoInput, guid } from '@progress/kendo-angular-common';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { ColorPaletteLocalizationService } from './localization/colorpalette-localization.service';
 const DEFAULT_TILE_SIZE = 24;
 const DEFAULT_COLUMNS_COUNT = 10;
 const DEFAULT_PRESET = 'office';
@@ -85,6 +87,7 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
         this._tabindex = 0;
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });

package/dist/es2015/colorpicker/colorpicker.component.d.ts

@@ -23,7 +23,13 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private ngZone;
     private renderer;
     hostClasses: boolean;
+    readonly focusedClass: boolean;
+    readonly disabledClass: boolean;
+    readonly ariaReadonly: boolean;
+    readonly ariaExpanded: boolean;
+    readonly hostTabindex: number;
     direction: string;
+    role: string;
     /**
      * @hidden
      */
@@ -33,6 +39,10 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * By default both the gradient and palette views will be rendered.
      */
     views: Array<ColorPickerView>;
+    /**
+     * @hidden
+     */
+    view: ColorPickerView;
     /**
      * Sets the initially active view in the popup. The property supports two-way binding.
      *
@@ -223,7 +233,7 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * for example, inside the component markup.
      */
     container: ViewContainerRef;
-    private wrapper;
+    private activeColor;
     private popupTemplate;
     private flatColorPicker;
     private popupRef;
@@ -236,15 +246,12 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private _rounded;
     private _fillMode;
     private dynamicRTLSubscription;
+    private subscriptions;
     constructor(host: ElementRef, popupService: PopupService, cdr: ChangeDetectorRef, localizationService: LocalizationService, ngZone: NgZone, renderer: Renderer2);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
-    /**
-     * @hidden
-     */
-    readonly colorPickerAriaLabel: string;
     /**
      * @hidden
      */
@@ -256,7 +263,7 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     /**
      * @hidden
      */
-    handleActiveColorClick(): void;
+    handleWrapperClick(event: MouseEvent): void;
     /**
      * Focuses the wrapper of the ColorPicker.
      */
@@ -273,6 +280,10 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * @hidden
      */
     handleWrapperBlur(): void;
+    /**
+     * @hidden
+     */
+    arrowButtonMouseDown(ev: MouseEvent): void;
     /**
      * Clears the value of the ColorPicker.
      */
@@ -321,6 +332,7 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty(): boolean;
+    private setHostElementAriaLabel;
     private handleClasses;
     private popupBlurInvalid;
     private toggleWithEvents;
@@ -331,4 +343,8 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private readonly lastFocusableElement;
     private notifyNgTouched;
     private notifyNgChanged;
+    private handleDomEvents;
+    private initDomEvents;
+    private domFocusListener;
+    private handleHostId;
 }