@progress/kendo-angular-inputs 8.0.0 → 8.0.2-dev.202201241505

package/dist/es2015/main.d.ts

@@ -21,6 +21,8 @@ export { NumericTextBoxModule } from './numerictextbox.module';
 export { MaskedTextBoxModule } from './maskedtextbox.module';
 export { TextBoxModule } from './textbox.module';
 export { TextAreaModule } from './textarea.module';
+export { CheckBoxModule } from './checkbox.module';
+export { RadioButtonModule } from './radiobutton.module';
 export { InputRounded, CheckBoxRounded, InputFillMode, InputSize } from './common/models';
 export { ColorPickerComponent } from './colorpicker/colorpicker.component';
 export { ColorPaletteComponent } from './colorpicker/color-palette.component';

package/dist/es2015/main.js

@@ -20,6 +20,8 @@ export { NumericTextBoxModule } from './numerictextbox.module';
 export { MaskedTextBoxModule } from './maskedtextbox.module';
 export { TextBoxModule } from './textbox.module';
 export { TextAreaModule } from './textarea.module';
+export { CheckBoxModule } from './checkbox.module';
+export { RadioButtonModule } from './radiobutton.module';
 // All ColorPicker Components
 export { ColorPickerComponent } from './colorpicker/colorpicker.component';
 export { ColorPaletteComponent } from './colorpicker/color-palette.component';

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642572427,
+    publishDate: 1643036475,
     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/fesm2015/index.js

@@ -481,7 +481,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642572427,
+    publishDate: 1643036475,
     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'
 };
