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

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

@@ -9,6 +9,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';
@@ -16,6 +17,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';
 var serial = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -95,6 +97,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';

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

@@ -182,7 +182,7 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-colorinput',
-            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-textbox k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
+            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef,
             Renderer2,

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

@@ -5,13 +5,15 @@
 import * as tslib_1 from "tslib";
 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';
 var DEFAULT_TILE_SIZE = 24;
 var DEFAULT_COLUMNS_COUNT = 10;
 var DEFAULT_PRESET = 'office';
@@ -85,6 +87,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';

package/dist/es/colorpicker/colorpicker.component.js

@@ -3,12 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
+import { take } from 'rxjs/operators';
 import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { FlatColorPickerComponent } from './flatcolorpicker.component';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, KendoInput } from '@progress/kendo-angular-common';
+import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
@@ -17,7 +19,7 @@ import { parseColor } from './utils';
 import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
 import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
-var serial = 0;
+var DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -34,10 +36,7 @@ var ColorPickerComponent = /** @class */ (function () {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.focusableId = "k-colorpicker-" + serial++;
+        this.role = 'listbox';
         /**
          * Specifies the views that will be rendered in the popup.
          * By default both the gradient and palette views will be rendered.
@@ -133,6 +132,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 = {};
@@ -140,8 +143,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;
@@ -149,6 +154,54 @@ 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;
+        },
+        /**
+         * @hidden
+         */
+        set: function (view) {
+            this.views = [view];
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ColorPickerComponent.prototype, "value", {
         get: function () {
             return this._value;
@@ -325,6 +378,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') {
@@ -334,23 +390,18 @@ var ColorPickerComponent = /** @class */ (function () {
             this.format = 'rgba';
             this.value = parseColor(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
      */
@@ -361,55 +412,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.
@@ -419,6 +489,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return;
         }
         this._value = undefined;
+        this.setHostElementAriaLabel();
         this.notifyNgChanged(undefined);
     };
     /**
@@ -446,6 +517,7 @@ var ColorPickerComponent = /** @class */ (function () {
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
             this.notifyNgChanged(parsedColor);
         }
     };
@@ -490,9 +562,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);
+            });
         }
     };
     /**
@@ -501,14 +576,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();
             }
         }
     };
@@ -519,6 +594,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);
@@ -530,9 +609,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;
@@ -557,12 +637,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 () {
@@ -571,7 +651,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,
@@ -583,7 +663,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
                 });
             }
@@ -619,6 +699,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;
     tslib_1.__decorate([
         HostBinding('class.k-colorpicker'),
@@ -626,18 +753,49 @@ var ColorPickerComponent = /** @class */ (function () {
         HostBinding('class.k-picker'),
         tslib_1.__metadata("design:type", Boolean)
     ], ColorPickerComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-focus'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "focusedClass", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-disabled'),
+        HostBinding('class.k-disabled'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "disabledClass", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-readonly'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "ariaReadonly", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-expanded'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "ariaExpanded", null);
+    tslib_1.__decorate([
+        HostBinding('attr.tabindex'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "hostTabindex", null);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerComponent.prototype, "direction", void 0);
     tslib_1.__decorate([
-        Input(),
+        HostBinding('attr.role'),
         tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "focusableId", void 0);
+    ], ColorPickerComponent.prototype, "role", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Array)
     ], ColorPickerComponent.prototype, "views", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ColorPickerComponent.prototype, "view", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -751,9 +909,9 @@ var ColorPickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", ViewContainerRef)
     ], ColorPickerComponent.prototype, "container", void 0);
     tslib_1.__decorate([
-        ViewChild('wrapper', { static: true }),
+        ViewChild('activeColor', { static: true }),
         tslib_1.__metadata("design:type", ElementRef)
-    ], ColorPickerComponent.prototype, "wrapper", void 0);
+    ], ColorPickerComponent.prototype, "activeColor", void 0);
     tslib_1.__decorate([
         ViewChild('popupTemplate', { static: true }),
         tslib_1.__metadata("design:type", TemplateRef)
@@ -784,7 +942,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    "
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef,
             PopupService,

package/dist/es/colorpicker/flatcolorpicker.component.js

@@ -8,8 +8,10 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { isChanged, KendoInput } from '@progress/kendo-angular-common';
+import { validatePackage } from "@progress/kendo-licensing";
 import { FlatColorPickerLocalizationService } from './localization/flatcolorpicker-localization.service';
 import { FlatColorPickerService } from './services/flatcolorpicker.service';
+import { packageMetadata } from "../package-metadata";
 import { ColorPickerCancelEvent } from './events';
 import { parseColor } from './utils';
 import { isPresent } from '../common/utils';
@@ -24,10 +26,10 @@ import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions
  * 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;
@@ -110,6 +112,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';
@@ -541,8 +544,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"
         }),
-        tslib_1.__metadata("design:paramtypes", [FlatColorPickerService,
-            ElementRef,
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            FlatColorPickerService,
             LocalizationService,
             ChangeDetectorRef,
             Renderer2,

package/dist/es/package-metadata.js

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

package/dist/es/radiobutton/radiobutton.directive.js

@@ -4,7 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
 import { getStylingClasses } from '../common/utils';
+import { packageMetadata } from '../package-metadata';
 /**
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="radio" elements.
@@ -20,6 +22,7 @@ var RadioButtonDirective = /** @class */ (function () {
         this.hostElement = hostElement;
         this.kendoClass = true;
         this._size = 'medium';
+        validatePackage(packageMetadata);
     }
     Object.defineProperty(RadioButtonDirective.prototype, "size", {
         get: function () {