@progress/kendo-angular-inputs 8.0.0-dev.202201101634 → 8.0.0

package/dist/fesm2015/index.js

@@ -8,7 +8,7 @@ import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages, MessageService } from '@progress/kendo-angular-l10n';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, closest } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -150,15 +150,6 @@ const remainder = (dividend, divisor) => {
  * @hidden
  */
 const calculateFixedTrackSize = ({ max, min, smallStep, fixedTickWidth }) => ((max - min) / smallStep) * fixedTickWidth;
-/**
- * @hidden
- */
-const calculateTrackSize = (wrapperWidth, offset, showButtons = true) => {
-    const BUTTONS_COUNT = 2;
-    const trackOffset = showButtons ? parseFloat(offset) * BUTTONS_COUNT : 0;
-    const trackWidth = wrapperWidth - trackOffset;
-    return Math.floor(trackWidth);
-};
 /**
  * @hidden
  */
@@ -181,14 +172,13 @@ const calculateValueFromTick = (index, { max, min, smallStep, reverse, vertical
 /**
  * @hidden
  */
-const calculateHandlePosition = ({ handleWidth, trackWidth, min, max, reverse, value }) => {
-    const halfHandleWidth = Math.floor(handleWidth / 2);
+const calculateHandlePosition = ({ trackWidth, min, max, reverse, value }) => {
     const step = trackWidth / Math.abs(max - min);
     let pos = isPresent(value) ? step * (value - min) : min;
     if (reverse) {
         pos = trackWidth - pos;
     }
-    return Math.floor(pos - halfHandleWidth);
+    return Math.floor(pos);
 };
 /**
  * @hidden
@@ -351,8 +341,10 @@ class SliderModelBase {
     }
     resizeTrack() {
         const orientation = this.props.vertical ? 'height' : 'width';
+        const altOrientation = this.props.vertical ? 'width' : 'height';
         const trackWidth = this.trackWidth();
-        this.track.style[orientation] = `${trackWidth}px`;
+        this.track.parentElement.style[orientation] = `${trackWidth}px`;
+        this.track.parentElement.style[altOrientation] = '';
     }
     resizeTicks(ticksContainer, ticks) {
         const dimension = this.props.vertical ? "height" : "width";
@@ -363,22 +355,17 @@ class SliderModelBase {
     }
     resizeWrapper() {
         const dimension = this.props.vertical ? "height" : "width";
-        const wrapperSize = this.elementSize(this.wrapper);
-        const trackWidth = calculateTrackSize(wrapperSize, this.elementOffset(this.track));
         const fixedTrackWidth = calculateFixedTrackSize(this.props);
         const 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";
         }
     }
     trackWidth() {
         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);
     }
     getTickSizes() {
         const { min, max, smallStep } = this.props;
@@ -440,16 +427,14 @@ class SliderModel extends SliderModelBase {
             max,
             reverse,
             value,
-            trackWidth,
-            handleWidth: dragHandle.offsetWidth
+            trackWidth
         });
         this.renderer.setStyle(dragHandle, position, `${this.handlePosition}px`);
     }
-    positionSelection(dragHandle, selection) {
+    positionSelection(selection) {
         const { reverse, vertical } = this.props;
         const dimension = vertical ? 'height' : 'width';
-        const handleWidth = Math.floor(dragHandle.offsetWidth / 2);
-        let size = this.handlePosition + handleWidth;
+        let size = this.handlePosition;
         if (reverse) {
             size = this.trackWidth() - size;
         }
@@ -482,7 +467,7 @@ const containsFocus = (hostElement, contender) => hostElement && contender && (h
 /**
  * @hidden
  */
-const closest = (node, predicate) => {
+const closest$1 = (node, predicate) => {
     while (node && !predicate(node)) {
         node = node.parentNode;
     }
@@ -496,7 +481,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641832234,
+    publishDate: 1642572427,
     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'
 };
@@ -1068,7 +1053,7 @@ let SliderComponent = SliderComponent_1 = class SliderComponent extends SliderBa
             model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(element => 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');
@@ -1256,6 +1241,44 @@ SliderComponent = SliderComponent_1 = __decorate([
                         [class.k-i-arrow-s]="vertical">
                     </span>
             </button>
+            <div class="k-slider-track-wrap">
+                <ul kendoSliderTicks
+                    #ticks
+                    *ngIf="tickPlacement !== 'none'"
+                    [tickTitle]="title"
+                    [vertical]="vertical"
+                    [step]="smallStep"
+                    [largeStep]="largeStep"
+                    [min]="min"
+                    [max]="max"
+                    [labelTemplate]="labelTemplate?.templateRef"
+                    [attr.aria-hidden]="true"
+                >
+                </ul>
+                <div #track class="k-slider-track">
+                    <div #sliderSelection class="k-slider-selection">
+                    </div>
+                    <a #draghandle
+                        role="slider"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="currentValue"
+                        [attr.aria-valuetext]="currentValue"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="dragHandleMessage"
+                        [attr.tabindex]="disabled ? '-1' : tabIndex"
+                        [id]="focusableId"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress, $event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag, $event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
+                </div>
+            </div>
             <button *ngIf="showButtons" type="button" #increaseButton
                 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"
                 [title]="incrementMessage"
@@ -1268,42 +1291,6 @@ SliderComponent = SliderComponent_1 = __decorate([
                         [class.k-i-arrow-n]="vertical">
                     </span>
             </button>
-            <ul kendoSliderTicks
-                #ticks
-                *ngIf="tickPlacement !== 'none'"
-                [tickTitle]="title"
-                [vertical]="vertical"
-                [step]="smallStep"
-                [largeStep]="largeStep"
-                [min]="min"
-                [max]="max"
-                [labelTemplate]="labelTemplate?.templateRef"
-                [attr.aria-hidden]="true"
-            >
-            </ul>
-            <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
-                </div>
-                <a #draghandle
-                    role="slider"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="currentValue"
-                    [attr.aria-valuetext]="currentValue"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="dragHandleMessage"
-                    [attr.tabindex]="disabled ? '-1' : tabIndex"
-                    [id]="focusableId"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress, $event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag, $event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
-            </div>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
         </div>
   `
@@ -1335,8 +1322,7 @@ class RangeSliderModel extends SliderModelBase {
                 max,
                 reverse,
                 value,
-                trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth
             });
             this.renderer.setStyle(dragHandle, position, `${this.startHandlePosition}px`);
         }
@@ -1346,8 +1332,7 @@ class RangeSliderModel extends SliderModelBase {
                 max,
                 reverse,
                 value,
-                trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth
             });
             this.renderer.setStyle(dragHandle, position, `${this.endHandlePosition}px`);
         }
@@ -1356,12 +1341,11 @@ class RangeSliderModel extends SliderModelBase {
         const { reverse, vertical } = this.props;
         const dimension = vertical ? 'height' : 'width';
         const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
-        const handleWidth = Math.floor(dragHandle.offsetWidth / 2);
         const size = Math.abs(this.endHandlePosition - this.startHandlePosition);
         const 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');
     }
 }
 
@@ -1794,62 +1778,63 @@ RangeSliderComponent = RangeSliderComponent_1 = __decorate([
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <ul kendoSliderTicks
-                #ticks
-                *ngIf="tickPlacement !== 'none'"
-                [tickTitle]="title"
-                [vertical]="vertical"
-                [step]="smallStep"
-                [largeStep]="largeStep"
-                [min]="min"
-                [max]="max"
-                [labelTemplate]="labelTemplate?.templateRef"
-                [attr.aria-hidden]="true"
-            >
-            </ul>
-            <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
+            <div class="k-slider-track-wrap">
+                <ul kendoSliderTicks
+                    #ticks
+                    *ngIf="tickPlacement !== 'none'"
+                    [tickTitle]="title"
+                    [vertical]="vertical"
+                    [step]="smallStep"
+                    [largeStep]="largeStep"
+                    [min]="min"
+                    [max]="max"
+                    [labelTemplate]="labelTemplate?.templateRef"
+                    [attr.aria-hidden]="true"
+                >
+                </ul>
+                <div #track class="k-slider-track">
+                    <div #sliderSelection class="k-slider-selection">
+                    </div>
+                    <a #draghandleStart
+                        role="slider"
+                        [id]="startHandleId"
+                        [attr.tabindex]="disabled ? undefined : tabindex"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="value ? value[0] : null"
+                        [attr.aria-valuetext]="valueText"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="textFor('dragHandleStart')"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress ,$event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
+                    <a #draghandleEnd
+                        role="slider"
+                        [id]="endHandleId"
+                        [attr.tabindex]="disabled ? undefined : tabindex"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="value ? value[1] : null"
+                        [attr.aria-valuetext]="valueText"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="textFor('dragHandleEnd')"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress ,$event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
                 </div>
-                <a #draghandleStart
-                    role="slider"
-                    [id]="startHandleId"
-                    [attr.tabindex]="disabled ? undefined : tabindex"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="value ? value[0] : null"
-                    [attr.aria-valuetext]="valueText"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="textFor('dragHandleStart')"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress ,$event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
-                <a #draghandleEnd
-                    role="slider"
-                    [id]="endHandleId"
-                    [attr.tabindex]="disabled ? undefined : tabindex"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="value ? value[1] : null"
-                    [attr.aria-valuetext]="valueText"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="textFor('dragHandleEnd')"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress ,$event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
             </div>
-
             <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
         </div>
   `
@@ -1962,7 +1947,7 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
         return this._checked;
     }
     /**
-     * Specifies the size of the Switch.
+     * Specifies the width and height of the Switch.
      *
      * The possible values are:
      * * `'small'`
@@ -3193,7 +3178,7 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
         return this.tabindex;
     }
     /**
-     * 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'`
@@ -4575,7 +4560,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         this.updateService();
     }
     /**
-     * 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'`
@@ -5090,8 +5075,10 @@ class SliderTick {
  * @hidden
  */
 let SliderTicksComponent = class SliderTicksComponent {
-    constructor(rtl) {
-        this.rtl = rtl;
+    /**
+     * @hidden
+     */
+    constructor() {
         this.wrapperClasses = 'k-reset k-slider-items';
         this.ticks = [];
     }
@@ -5114,9 +5101,6 @@ let SliderTicksComponent = class SliderTicksComponent {
                 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));
@@ -5188,9 +5172,7 @@ SliderTicksComponent = __decorate([
         {{ tickTitle(value) }}
      </ng-template>
   `
-    }),
-    __param(0, Optional()), __param(0, Inject(RTL)),
-    __metadata("design:paramtypes", [Boolean])
+    })
 ], SliderTicksComponent);
 
 /**
@@ -5948,7 +5930,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     /**
-     * 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:
@@ -6037,7 +6019,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
                     return;
                 }
                 if (tabbing) {
-                    const closestTextbox = closest(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
+                    const closestTextbox = closest$1(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
                     if (!closestTextbox) {
                         this.handleBlur();
                     }
@@ -6962,7 +6944,7 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
         return this.tabindex;
     }
     /**
-     * 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:
@@ -7031,7 +7013,7 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
                     return;
                 }
                 if (tabbing) {
-                    const closestTextbox = closest(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
+                    const closestTextbox = closest$1(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
                     if (!closestTextbox) {
                         this.handleBlur();
                     }
@@ -7347,7 +7329,15 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
                 input: handleInput}">
             </textarea>
             <ng-content select="kendo-textarea-suffix"></ng-content>
-    `
+    `,
+        styles: [`
+        :host(.k-flex-col) {
+            flex-direction: column !important;
+        }
+        :host(.k-flex-row) {
+            flex-direction: row !important;
+        }
+    `]
     }),
     __metadata("design:paramtypes", [LocalizationService,
         NgZone,
@@ -8282,6 +8272,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';
         });
@@ -8919,6 +8910,29 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
         LocalizationService])
 ], ColorGradientComponent);
 
+/**
+ * @hidden
+ */
+let ColorPaletteLocalizationService = class ColorPaletteLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
+        super(prefix, messageService, _rtl);
+        this.flatColorPickerLocalization = flatColorPickerLocalization;
+    }
+    get(shortKey) {
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
+        }
+        return super.get(shortKey);
+    }
+};
+ColorPaletteLocalizationService = __decorate([
+    __param(0, Inject(L10N_PREFIX)),
+    __param(1, Optional()),
+    __param(2, Optional()), __param(2, Inject(RTL)),
+    __param(3, Optional()), __param(3, Inject(FlatColorPickerLocalizationService)),
+    __metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
+], ColorPaletteLocalizationService);
+
 /**
  * @hidden
  */
@@ -8981,29 +8995,6 @@ ColorPaletteService = __decorate([
     Injectable()
 ], ColorPaletteService);
 
-/**
- * @hidden
- */
-let ColorPaletteLocalizationService = class ColorPaletteLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
-        super(prefix, messageService, _rtl);
-        this.flatColorPickerLocalization = flatColorPickerLocalization;
-    }
-    get(shortKey) {
-        if (this.flatColorPickerLocalization) {
-            return this.flatColorPickerLocalization.get(shortKey);
-        }
-        return super.get(shortKey);
-    }
-};
-ColorPaletteLocalizationService = __decorate([
-    __param(0, Inject(L10N_PREFIX)),
-    __param(1, Optional()),
-    __param(2, Optional()), __param(2, Inject(RTL)),
-    __param(3, Optional()), __param(3, Inject(FlatColorPickerLocalizationService)),
-    __metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
-], ColorPaletteLocalizationService);
-
 var ColorPaletteComponent_1;
 const DEFAULT_TILE_SIZE = 24;
 const DEFAULT_COLUMNS_COUNT = 10;
@@ -9077,6 +9068,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';
         });
@@ -9669,9 +9661,9 @@ var FlatColorPickerComponent_1;
  * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPickerComponent {
-    constructor(service, host, localizationService, cdr, renderer, ngZone) {
-        this.service = service;
+    constructor(host, service, localizationService, cdr, renderer, ngZone) {
         this.host = host;
+        this.service = service;
         this.localizationService = localizationService;
         this.cdr = cdr;
         this.renderer = renderer;
@@ -9754,6 +9746,7 @@ let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPicke
         this.subscriptions = new Subscription();
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -10227,8 +10220,8 @@ FlatColorPickerComponent = FlatColorPickerComponent_1 = __decorate([
         </div>
 `
     }),
-    __metadata("design:paramtypes", [FlatColorPickerService,
-        ElementRef,
+    __metadata("design:paramtypes", [ElementRef,
+        FlatColorPickerService,
         LocalizationService,
         ChangeDetectorRef,
         Renderer2,
@@ -10236,7 +10229,7 @@ FlatColorPickerComponent = FlatColorPickerComponent_1 = __decorate([
 ], FlatColorPickerComponent);
 
 var ColorPickerComponent_1;
-let serial$2 = 0;
+const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -10252,10 +10245,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-colorpicker-${serial$2++}`;
+        this.role = 'listbox';
         /**
          * Specifies the views that will be rendered in the popup.
          * By default both the gradient and palette views will be rendered.
@@ -10351,6 +10341,10 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
          * Used to provide a two-way binding for the `activeView` property.
          */
         this.activeViewChange = new EventEmitter();
+        /**
+         * Indicates whether the ColorPicker wrapper is focused.
+         */
+        this.isFocused = false;
         this._tabindex = 0;
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
@@ -10358,13 +10352,30 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.subscriptions = new Subscription();
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
+        this.domFocusListener = (event) => event.stopImmediatePropagation();
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
+    get focusedClass() {
+        return this.isFocused;
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    get ariaReadonly() {
+        return this.readonly;
+    }
+    get ariaExpanded() {
+        return this.isOpen;
+    }
+    get hostTabindex() {
+        return this.tabindex;
+    }
     /**
      * @hidden
      */
@@ -10424,7 +10435,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * 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:
@@ -10509,6 +10520,9 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         stylingInputs.forEach(input => {
             this.handleClasses(this[input], input);
         });
+        this.setHostElementAriaLabel();
+        this.handleHostId();
+        this.initDomEvents();
     }
     ngOnChanges(changes) {
         if (changes.format && changes.format.currentValue === 'name') {
@@ -10518,18 +10532,17 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             this.format = 'rgba';
             this.value = parseColor$1(this.value, this.format, this.gradientSettings.opacity);
         }
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
     }
     ngOnDestroy() {
         this.closePopup();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
-    }
-    /**
-     * @hidden
-     */
-    get colorPickerAriaLabel() {
-        return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
+        this.subscriptions.unsubscribe();
+        this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
     }
     /**
      * @hidden
@@ -10541,28 +10554,33 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
      * @hidden
      */
     togglePopup() {
-        this.toggleWithEvents(!this.isOpen);
         this.focus();
+        this.toggleWithEvents(!this.isOpen);
     }
     /**
      * @hidden
      */
-    handleActiveColorClick() {
+    handleWrapperClick(event) {
+        if (this.disabled) {
+            return;
+        }
         this.focus();
-        const event = new ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.togglePopup();
+        if (closest(event.target, (element) => element === this.activeColor.nativeElement)) {
+            const event = new ActiveColorClickEvent(this.value);
+            this.activeColorClick.emit(event);
+            if (!event.isOpenPrevented() || this.isOpen) {
+                this.toggleWithEvents(!this.isOpen);
+            }
+            return;
         }
+        this.toggleWithEvents(!this.isOpen);
     }
     /**
      * Focuses the wrapper of the ColorPicker.
      */
     focus() {
-        if (this.disabled) {
-            return;
-        }
-        this.wrapper.nativeElement.focus();
+        this.isFocused = true;
+        this.host.nativeElement.focus();
     }
     /**
      * @hidden
@@ -10571,14 +10589,18 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (this.isFocused) {
             return;
         }
-        this.isFocused = true;
-        this.onFocus.emit();
+        this.ngZone.run(() => {
+            this.focus();
+            this.onFocus.emit();
+        });
     }
     /**
      * Blurs the ColorPicker.
      */
     blur() {
-        this.wrapper.nativeElement.blur();
+        this.isFocused = false;
+        this.host.nativeElement.blur();
+        this.notifyNgTouched();
     }
     /**
      * @hidden
@@ -10587,9 +10609,16 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (this.isOpen) {
             return;
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
+        this.ngZone.run(() => {
+            this.onBlur.emit();
+            this.isFocused = false;
+        });
+    }
+    /**
+     * @hidden
+     */
+    arrowButtonMouseDown(ev) {
+        ev.preventDefault();
     }
     /**
      * Clears the value of the ColorPicker.
@@ -10599,6 +10628,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             return;
         }
         this._value = undefined;
+        this.setHostElementAriaLabel();
         this.notifyNgChanged(undefined);
     }
     /**
@@ -10626,6 +10656,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
             this.notifyNgChanged(parsedColor);
         }
     }
@@ -10672,7 +10703,9 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     handleWrapperKeyDown(event) {
         if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
             event.preventDefault();
-            this.toggleWithEvents(true);
+            this.ngZone.run(() => {
+                this.toggleWithEvents(true);
+            });
         }
     }
     /**
@@ -10681,14 +10714,14 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     handlePopupKeyDown(event) {
         if (event.keyCode === Keys.Escape) {
             this.toggleWithEvents(false);
-            this.wrapper.nativeElement.focus();
+            this.host.nativeElement.focus();
         }
         if (event.keyCode === Keys.Tab) {
             const currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
             const nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
             if (event.target === currentElement) {
                 event.preventDefault();
-                nextElement.nativeElement.focus();
+                nextElement.focus();
             }
         }
     }
@@ -10699,6 +10732,10 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     isEmpty() {
         return false;
     }
+    setHostElementAriaLabel() {
+        const ariaLabelValue = `${this.value ? this.value : this.localizationService.get('colorPickerNoColor')}`;
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    }
     handleClasses(value, input) {
         const elem = this.host.nativeElement;
         const classes = getStylingClasses('picker', input, this[input], value);
@@ -10710,9 +10747,9 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         }
     }
     popupBlurInvalid(ev) {
-        const focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
-        const wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
-        return !this.isFocused || wrapperClicked || focusInPopupElement;
+        const focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        const hostClicked = closest(ev.relatedTarget, (element) => element === this.host.nativeElement);
+        return hostClicked || focusInFlatColorPickerElement;
     }
     toggleWithEvents(open) {
         const sameState = this.isOpen === open;
@@ -10736,12 +10773,12 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         }
     }
     focusFirstElement() {
-        this.ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.flatColorPicker) {
                 const elementToFocus = this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle :
                     this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
-            });
+            }
         });
     }
     openPopup() {
@@ -10749,7 +10786,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
         this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
+            anchor: this.activeColor,
             animate: this.popupSettings.animate,
             appendTo: this.popupSettings.appendTo,
             popupAlign: popupPosition,
@@ -10761,7 +10798,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         this.popupRef.popupAnchorViewportLeave.subscribe(() => {
             this.toggleWithEvents(false);
             if (!this.isOpen) {
-                this.wrapper.nativeElement.focus({
+                this.host.nativeElement.focus({
                     preventScroll: true
                 });
             }
@@ -10789,6 +10826,51 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         }
         return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
     }
+    handleDomEvents(action, events) {
+        const hostElement = this.host.nativeElement;
+        events.forEach(ev => hostElement[`${action}EventListener`](ev, this.domFocusListener, true));
+    }
+    initDomEvents() {
+        if (!this.host) {
+            return;
+        }
+        let hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
+                this.handleWrapperFocus();
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (event) => {
+                const closestPopup = this.popupRef ?
+                    closest(event.relatedTarget, (element) => element === this.flatColorPicker.host.nativeElement) :
+                    false;
+                const closestWrapper = closest(event.relatedTarget, (element) => element === this.host.nativeElement);
+                if (!closestPopup && !closestWrapper) {
+                    this.handleWrapperBlur();
+                }
+            }));
+            this.handleDomEvents('add', DOM_FOCUS_EVENTS);
+            this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (event) => {
+                this.handleWrapperKeyDown(event);
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'click', (event) => {
+                this.ngZone.run(() => {
+                    this.handleWrapperClick(event);
+                });
+            }));
+        });
+    }
+    handleHostId() {
+        const hostElement = this.host.nativeElement;
+        const existingId = hostElement.getAttribute('id');
+        if (existingId) {
+            this.focusableId = existingId;
+        }
+        else {
+            const id = `k-${guid()}`;
+            hostElement.setAttribute('id', id);
+            this.focusableId = id;
+        }
+    }
 };
 __decorate([
     HostBinding('class.k-colorpicker'),
@@ -10796,14 +10878,40 @@ __decorate([
     HostBinding('class.k-picker'),
     __metadata("design:type", Boolean)
 ], ColorPickerComponent.prototype, "hostClasses", void 0);
+__decorate([
+    HostBinding('class.k-focus'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "focusedClass", null);
+__decorate([
+    HostBinding('attr.aria-disabled'),
+    HostBinding('class.k-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "disabledClass", null);
+__decorate([
+    HostBinding('attr.aria-readonly'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "ariaReadonly", null);
+__decorate([
+    HostBinding('attr.aria-expanded'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "ariaExpanded", null);
+__decorate([
+    HostBinding('attr.tabindex'),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "hostTabindex", null);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
 ], ColorPickerComponent.prototype, "direction", void 0);
 __decorate([
-    Input(),
+    HostBinding('attr.role'),
     __metadata("design:type", String)
-], ColorPickerComponent.prototype, "focusableId", void 0);
+], ColorPickerComponent.prototype, "role", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Array)
@@ -10926,9 +11034,9 @@ __decorate([
     __metadata("design:type", ViewContainerRef)
 ], ColorPickerComponent.prototype, "container", void 0);
 __decorate([
-    ViewChild('wrapper', { static: true }),
+    ViewChild('activeColor', { static: true }),
     __metadata("design:type", ElementRef)
-], ColorPickerComponent.prototype, "wrapper", void 0);
+], ColorPickerComponent.prototype, "activeColor", void 0);
 __decorate([
     ViewChild('popupTemplate', { static: true }),
     __metadata("design:type", TemplateRef)
@@ -10994,38 +11102,19 @@ ColorPickerComponent = ColorPickerComponent_1 = __decorate([
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
             cancelButton="Cancel">
         </ng-container>
-        <span
-            #wrapper
-            [ngClass]="{
-                'k-input-inner': true,
-                'k-disabled': this.disabled,
-                'k-focus': this.isFocused
-            }"
-            role="listbox"
-            [attr.aria-expanded]="isOpen"
-            [attr.aria-readonly]="readonly"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-label]="colorPickerAriaLabel"
-            [id]="focusableId"
-            [attr.tabindex]="tabindex"
-            (focus)="handleWrapperFocus()"
-            (blur)="handleWrapperBlur()"
-            (mousedown)="$event.preventDefault()"
-            (keydown)="handleWrapperKeyDown($event)"
-        >
+        <span #activeColor class="k-input-inner">
             <span
                 class="k-value-icon k-color-preview"
-                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}"
-                (click)="handleActiveColorClick()">
+                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}">
                 <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
                 <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
         </span>
         <button
-            type="button"
-            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button"
-            [attr.aria-label]="colorPickerAriaLabel"
-            (click)="togglePopup()">
+            #arrowButton
+            tabindex="-1"
+            role="button"
+            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
                 <span class="k-button-icon k-icon k-i-arrow-s"></span>
         </button>
         <ng-template #popupTemplate>
@@ -11040,8 +11129,8 @@ ColorPickerComponent = ColorPickerComponent_1 = __decorate([
                 [gradientSettings]="gradientSettings"
                 [paletteSettings]="paletteSettings"
                 [clearButton]="clearButton"
-                (focusout)="handlePopupBlur($event)"
                 (cancel)="handleCancelEvent($event)"
+                (focusout)="handlePopupBlur($event)"
                 (valueChange)="handleValueChange($event)"
                 (keydown)="handlePopupKeyDown($event)"
                 (activeViewChange)="activeViewChange.emit($event)"
@@ -11616,6 +11705,7 @@ let RadioButtonDirective = class RadioButtonDirective {
         this.hostElement = hostElement;
         this.kendoClass = true;
         this._size = 'medium';
+        validatePackage(packageMetadata);
     }
     /**
      * The size property specifies the width and height of the RadioButton
@@ -11709,7 +11799,7 @@ RadioButtonModule = __decorate([
     })
 ], RadioButtonModule);
 
-let serial$3 = 0;
+let serial$2 = 0;
 /**
  * Represents an error message that will be shown underneath
  * a Kendo control or native HTML form-bound component after a validation.
@@ -11732,7 +11822,7 @@ let ErrorComponent = class ErrorComponent {
         /**
          * @hidden
          */
-        this.id = `kendo-error-${serial$3++}`;
+        this.id = `kendo-error-${serial$2++}`;
         this.roleAttribute = 'alert';
     }
     get startClass() {
@@ -11781,7 +11871,7 @@ ErrorComponent = __decorate([
     })
 ], ErrorComponent);
 
-let serial$4 = 0;
+let serial$3 = 0;
 /**
  * Represents a hint message that will be shown underneath a form-bound component.
  */
@@ -11801,7 +11891,7 @@ let HintComponent = class HintComponent {
         /**
          * @hidden
          */
-        this.id = `kendo-hint-${serial$4++}`;
+        this.id = `kendo-hint-${serial$3++}`;
         this.hostClass = true;
     }
     get startClass() {