@@ -8098,6 +8098,7 @@ ColorInputComponent = __decorate([
                 class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
+                type="button"
             >
                 <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
             </button>
@@ -9558,6 +9559,7 @@ FlatColorPickerHeaderComponent = __decorate([
             <div *ngIf="viewButtons" class="k-button-group k-button-group-flat">
                 <button *ngFor="let view of views"
                     #viewButtons
+                    type="button"
                     (click)="onViewButtonClick(view)"
                     class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
@@ -9576,6 +9578,7 @@ FlatColorPickerHeaderComponent = __decorate([
         <div class="k-coloreditor-header-actions k-hstack">
             <button *ngIf="clearButton"
                 #clearButton
+                type="button"
                 class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
                 [attr.aria-label]="getText('clearButton')"
                 [attr.title]="getText('clearButton')"
@@ -9642,11 +9645,13 @@ FlatColorPickerActionButtonsComponent = __decorate([
             class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
             (click)="onActionButtonClick('cancel', $event)"
+            type="button"
         >{{getText('cancelButton')}}</button>
         <button #last
             class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
             [attr.title]="getText('applyButton')"
             (click)="onActionButtonClick('apply', $event)"
+            type="button"
         >{{getText('applyButton')}}</button>
     `
     }),
@@ -10614,12 +10619,6 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             this.isFocused = false;
         });
     }
-    /**
-     * @hidden
-     */
-    arrowButtonMouseDown(ev) {
-        ev.preventDefault();
-    }
     /**
      * Clears the value of the ColorPicker.
      */
@@ -10641,6 +10640,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (this.disabled || this.readonly) {
             return;
         }
+        this.cdr.markForCheck();
         this.closePopup();
         open = isPresent(open) ? open : !this.isOpen;
         if (open) {
@@ -10775,7 +10775,8 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     focusFirstElement() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             if (this.flatColorPicker) {
-                const elementToFocus = this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle :
+                const gradient = this.flatColorPicker.gradient;
+                const elementToFocus = gradient ? gradient.gradientDragHandle :
                     this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
             }
@@ -10813,7 +10814,8 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     }
     get firstFocusableElement() {
         if (!this.flatColorPicker.header || (this.views.length <= 1 && !this.flatColorPicker.clearButton)) {
-            return this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle : this.flatColorPicker.palette.host;
+            const gradient = this.flatColorPicker.gradient;
+            return gradient ? gradient.gradientDragHandle : this.flatColorPicker.palette.host;
         }
         return this.views.length > 1 ? this.flatColorPicker.header.viewButtonsCollection.toArray()[0] : this.flatColorPicker.header.clearButtonElement;
     }
@@ -10824,7 +10826,12 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (this.flatColorPicker.palette) {
             return this.flatColorPicker.palette.host;
         }
-        return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
+        const gradient = this.flatColorPicker.gradient;
+        const inputs = gradient && gradient.inputs;
+        if (gradient && inputs && inputs.formatView === 'hex') {
+            return inputs.hexInput;
+        }
+        return this.gradientSettings.opacity ? inputs.opacityInput.numericInput : inputs.blueInput;
     }
     handleDomEvents(action, events) {
         const hostElement = this.host.nativeElement;
@@ -11111,9 +11118,8 @@ ColorPickerComponent = ColorPickerComponent_1 = __decorate([
             </span>
         </span>
         <button
-            #arrowButton
             tabindex="-1"
-            role="button"
+            type="button"
             class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
                 <span class="k-button-icon k-icon k-i-arrow-s"></span>
         </button>
@@ -12293,4 +12299,4 @@ InputsModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { CheckBoxModule, ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };
+export { ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, CheckBoxModule, RadioButtonModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };

package/dist/fesm5/index.js

@@ -514,7 +514,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642572427,
+    publishDate: 1643036475,
     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'
 };
@@ -8323,7 +8323,7 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = __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-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    "
+            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                type=\"button\"\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    "
         }),
         __metadata("design:paramtypes", [ElementRef,
             Renderer2,
@@ -9652,7 +9652,7 @@ var FlatColorPickerHeaderComponent = /** @class */ (function () {
     FlatColorPickerHeaderComponent = __decorate([
         Component({
             selector: '[kendoFlatColorPickerHeader]',
-            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    type=\"button\"\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                type=\"button\"\n                class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], FlatColorPickerHeaderComponent);
@@ -9695,7 +9695,7 @@ var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
     FlatColorPickerActionButtonsComponent = __decorate([
         Component({
             selector: '[kendoFlatColorPickerActionButtons]',
-            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n        >{{getText('applyButton')}}</button>\n    "
+            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n            type=\"button\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n            type=\"button\"\n        >{{getText('applyButton')}}</button>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], FlatColorPickerActionButtonsComponent);
@@ -10693,12 +10693,6 @@ var ColorPickerComponent = /** @class */ (function () {
             _this.isFocused = false;
         });
     };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.arrowButtonMouseDown = function (ev) {
-        ev.preventDefault();
-    };
     /**
      * Clears the value of the ColorPicker.
      */
@@ -10720,6 +10714,7 @@ var ColorPickerComponent = /** @class */ (function () {
         if (this.disabled || this.readonly) {
             return;
         }
+        this.cdr.markForCheck();
         this.closePopup();
         open = isPresent(open) ? open : !this.isOpen;
         if (open) {
@@ -10857,7 +10852,8 @@ var ColorPickerComponent = /** @class */ (function () {
         var _this = this;
         this.ngZone.onStable.pipe(take(1)).subscribe(function () {
             if (_this.flatColorPicker) {
-                var elementToFocus = _this.flatColorPicker.gradient ? _this.flatColorPicker.gradient.gradientDragHandle :
+                var gradient = _this.flatColorPicker.gradient;
+                var elementToFocus = gradient ? gradient.gradientDragHandle :
                     _this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
             }
@@ -10897,7 +10893,8 @@ var ColorPickerComponent = /** @class */ (function () {
     Object.defineProperty(ColorPickerComponent.prototype, "firstFocusableElement", {
         get: function () {
             if (!this.flatColorPicker.header || (this.views.length <= 1 && !this.flatColorPicker.clearButton)) {
-                return this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle : this.flatColorPicker.palette.host;
+                var gradient = this.flatColorPicker.gradient;
+                return gradient ? gradient.gradientDragHandle : this.flatColorPicker.palette.host;
             }
             return this.views.length > 1 ? this.flatColorPicker.header.viewButtonsCollection.toArray()[0] : this.flatColorPicker.header.clearButtonElement;
         },
@@ -10912,7 +10909,12 @@ var ColorPickerComponent = /** @class */ (function () {
             if (this.flatColorPicker.palette) {
                 return this.flatColorPicker.palette.host;
             }
-            return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
+            var gradient = this.flatColorPicker.gradient;
+            var inputs = gradient && gradient.inputs;
+            if (gradient && inputs && inputs.formatView === 'hex') {
+                return inputs.hexInput;
+            }
+            return this.gradientSettings.opacity ? inputs.opacityInput.numericInput : inputs.blueInput;
         },
         enumerable: true,
         configurable: true
@@ -11160,7 +11162,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 #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    "
+            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            tabindex=\"-1\"\n            type=\"button\"\n            class=\"k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button\">\n                <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef,
             PopupService,
@@ -12402,4 +12404,4 @@ var InputsModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { CheckBoxModule, ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };
+export { ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, CheckBoxModule, RadioButtonModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };

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-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    "
+            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                type=\"button\"\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/colorpicker.component.js

@@ -477,12 +477,6 @@ var ColorPickerComponent = /** @class */ (function () {
             _this.isFocused = false;
         });
     };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.arrowButtonMouseDown = function (ev) {
-        ev.preventDefault();
-    };
     /**
      * Clears the value of the ColorPicker.
      */
@@ -504,6 +498,7 @@ var ColorPickerComponent = /** @class */ (function () {
         if (this.disabled || this.readonly) {
             return;
         }
+        this.cdr.markForCheck();
         this.closePopup();
         open = utils_2.isPresent(open) ? open : !this.isOpen;
         if (open) {
@@ -641,7 +636,8 @@ var ColorPickerComponent = /** @class */ (function () {
         var _this = this;
         this.ngZone.onStable.pipe(operators_1.take(1)).subscribe(function () {
             if (_this.flatColorPicker) {
-                var elementToFocus = _this.flatColorPicker.gradient ? _this.flatColorPicker.gradient.gradientDragHandle :
+                var gradient = _this.flatColorPicker.gradient;
+                var elementToFocus = gradient ? gradient.gradientDragHandle :
                     _this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
             }
@@ -681,7 +677,8 @@ var ColorPickerComponent = /** @class */ (function () {
     Object.defineProperty(ColorPickerComponent.prototype, "firstFocusableElement", {
         get: function () {
             if (!this.flatColorPicker.header || (this.views.length <= 1 && !this.flatColorPicker.clearButton)) {
-                return this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle : this.flatColorPicker.palette.host;
+                var gradient = this.flatColorPicker.gradient;
+                return gradient ? gradient.gradientDragHandle : this.flatColorPicker.palette.host;
             }
             return this.views.length > 1 ? this.flatColorPicker.header.viewButtonsCollection.toArray()[0] : this.flatColorPicker.header.clearButtonElement;
         },
@@ -696,7 +693,12 @@ var ColorPickerComponent = /** @class */ (function () {
             if (this.flatColorPicker.palette) {
                 return this.flatColorPicker.palette.host;
             }
-            return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
+            var gradient = this.flatColorPicker.gradient;
+            var inputs = gradient && gradient.inputs;
+            if (gradient && inputs && inputs.formatView === 'hex') {
+                return inputs.hexInput;
+            }
+            return this.gradientSettings.opacity ? inputs.opacityInput.numericInput : inputs.blueInput;
         },
         enumerable: true,
         configurable: true
@@ -944,7 +946,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 #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    "
+            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            tabindex=\"-1\"\n            type=\"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-actions.component.js

@@ -43,7 +43,7 @@ var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
     FlatColorPickerActionButtonsComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoFlatColorPickerActionButtons]',
-            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n        >{{getText('applyButton')}}</button>\n    "
+            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n            type=\"button\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n            type=\"button\"\n        >{{getText('applyButton')}}</button>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
     ], FlatColorPickerActionButtonsComponent);

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

@@ -87,7 +87,7 @@ var FlatColorPickerHeaderComponent = /** @class */ (function () {
     FlatColorPickerHeaderComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoFlatColorPickerHeader]',
-            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    type=\"button\"\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                type=\"button\"\n                class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
     ], FlatColorPickerHeaderComponent);

package/dist/npm/index.js

@@ -9,8 +9,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./main"), exports);
-var checkbox_module_1 = require("./checkbox.module");
-exports.CheckBoxModule = checkbox_module_1.CheckBoxModule
 var color_contrast_svg_component_1 = require("./colorpicker/color-contrast-svg.component");
 exports.ColorContrastSvgComponent = color_contrast_svg_component_1.ColorContrastSvgComponent
 var color_input_component_1 = require("./colorpicker/color-input.component");
@@ -45,8 +43,6 @@ var masking_service_1 = require("./maskedtextbox/masking.service");
 exports.MaskingService = masking_service_1.MaskingService
 var messages_2 = require("./numerictextbox/localization/messages");
 exports.NumericTextBoxMessages = messages_2.NumericTextBoxMessages
-var radiobutton_module_1 = require("./radiobutton.module");
-exports.RadioButtonModule = radiobutton_module_1.RadioButtonModule
 var custom_messages_component_2 = require("./rangeslider/localization/custom-messages.component");
 exports.RangeSliderCustomMessagesComponent = custom_messages_component_2.RangeSliderCustomMessagesComponent
 var messages_3 = require("./rangeslider/localization/messages");

package/dist/npm/main.js

@@ -41,6 +41,10 @@ var textbox_module_1 = require("./textbox.module");
 exports.TextBoxModule = textbox_module_1.TextBoxModule;
 var textarea_module_1 = require("./textarea.module");
 exports.TextAreaModule = textarea_module_1.TextAreaModule;
+var checkbox_module_1 = require("./checkbox.module");
+exports.CheckBoxModule = checkbox_module_1.CheckBoxModule;
+var radiobutton_module_1 = require("./radiobutton.module");
+exports.RadioButtonModule = radiobutton_module_1.RadioButtonModule;
 // All ColorPicker Components
 var colorpicker_component_1 = require("./colorpicker/colorpicker.component");
 exports.ColorPickerComponent = colorpicker_component_1.ColorPickerComponent;

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: 1642572427,
+    publishDate: 1643036475,
     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'
 };