@progress/kendo-angular-inputs 8.0.0-dev.202112251033 → 8.0.0-dev.202201190602

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

@@ -11,6 +11,7 @@ var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
 var dom_utils_1 = require("../common/dom-utils");
 var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
@@ -18,6 +19,7 @@ var slider_component_1 = require("../slider/slider.component");
 var colorgradient_localization_service_1 = require("./localization/colorgradient-localization.service");
 var color_input_component_1 = require("./color-input.component");
 var constants_1 = require("./constants");
+var package_metadata_1 = require("../package-metadata");
 var serial = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -97,6 +99,7 @@ var ColorGradientComponent = /** @class */ (function () {
         this.updateValues = new rxjs_1.Subject();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';

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

@@ -184,7 +184,7 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = tslib_1.__decorate([
         core_1.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", [core_1.ElementRef,
             core_1.Renderer2,

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

@@ -7,13 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
+var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
+var colorpalette_localization_service_1 = require("./localization/colorpalette-localization.service");
+var package_metadata_1 = require("../package-metadata");
 var models_1 = require("./models");
 var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
 var color_palette_service_1 = require("./services/color-palette.service");
-var kendo_angular_common_1 = require("@progress/kendo-angular-common");
-var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
-var colorpalette_localization_service_1 = require("./localization/colorpalette-localization.service");
 var DEFAULT_TILE_SIZE = 24;
 var DEFAULT_COLUMNS_COUNT = 10;
 var DEFAULT_PRESET = 'office';
@@ -87,6 +89,7 @@ var ColorPaletteComponent = /** @class */ (function () {
         this._tabindex = 0;
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';

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

@@ -5,8 +5,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var operators_1 = require("rxjs/operators");
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
+var rxjs_1 = require("rxjs");
 var flatcolorpicker_component_1 = require("./flatcolorpicker.component");
 var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
@@ -19,7 +21,7 @@ var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
 var colorpicker_localization_service_1 = require("./localization/colorpicker-localization.service");
 var constants_1 = require("./constants");
-var serial = 0;
+var DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -36,10 +38,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.
@@ -135,6 +134,10 @@ var ColorPickerComponent = /** @class */ (function () {
          * Used to provide a two-way binding for the `activeView` property.
          */
         this.activeViewChange = new core_1.EventEmitter();
+        /**
+         * Indicates whether the ColorPicker wrapper is focused.
+         */
+        this.isFocused = false;
         this._tabindex = 0;
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
@@ -142,8 +145,10 @@ var ColorPickerComponent = /** @class */ (function () {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this.subscriptions = new rxjs_1.Subscription();
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
+        this.domFocusListener = function (event) { return event.stopImmediatePropagation(); };
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
@@ -151,6 +156,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;
@@ -238,7 +278,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return this._size;
         },
         /**
-         * The size property specifies the font size and line height of the ColorPicker
+         * The size property specifies the padding of the ColorPicker internal elements
          * ([see example]({% slug appearance_colorpicker %}#toc-size)).
          *
          * The possible values are:
@@ -340,6 +380,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') {
@@ -349,23 +392,18 @@ var ColorPickerComponent = /** @class */ (function () {
             this.format = 'rgba';
             this.value = utils_1.parseColor(this.value, this.format, this.gradientSettings.opacity);
         }
+        if (kendo_angular_common_1.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
      */
@@ -376,55 +414,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 events_1.ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.togglePopup();
+        if (kendo_angular_common_1.closest(event.target, function (element) { return element === _this.activeColor.nativeElement; })) {
+            var event_1 = new events_1.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.
@@ -434,6 +491,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return;
         }
         this._value = undefined;
+        this.setHostElementAriaLabel();
         this.notifyNgChanged(undefined);
     };
     /**
@@ -461,6 +519,7 @@ var ColorPickerComponent = /** @class */ (function () {
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
             this.notifyNgChanged(parsedColor);
         }
     };
@@ -505,9 +564,12 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperKeyDown = function (event) {
+        var _this = this;
         if (event.keyCode === kendo_angular_common_1.Keys.ArrowDown || event.keyCode === kendo_angular_common_1.Keys.Enter) {
             event.preventDefault();
-            this.toggleWithEvents(true);
+            this.ngZone.run(function () {
+                _this.toggleWithEvents(true);
+            });
         }
     };
     /**
@@ -516,14 +578,14 @@ var ColorPickerComponent = /** @class */ (function () {
     ColorPickerComponent.prototype.handlePopupKeyDown = function (event) {
         if (event.keyCode === kendo_angular_common_1.Keys.Escape) {
             this.toggleWithEvents(false);
-            this.wrapper.nativeElement.focus();
+            this.host.nativeElement.focus();
         }
         if (event.keyCode === kendo_angular_common_1.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();
             }
         }
     };
@@ -534,6 +596,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 = utils_2.getStylingClasses('picker', input, this[input], value);
@@ -545,9 +611,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 = kendo_angular_common_1.closest(ev.relatedTarget, function (element) { return element === _this.host.nativeElement; });
+        return hostClicked || focusInFlatColorPickerElement;
     };
     ColorPickerComponent.prototype.toggleWithEvents = function (open) {
         var sameState = this.isOpen === open;
@@ -572,12 +639,12 @@ var ColorPickerComponent = /** @class */ (function () {
     };
     ColorPickerComponent.prototype.focusFirstElement = function () {
         var _this = this;
-        this.ngZone.runOutsideAngular(function () {
-            setTimeout(function () {
+        this.ngZone.onStable.pipe(operators_1.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 () {
@@ -586,7 +653,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,
@@ -598,7 +665,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
                 });
             }
@@ -634,6 +701,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 ?
+                    kendo_angular_common_1.closest(event.relatedTarget, function (element) { return element === _this.flatColorPicker.host.nativeElement; }) :
+                    false;
+                var closestWrapper = kendo_angular_common_1.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-" + kendo_angular_common_1.guid();
+            hostElement.setAttribute('id', id);
+            this.focusableId = id;
+        }
+    };
     var ColorPickerComponent_1;
     tslib_1.__decorate([
         core_1.HostBinding('class.k-colorpicker'),
@@ -641,14 +755,40 @@ var ColorPickerComponent = /** @class */ (function () {
         core_1.HostBinding('class.k-picker'),
         tslib_1.__metadata("design:type", Boolean)
     ], ColorPickerComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-focus'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "focusedClass", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-disabled'),
+        core_1.HostBinding('class.k-disabled'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "disabledClass", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-readonly'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "ariaReadonly", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-expanded'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "ariaExpanded", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.tabindex'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "hostTabindex", null);
     tslib_1.__decorate([
         core_1.HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerComponent.prototype, "direction", void 0);
     tslib_1.__decorate([
-        core_1.Input(),
+        core_1.HostBinding('attr.role'),
         tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "focusableId", void 0);
+    ], ColorPickerComponent.prototype, "role", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Array)
@@ -771,9 +911,9 @@ var ColorPickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.ViewContainerRef)
     ], ColorPickerComponent.prototype, "container", void 0);
     tslib_1.__decorate([
-        core_1.ViewChild('wrapper', { static: true }),
+        core_1.ViewChild('activeColor', { static: true }),
         tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], ColorPickerComponent.prototype, "wrapper", void 0);
+    ], ColorPickerComponent.prototype, "activeColor", void 0);
     tslib_1.__decorate([
         core_1.ViewChild('popupTemplate', { static: true }),
         tslib_1.__metadata("design:type", core_1.TemplateRef)
@@ -804,7 +944,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", [core_1.ElementRef,
             kendo_angular_popup_1.PopupService,

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

@@ -10,8 +10,10 @@ var forms_1 = require("@angular/forms");
 var rxjs_1 = require("rxjs");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
 var flatcolorpicker_localization_service_1 = require("./localization/flatcolorpicker-localization.service");
 var flatcolorpicker_service_1 = require("./services/flatcolorpicker.service");
+var package_metadata_1 = require("../package-metadata");
 var events_1 = require("./events");
 var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
@@ -26,10 +28,10 @@ var flatcolorpicker_actions_component_1 = require("./flatcolorpicker-actions.com
  * 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;
@@ -112,6 +114,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
         this.subscriptions = new rxjs_1.Subscription();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -543,8 +546,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", [flatcolorpicker_service_1.FlatColorPickerService,
-            core_1.ElementRef,
+        tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
+            flatcolorpicker_service_1.FlatColorPickerService,
             kendo_angular_l10n_1.LocalizationService,
             core_1.ChangeDetectorRef,
             core_1.Renderer2,

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

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

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

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

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1640428155,
+    publishDate: 1642571836,
     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'
 };