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

package/dist/fesm5/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';
@@ -516,7 +516,7 @@ var containsFocus = function (hostElement, contender) {
 /**
  * @hidden
  */
-var closest = function (node, predicate) {
+var closest$1 = function (node, predicate) {
     while (node && !predicate(node)) {
         node = node.parentNode;
     }
@@ -530,7 +530,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641832234,
+    publishDate: 1641996688,
     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'
 };
@@ -6237,7 +6237,7 @@ var TextBoxComponent = /** @class */ (function () {
                     return;
                 }
                 if (tabbing) {
-                    var closestTextbox = closest(args.relatedTarget, function (element) { return element === _this.hostElement.nativeElement; });
+                    var closestTextbox = closest$1(args.relatedTarget, function (element) { return element === _this.hostElement.nativeElement; });
                     if (!closestTextbox) {
                         _this.handleBlur();
                     }
@@ -7251,7 +7251,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
                     return;
                 }
                 if (tabbing) {
-                    var closestTextbox = closest(args.relatedTarget, function (element) { return element === _this.hostElement.nativeElement; });
+                    var closestTextbox = closest$1(args.relatedTarget, function (element) { return element === _this.hostElement.nativeElement; });
                     if (!closestTextbox) {
                         _this.handleBlur();
                     }
@@ -8435,6 +8435,7 @@ var ColorGradientComponent = /** @class */ (function () {
         this.updateValues = new Subject();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -9014,6 +9015,32 @@ var ColorGradientComponent = /** @class */ (function () {
     return ColorGradientComponent;
 }());
 
+/**
+ * @hidden
+ */
+var ColorPaletteLocalizationService = /** @class */ (function (_super) {
+    __extends(ColorPaletteLocalizationService, _super);
+    function ColorPaletteLocalizationService(prefix, messageService, _rtl, flatColorPickerLocalization) {
+        var _this = _super.call(this, prefix, messageService, _rtl) || this;
+        _this.flatColorPickerLocalization = flatColorPickerLocalization;
+        return _this;
+    }
+    ColorPaletteLocalizationService.prototype.get = function (shortKey) {
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
+        }
+        return _super.prototype.get.call(this, 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);
+    return ColorPaletteLocalizationService;
+}(LocalizationService));
+
 /**
  * @hidden
  */
@@ -9074,32 +9101,6 @@ var ColorPaletteService = /** @class */ (function () {
     return ColorPaletteService;
 }());
 
-/**
- * @hidden
- */
-var ColorPaletteLocalizationService = /** @class */ (function (_super) {
-    __extends(ColorPaletteLocalizationService, _super);
-    function ColorPaletteLocalizationService(prefix, messageService, _rtl, flatColorPickerLocalization) {
-        var _this = _super.call(this, prefix, messageService, _rtl) || this;
-        _this.flatColorPickerLocalization = flatColorPickerLocalization;
-        return _this;
-    }
-    ColorPaletteLocalizationService.prototype.get = function (shortKey) {
-        if (this.flatColorPickerLocalization) {
-            return this.flatColorPickerLocalization.get(shortKey);
-        }
-        return _super.prototype.get.call(this, 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);
-    return ColorPaletteLocalizationService;
-}(LocalizationService));
-
 var DEFAULT_TILE_SIZE = 24;
 var DEFAULT_COLUMNS_COUNT = 10;
 var DEFAULT_PRESET$1 = 'office';
@@ -9173,6 +9174,7 @@ var ColorPaletteComponent = /** @class */ (function () {
         this._tabindex = 0;
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -9731,10 +9733,10 @@ var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
  * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 var FlatColorPickerComponent = /** @class */ (function () {
-    function FlatColorPickerComponent(service, host, localizationService, cdr, renderer, ngZone) {
+    function FlatColorPickerComponent(host, service, localizationService, cdr, renderer, ngZone) {
         var _this = this;
-        this.service = service;
         this.host = host;
+        this.service = service;
         this.localizationService = localizationService;
         this.cdr = cdr;
         this.renderer = renderer;
@@ -9817,6 +9819,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
         this.subscriptions = new Subscription();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
+        validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -10248,8 +10251,8 @@ var FlatColorPickerComponent = /** @class */ (function () {
             ],
             template: "\n        <ng-container kendoFlatColorPickerLocalizedMessages\n            i18n-flatColorPickerNoColor=\"kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.flatcolorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.flatcolorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.flatcolorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.flatcolorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.flatcolorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.flatcolorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.flatcolorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.flatcolorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <div kendoFlatColorPickerHeader\n            *ngIf=\"headerHasContent\"\n            #header\n            [clearButton]=\"clearButton\"\n            [activeView]=\"activeView\"\n            [views]=\"views\"\n            [value]=\"value\"\n            [selection]=\"selection\"\n            [preview]=\"preview\"\n            (clearButtonClick)=\"onClearButtonClick()\"\n            (viewChange)=\"onViewChange($event)\"\n            (valuePaneClick)=\"resetSelection($event)\">\n        </div>\n        <div class=\"k-coloreditor-views k-vstack\">\n            <kendo-colorgradient #gradient\n                *ngIf=\"activeView === 'gradient'\"\n                [tabindex]=\"null\"\n                [value]=\"selection\"\n                [format]=\"format\"\n                [opacity]=\"gradientSettings.opacity\"\n                [delay]=\"gradientSettings.delay\"\n                [contrastTool]=\"gradientSettings.contrastTool\"\n                [readonly]=\"readonly\"\n                (valueChange)=\"handleValueChange($event)\"\n            >\n            </kendo-colorgradient>\n            <kendo-colorpalette #palette\n                *ngIf=\"activeView === 'palette'\"\n                kendoFocusOnDomReady\n                [palette]=\"paletteSettings.palette\"\n                [columns]=\"paletteSettings.columns\"\n                [tileSize]=\"paletteSettings.tileSize\"\n                [format]=\"format\"\n                [value]=\"selection\"\n                (valueChange)=\"handleValueChange($event)\"\n            >\n            </kendo-colorpalette>\n        </div>\n        <div kendoFlatColorPickerActionButtons *ngIf=\"preview\"\n            #footer\n            [ngClass]=\"'k-justify-content-' + actionsLayout\"\n            (actionButtonClick)=\"onAction($event)\">\n        </div>\n"
         }),
-        __metadata("design:paramtypes", [FlatColorPickerService,
-            ElementRef,
+        __metadata("design:paramtypes", [ElementRef,
+            FlatColorPickerService,
             LocalizationService,
             ChangeDetectorRef,
             Renderer2,
@@ -10258,7 +10261,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
     return FlatColorPickerComponent;
 }());
 
-var serial$2 = 0;
+var DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -10275,10 +10278,7 @@ var ColorPickerComponent = /** @class */ (function () {
         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.
@@ -10374,6 +10374,10 @@ var ColorPickerComponent = /** @class */ (function () {
          * 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 = {};
@@ -10381,8 +10385,10 @@ var ColorPickerComponent = /** @class */ (function () {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.subscriptions = new Subscription();
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
+        this.domFocusListener = function (event) { return event.stopImmediatePropagation(); };
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
@@ -10390,6 +10396,41 @@ var ColorPickerComponent = /** @class */ (function () {
         });
     }
     ColorPickerComponent_1 = ColorPickerComponent;
+    Object.defineProperty(ColorPickerComponent.prototype, "focusedClass", {
+        get: function () {
+            return this.isFocused;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "disabledClass", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "ariaReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "ariaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "hostTabindex", {
+        get: function () {
+            return this.tabindex;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ColorPickerComponent.prototype, "view", {
         get: function () {
             return (this.views && this.views.length > 0) ? this.views[0] : null;
@@ -10579,6 +10620,9 @@ var ColorPickerComponent = /** @class */ (function () {
         stylingInputs.forEach(function (input) {
             _this.handleClasses(_this[input], input);
         });
+        this.setHostElementAriaLabel();
+        this.handleHostId();
+        this.initDomEvents();
     };
     ColorPickerComponent.prototype.ngOnChanges = function (changes) {
         if (changes.format && changes.format.currentValue === 'name') {
@@ -10588,23 +10632,18 @@ var ColorPickerComponent = /** @class */ (function () {
             this.format = 'rgba';
             this.value = parseColor$1(this.value, this.format, this.gradientSettings.opacity);
         }
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
     };
     ColorPickerComponent.prototype.ngOnDestroy = function () {
         this.closePopup();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
+        this.subscriptions.unsubscribe();
+        this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
     };
-    Object.defineProperty(ColorPickerComponent.prototype, "colorPickerAriaLabel", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
-        },
-        enumerable: true,
-        configurable: true
-    });
     /**
      * @hidden
      */
@@ -10615,55 +10654,74 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.togglePopup = function () {
-        this.toggleWithEvents(!this.isOpen);
         this.focus();
+        this.toggleWithEvents(!this.isOpen);
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleActiveColorClick = function () {
+    ColorPickerComponent.prototype.handleWrapperClick = function (event) {
+        var _this = this;
+        if (this.disabled) {
+            return;
+        }
         this.focus();
-        var event = new ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.togglePopup();
+        if (closest(event.target, function (element) { return element === _this.activeColor.nativeElement; })) {
+            var event_1 = new ActiveColorClickEvent(this.value);
+            this.activeColorClick.emit(event_1);
+            if (!event_1.isOpenPrevented() || this.isOpen) {
+                this.toggleWithEvents(!this.isOpen);
+            }
+            return;
         }
+        this.toggleWithEvents(!this.isOpen);
     };
     /**
      * Focuses the wrapper of the ColorPicker.
      */
     ColorPickerComponent.prototype.focus = function () {
-        if (this.disabled) {
-            return;
-        }
-        this.wrapper.nativeElement.focus();
+        this.isFocused = true;
+        this.host.nativeElement.focus();
     };
     /**
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperFocus = function () {
+        var _this = this;
         if (this.isFocused) {
             return;
         }
-        this.isFocused = true;
-        this.onFocus.emit();
+        this.ngZone.run(function () {
+            _this.focus();
+            _this.onFocus.emit();
+        });
     };
     /**
      * Blurs the ColorPicker.
      */
     ColorPickerComponent.prototype.blur = function () {
-        this.wrapper.nativeElement.blur();
+        this.isFocused = false;
+        this.host.nativeElement.blur();
+        this.notifyNgTouched();
     };
     /**
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperBlur = function () {
+        var _this = this;
         if (this.isOpen) {
             return;
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
+        this.ngZone.run(function () {
+            _this.onBlur.emit();
+            _this.isFocused = false;
+        });
+    };
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.arrowButtonMouseDown = function (ev) {
+        ev.preventDefault();
     };
     /**
      * Clears the value of the ColorPicker.
@@ -10673,6 +10731,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return;
         }
         this._value = undefined;
+        this.setHostElementAriaLabel();
         this.notifyNgChanged(undefined);
     };
     /**
@@ -10700,6 +10759,7 @@ var ColorPickerComponent = /** @class */ (function () {
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
             this.notifyNgChanged(parsedColor);
         }
     };
@@ -10744,9 +10804,12 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperKeyDown = function (event) {
+        var _this = this;
         if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
             event.preventDefault();
-            this.toggleWithEvents(true);
+            this.ngZone.run(function () {
+                _this.toggleWithEvents(true);
+            });
         }
     };
     /**
@@ -10755,14 +10818,14 @@ var ColorPickerComponent = /** @class */ (function () {
     ColorPickerComponent.prototype.handlePopupKeyDown = function (event) {
         if (event.keyCode === Keys.Escape) {
             this.toggleWithEvents(false);
-            this.wrapper.nativeElement.focus();
+            this.host.nativeElement.focus();
         }
         if (event.keyCode === Keys.Tab) {
             var currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
             var nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
             if (event.target === currentElement) {
                 event.preventDefault();
-                nextElement.nativeElement.focus();
+                nextElement.focus();
             }
         }
     };
@@ -10773,6 +10836,10 @@ var ColorPickerComponent = /** @class */ (function () {
     ColorPickerComponent.prototype.isEmpty = function () {
         return false;
     };
+    ColorPickerComponent.prototype.setHostElementAriaLabel = function () {
+        var ariaLabelValue = "" + (this.value ? this.value : this.localizationService.get('colorPickerNoColor'));
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    };
     ColorPickerComponent.prototype.handleClasses = function (value, input) {
         var elem = this.host.nativeElement;
         var classes = getStylingClasses('picker', input, this[input], value);
@@ -10784,9 +10851,10 @@ var ColorPickerComponent = /** @class */ (function () {
         }
     };
     ColorPickerComponent.prototype.popupBlurInvalid = function (ev) {
-        var focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
-        var wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
-        return !this.isFocused || wrapperClicked || focusInPopupElement;
+        var _this = this;
+        var focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        var hostClicked = closest(ev.relatedTarget, function (element) { return element === _this.host.nativeElement; });
+        return hostClicked || focusInFlatColorPickerElement;
     };
     ColorPickerComponent.prototype.toggleWithEvents = function (open) {
         var sameState = this.isOpen === open;
@@ -10811,12 +10879,12 @@ var ColorPickerComponent = /** @class */ (function () {
     };
     ColorPickerComponent.prototype.focusFirstElement = function () {
         var _this = this;
-        this.ngZone.runOutsideAngular(function () {
-            setTimeout(function () {
+        this.ngZone.onStable.pipe(take(1)).subscribe(function () {
+            if (_this.flatColorPicker) {
                 var elementToFocus = _this.flatColorPicker.gradient ? _this.flatColorPicker.gradient.gradientDragHandle :
                     _this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
-            });
+            }
         });
     };
     ColorPickerComponent.prototype.openPopup = function () {
@@ -10825,7 +10893,7 @@ var ColorPickerComponent = /** @class */ (function () {
         var anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         var 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,
@@ -10837,7 +10905,7 @@ var ColorPickerComponent = /** @class */ (function () {
         this.popupRef.popupAnchorViewportLeave.subscribe(function () {
             _this.toggleWithEvents(false);
             if (!_this.isOpen) {
-                _this.wrapper.nativeElement.focus({
+                _this.host.nativeElement.focus({
                     preventScroll: true
                 });
             }
@@ -10873,6 +10941,53 @@ var ColorPickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ColorPickerComponent.prototype.handleDomEvents = function (action, events) {
+        var _this = this;
+        var hostElement = this.host.nativeElement;
+        events.forEach(function (ev) { return hostElement[action + "EventListener"](ev, _this.domFocusListener, true); });
+    };
+    ColorPickerComponent.prototype.initDomEvents = function () {
+        var _this = this;
+        if (!this.host) {
+            return;
+        }
+        var hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(function () {
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusin', function () {
+                _this.handleWrapperFocus();
+            }));
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusout', function (event) {
+                var closestPopup = _this.popupRef ?
+                    closest(event.relatedTarget, function (element) { return element === _this.flatColorPicker.host.nativeElement; }) :
+                    false;
+                var closestWrapper = closest(event.relatedTarget, function (element) { return element === _this.host.nativeElement; });
+                if (!closestPopup && !closestWrapper) {
+                    _this.handleWrapperBlur();
+                }
+            }));
+            _this.handleDomEvents('add', DOM_FOCUS_EVENTS);
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'keydown', function (event) {
+                _this.handleWrapperKeyDown(event);
+            }));
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'click', function (event) {
+                _this.ngZone.run(function () {
+                    _this.handleWrapperClick(event);
+                });
+            }));
+        });
+    };
+    ColorPickerComponent.prototype.handleHostId = function () {
+        var hostElement = this.host.nativeElement;
+        var existingId = hostElement.getAttribute('id');
+        if (existingId) {
+            this.focusableId = existingId;
+        }
+        else {
+            var id = "k-" + guid();
+            hostElement.setAttribute('id', id);
+            this.focusableId = id;
+        }
+    };
     var ColorPickerComponent_1;
     __decorate([
         HostBinding('class.k-colorpicker'),
@@ -10880,14 +10995,40 @@ var ColorPickerComponent = /** @class */ (function () {
         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)
@@ -11010,9 +11151,9 @@ var ColorPickerComponent = /** @class */ (function () {
         __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)
@@ -11043,7 +11184,7 @@ var ColorPickerComponent = /** @class */ (function () {
                     useValue: 'kendo.colorpicker'
                 }
             ],
-            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorPickerNoColor=\"kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty.\"\n            colorPickerNoColor=\"Colorpicker no color chosen\"\n            i18n-flatColorPickerNoColor=\"kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.colorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.colorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.colorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.colorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.colorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.colorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.colorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-input-inner': true,\n                'k-disabled': this.disabled,\n                'k-focus': this.isFocused\n            }\"\n            role=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-label]=\"colorPickerAriaLabel\"\n            [id]=\"focusableId\"\n            [attr.tabindex]=\"tabindex\"\n            (focus)=\"handleWrapperFocus()\"\n            (blur)=\"handleWrapperBlur()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown)=\"handleWrapperKeyDown($event)\"\n        >\n            <span\n                class=\"k-value-icon k-color-preview\"\n                [ngClass]=\"{'k-icon-color-preview': iconStyles, 'k-no-color': !value}\"\n                (click)=\"handleActiveColorClick()\">\n                <span *ngIf=\"iconClass || icon\" class=\"k-color-preview-icon k-icon\" [ngClass]=\"iconStyles\"></span>\n                <span class=\"k-color-preview-mask\" [style.background-color]=\"value\"></span>\n            </span>\n        </span>\n        <button\n            type=\"button\"\n            class=\"k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button\"\n            [attr.aria-label]=\"colorPickerAriaLabel\"\n            (click)=\"togglePopup()\">\n                <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorPickerNoColor=\"kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty.\"\n            colorPickerNoColor=\"Colorpicker no color chosen\"\n            i18n-flatColorPickerNoColor=\"kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.colorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.colorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.colorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.colorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.colorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.colorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.colorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <span #activeColor class=\"k-input-inner\">\n            <span\n                class=\"k-value-icon k-color-preview\"\n                [ngClass]=\"{'k-icon-color-preview': iconStyles, 'k-no-color': !value}\">\n                <span *ngIf=\"iconClass || icon\" class=\"k-color-preview-icon k-icon\" [ngClass]=\"iconStyles\"></span>\n                <span class=\"k-color-preview-mask\" [style.background-color]=\"value\"></span>\n            </span>\n        </span>\n        <button\n            #arrowButton\n            tabindex=\"-1\"\n            role=\"button\"\n            class=\"k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button\">\n                <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef,
             PopupService,
@@ -11644,6 +11785,7 @@ var RadioButtonDirective = /** @class */ (function () {
         this.hostElement = hostElement;
         this.kendoClass = true;
         this._size = 'medium';
+        validatePackage(packageMetadata);
     }
     Object.defineProperty(RadioButtonDirective.prototype, "size", {
         get: function () {
@@ -11746,7 +11888,7 @@ var RadioButtonModule = /** @class */ (function () {
     return RadioButtonModule;
 }());
 
-var serial$3 = 0;
+var serial$2 = 0;
 /**
  * Represents an error message that will be shown underneath
  * a Kendo control or native HTML form-bound component after a validation.
@@ -11765,7 +11907,7 @@ var ErrorComponent = /** @class */ (function () {
         /**
          * @hidden
          */
-        this.id = "kendo-error-" + serial$3++;
+        this.id = "kendo-error-" + serial$2++;
         this.roleAttribute = 'alert';
     }
     Object.defineProperty(ErrorComponent.prototype, "startClass", {
@@ -11825,7 +11967,7 @@ var ErrorComponent = /** @class */ (function () {
     return ErrorComponent;
 }());
 
-var serial$4 = 0;
+var serial$3 = 0;
 /**
  * Represents a hint message that will be shown underneath a form-bound component.
  */
@@ -11842,7 +11984,7 @@ var HintComponent = /** @class */ (function () {
         /**
          * @hidden
          */
-        this.id = "kendo-hint-" + serial$4++;
+        this.id = "kendo-hint-" + serial$3++;
         this.hostClass = true;
     }
     Object.defineProperty(HintComponent.prototype, "startClass", {