@progress/kendo-angular-inputs 8.0.1-dev.202201201319 → 8.0.2-dev.202201251557

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

@@ -182,7 +182,7 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-colorinput',
-            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-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", [ElementRef,
             Renderer2,

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

@@ -475,12 +475,6 @@ var ColorPickerComponent = /** @class */ (function () {
             _this.isFocused = false;
         });
     };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.arrowButtonMouseDown = function (ev) {
-        ev.preventDefault();
-    };
     /**
      * Clears the value of the ColorPicker.
      */
@@ -502,6 +496,7 @@ var ColorPickerComponent = /** @class */ (function () {
         if (this.disabled || this.readonly) {
             return;
         }
+        this.cdr.markForCheck();
         this.closePopup();
         open = isPresent(open) ? open : !this.isOpen;
         if (open) {
@@ -639,7 +634,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();
             }
@@ -679,7 +675,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;
         },
@@ -694,7 +691,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
@@ -942,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 #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", [ElementRef,
             PopupService,

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

@@ -41,7 +41,7 @@ var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
     FlatColorPickerActionButtonsComponent = tslib_1.__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    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], FlatColorPickerActionButtonsComponent);

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

@@ -85,7 +85,7 @@ var FlatColorPickerHeaderComponent = /** @class */ (function () {
     FlatColorPickerHeaderComponent = tslib_1.__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    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], FlatColorPickerHeaderComponent);

package/dist/es/package-metadata.js

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

package/dist/es/textarea/textarea-suffix.component.js

@@ -26,7 +26,7 @@ var TextAreaSuffixComponent = /** @class */ (function () {
         this.hostClass = true;
     }
     tslib_1.__decorate([
-        HostBinding('class.k-textarea-suffix'),
+        HostBinding('class.k-input-suffix'),
         tslib_1.__metadata("design:type", Boolean)
     ], TextAreaSuffixComponent.prototype, "hostClass", void 0);
     TextAreaSuffixComponent = tslib_1.__decorate([

package/dist/es/textarea/textarea.component.js

@@ -295,6 +295,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
                     tabbing = false;
                 }
             }));
+            _this.handleFlow();
         });
         var stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(function (input) {
@@ -320,6 +321,9 @@ var TextAreaComponent = /** @class */ (function (_super) {
     TextAreaComponent.prototype.ngOnChanges = function (changes) {
         var hostElement = this.hostElement.nativeElement;
         var element = this.input.nativeElement;
+        if (changes.flow) {
+            this.handleFlow();
+        }
         if (changes.resizable) {
             if (this.resizable === 'auto') {
                 this.initialHeight = element.offsetHeight;
@@ -483,6 +487,16 @@ var TextAreaComponent = /** @class */ (function (_super) {
             this.renderer.addClass(elem, classes.toAdd);
         }
     };
+    TextAreaComponent.prototype.handleFlow = function () {
+        var isVertical = this.flow === 'vertical';
+        var hostElement = this.hostElement.nativeElement;
+        var element = this.input.nativeElement;
+        var suffix = hostElement.children[1];
+        this.renderer.setStyle(element, 'flex', isVertical ? 'none' : '1');
+        if (suffix) {
+            this.renderer.setStyle(suffix, 'align-items', isVertical ? 'center' : 'start');
+        }
+    };
     var TextAreaComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -494,12 +508,12 @@ var TextAreaComponent = /** @class */ (function (_super) {
         tslib_1.__metadata("design:type", Boolean)
     ], TextAreaComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-flex-col'),
+        HostBinding('class.\!k-flex-col'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], TextAreaComponent.prototype, "flowCol", null);
     tslib_1.__decorate([
-        HostBinding('class.k-flex-row'),
+        HostBinding('class.\!k-flex-row'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], TextAreaComponent.prototype, "flowRow", null);
@@ -574,7 +588,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
             ],
             selector: 'kendo-textarea',
             template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input-inner\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    ",
-            styles: ["\n        :host(.k-flex-col) {\n            flex-direction: column !important;\n        }\n        :host(.k-flex-row) {\n            flex-direction: row !important;\n        }\n    "]
+            styles: ["\n        :host {\n            display: inline-flex;\n        }\n    "]
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             NgZone,

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

@@ -175,6 +175,7 @@ ColorInputComponent = tslib_1.__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>

package/dist/es2015/colorpicker/colorpicker.component.d.ts

@@ -280,10 +280,6 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * @hidden
      */
     handleWrapperBlur(): void;
-    /**
-     * @hidden
-     */
-    arrowButtonMouseDown(ev: MouseEvent): void;
     /**
      * Clears the value of the ColorPicker.
      */

package/dist/es2015/colorpicker/colorpicker.component.js

@@ -405,12 +405,6 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             this.isFocused = false;
         });
     }
-    /**
-     * @hidden
-     */
-    arrowButtonMouseDown(ev) {
-        ev.preventDefault();
-    }
     /**
      * Clears the value of the ColorPicker.
      */
@@ -432,6 +426,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) {
@@ -566,7 +561,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();
             }
@@ -604,7 +600,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;
     }
@@ -615,7 +612,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;
@@ -902,9 +904,8 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_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>

package/dist/es2015/colorpicker/flatcolorpicker-actions.component.js

@@ -47,11 +47,13 @@ FlatColorPickerActionButtonsComponent = tslib_1.__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>
     `
     }),

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

@@ -87,6 +87,7 @@ FlatColorPickerHeaderComponent = tslib_1.__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')"
@@ -105,6 +106,7 @@ FlatColorPickerHeaderComponent = tslib_1.__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')"