@progress/kendo-angular-inputs 10.1.1-dev.202210121020 → 10.1.1-dev.202210241319

package/esm2015/colorpicker/flatcolorpicker.component.js

@@ -2,11 +2,12 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, EventEmitter, forwardRef, HostBinding, Input, isDevMode, Output, ViewChild } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+/* eslint-disable no-unused-expressions */
+import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, isDevMode, Output, ViewChild, HostListener } from "@angular/core";
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { isChanged, KendoInput } from '@progress/kendo-angular-common';
+import { findFocusableChild, isChanged, KendoInput } from '@progress/kendo-angular-common';
 import { validatePackage } from "@progress/kendo-licensing";
 import { FlatColorPickerLocalizationService } from './localization/flatcolorpicker-localization.service';
 import { FlatColorPickerService } from './services/flatcolorpicker.service';
@@ -14,6 +15,8 @@ import { packageMetadata } from "../package-metadata";
 import { ColorPickerCancelEvent } from './events';
 import { parseColor } from './utils';
 import { isPresent } from '../common/utils';
+import { DRAGHANDLE_MOVE_SPEED, DRAGHANDLE_MOVE_SPEED_SMALL_STEP } from "./constants";
+import { take } from "rxjs/operators";
 import * as i0 from "@angular/core";
 import * as i1 from "./services/flatcolorpicker.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -23,7 +26,6 @@ import * as i5 from "./color-palette.component";
 import * as i6 from "./flatcolorpicker-actions.component";
 import * as i7 from "./localization/localized-colorpicker-messages.directive";
 import * as i8 from "@angular/common";
-import * as i9 from "./focus-on-dom-ready.directive";
 /**
  * Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
  *
@@ -31,14 +33,16 @@ import * as i9 from "./focus-on-dom-ready.directive";
  * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 export class FlatColorPickerComponent {
-    constructor(host, service, localizationService, cdr, renderer, ngZone) {
+    constructor(host, service, localizationService, cdr, renderer, ngZone, injector) {
         this.host = host;
         this.service = service;
         this.localizationService = localizationService;
         this.cdr = cdr;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.injector = injector;
         this.hostClasses = true;
+        this.ariaRole = 'textbox';
         /**
          * Sets the read-only state of the FlatColorPicker.
          *
@@ -111,9 +115,15 @@ export class FlatColorPickerComponent {
          */
         this.actionButtonClick = new EventEmitter();
         this._tabindex = 0;
-        this._gradientSettings = { opacity: true, delay: 0 };
+        this._gradientSettings = {
+            opacity: true,
+            delay: 0,
+            gradientSliderStep: DRAGHANDLE_MOVE_SPEED,
+            gradientSliderSmallStep: DRAGHANDLE_MOVE_SPEED_SMALL_STEP
+        };
         this._paletteSettings = {};
         this.subscriptions = new Subscription();
+        this.internalNavigation = false;
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
         validatePackage(packageMetadata);
@@ -128,7 +138,40 @@ export class FlatColorPickerComponent {
         return this.readonly;
     }
     get hostTabindex() {
-        return this.tabindex;
+        var _a;
+        return ((_a = this.tabindex) === null || _a === void 0 ? void 0 : _a.toString()) || '0';
+    }
+    get isControlInvalid() {
+        var _a, _b;
+        return (_b = ((_a = this.control) === null || _a === void 0 ? void 0 : _a.invalid)) === null || _b === void 0 ? void 0 : _b.toString();
+    }
+    get isDisabled() {
+        var _a;
+        return ((_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString()) || undefined;
+    }
+    /**
+     * @hidden
+     */
+    enterHandler(event) {
+        if (event.target !== this.host.nativeElement) {
+            return;
+        }
+        event.preventDefault();
+        this.internalNavigation = true;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => { var _a; return (_a = this.firstFocusable) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }
+    /**
+     * @hidden
+     */
+    escapeHandler() {
+        this.internalNavigation = false;
+        this.host.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    focusHandler(ev) {
+        this.internalNavigation = ev.target !== this.host.nativeElement;
     }
     /**
      * Specifies the initially selected color.
@@ -145,9 +188,14 @@ export class FlatColorPickerComponent {
      * @default 0
      */
     set tabindex(value) {
-        const tabindex = Number(value);
-        const defaultValue = 0;
-        this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+        if (isPresent(value)) {
+            const tabindex = Number(value);
+            this._tabindex = !isNaN(tabindex) ? tabindex : 0;
+        }
+        else {
+            // Allows removal of the tabindex attribute
+            this._tabindex = value;
+        }
     }
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
@@ -170,8 +218,33 @@ export class FlatColorPickerComponent {
     get paletteSettings() {
         return this._paletteSettings;
     }
+    /**
+     * @hidden
+     */
+    get innerTabIndex() {
+        return this.internalNavigation ? 0 : -1;
+    }
+    /**
+     * @hidden
+     */
+    get firstFocusable() {
+        if (this.headerHasContent) {
+            return this.headerElement.nativeElement.querySelector('.k-button');
+        }
+        return this.activeView === 'gradient' ? this.gradient : this.palette;
+    }
+    /**
+     * @hidden
+     */
+    get lastFocusable() {
+        if (this.preview) {
+            return this.footer.lastButton.nativeElement;
+        }
+        return this.activeView === 'gradient' ? this.gradient : this.palette;
+    }
     ngOnInit() {
         this.selection = this.value;
+        this.control = this.injector.get(NgControl, null);
         this._paletteSettings = this.service.getPaletteSettings(this._paletteSettings, this.format);
         this.setActiveView();
     }
@@ -179,6 +252,7 @@ export class FlatColorPickerComponent {
         this.setHostElementAriaLabel();
         this.initDomEvents();
         this.setSizingVariables();
+        this.removeGradientAttributes();
     }
     ngOnChanges(changes) {
         if (isChanged('value', changes)) {
@@ -195,6 +269,20 @@ export class FlatColorPickerComponent {
         }
         this.subscriptions.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    onTab(ev) {
+        const { shiftKey } = ev;
+        const nextTabStop = this.preview ? this.footer.firstButton.nativeElement : this.headerHasContent ? findFocusableChild(this.headerElement.nativeElement) : null;
+        const previousTabStop = this.headerHasContent ? findFocusableChild(this.headerElement.nativeElement) : this.preview ? this.footer.lastButton.nativeElement : null;
+        if (!nextTabStop && !previousTabStop) {
+            return;
+        }
+        ev.preventDefault();
+        // eslint-disable-next-line no-unused-expressions
+        shiftKey ? previousTabStop === null || previousTabStop === void 0 ? void 0 : previousTabStop.focus() : nextTabStop === null || nextTabStop === void 0 ? void 0 : nextTabStop.focus();
+    }
     /**
      * @hidden
      */
@@ -212,7 +300,7 @@ export class FlatColorPickerComponent {
      * Focuses the wrapper of the FlatColorPicker.
      */
     focus() {
-        if (this.disabled && this.focused) {
+        if (this.disabled || this.focused) {
             return;
         }
         this.host.nativeElement.focus();
@@ -249,12 +337,14 @@ export class FlatColorPickerComponent {
         }
         this.activeView = view;
         this.activeViewChange.emit(view);
-        if (this.activeView === 'gradient') {
-            this.ngZone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    this.gradient.gradientDragHandle.nativeElement.focus();
-                });
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                var _a;
+                (_a = this[this.activeView]) === null || _a === void 0 ? void 0 : _a.focus();
             });
+        });
+        if (this.activeView === 'gradient') {
+            this.removeGradientAttributes();
         }
     }
     /**
@@ -262,6 +352,7 @@ export class FlatColorPickerComponent {
      */
     onClearButtonClick() {
         this.resetInnerComponentValue();
+        this.internalNavigation = false;
         this.host.nativeElement.focus();
     }
     /**
@@ -372,9 +463,13 @@ export class FlatColorPickerComponent {
             }));
         });
     }
+    removeGradientAttributes() {
+        this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'role');
+        this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'aria-label');
+    }
 }
-FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FlatColorPickerService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FlatColorPickerService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -394,7 +489,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             provide: L10N_PREFIX,
             useValue: 'kendo.flatcolorpicker'
         }
-    ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], exportAs: ["kendoFlatColorPicker"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerElement", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true }, { propertyName: "gradientElement", first: true, predicate: ["gradient"], descendants: true, read: ElementRef }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], exportAs: ["kendoFlatColorPicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoFlatColorPickerLocalizedMessages
             i18n-flatColorPickerNoColor="kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
             flatColorPickerNoColor="Flatcolorpicker no color chosen"
@@ -425,9 +520,26 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             i18n-applyButton="kendo.flatcolorpicker.applyButton|The message for the Apply action button."
             applyButton="Apply"
             i18n-cancelButton="kendo.flatcolorpicker.cancelButton|The message for the Cancel action button."
-            cancelButton="Cancel">
+            cancelButton="Cancel"
+            i18n-redChannelLabel="kendo.flatcolorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.flatcolorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.flatcolorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.flatcolorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.flatcolorpicker.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.flatcolorpicker.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.flatcolorpicker.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.flatcolorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
         </ng-container>
         <div kendoFlatColorPickerHeader
+            [innerTabIndex]="this.innerTabIndex"
             *ngIf="headerHasContent"
             #header
             [clearButton]="clearButton"
@@ -438,24 +550,25 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             [preview]="preview"
             (clearButtonClick)="onClearButtonClick()"
             (viewChange)="onViewChange($event)"
-            (valuePaneClick)="resetSelection($event)">
-        </div>
+            (valuePaneClick)="resetSelection($event)"
+            (tabOut)="lastFocusable.focus()"></div>
         <div class="k-coloreditor-views k-vstack">
             <kendo-colorgradient #gradient
+                [tabindex]="innerTabIndex"
                 *ngIf="activeView === 'gradient'"
-                [tabindex]="null"
                 [value]="selection"
                 [format]="format"
                 [opacity]="gradientSettings.opacity"
                 [delay]="gradientSettings.delay"
                 [contrastTool]="gradientSettings.contrastTool"
+                [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
+                [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
                 (valueChange)="handleValueChange($event)"
-            >
-            </kendo-colorgradient>
+            ></kendo-colorgradient>
             <kendo-colorpalette #palette
+                [tabindex]="innerTabIndex"
                 *ngIf="activeView === 'palette'"
-                kendoFocusOnDomReady
                 [palette]="paletteSettings.palette"
                 [columns]="paletteSettings.columns"
                 [tileSize]="paletteSettings.tileSize"
@@ -463,15 +576,16 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 [value]="selection"
                 [readonly]="readonly"
                 (valueChange)="handleValueChange($event)"
-            >
-            </kendo-colorpalette>
+            ></kendo-colorpalette>
         </div>
-        <div kendoFlatColorPickerActionButtons *ngIf="preview"
+        <div kendoFlatColorPickerActionButtons 
+            [innerTabIndex]="innerTabIndex"
+            *ngIf="preview"
             #footer
             [ngClass]="'k-justify-content-' + actionsLayout"
-            (actionButtonClick)="onAction($event)">
-        </div>
-`, isInline: true, components: [{ type: i3.FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick"] }, { type: i4.ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: i5.ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: i6.FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", outputs: ["actionButtonClick"] }], directives: [{ type: i7.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.FocusOnDomReadyDirective, selector: "[kendoFocusOnDomReady]" }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            (actionButtonClick)="onAction($event)"
+            (tabOut)="firstFocusable.focus()"></div>
+`, isInline: true, components: [{ type: i3.FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { type: i4.ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: i5.ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: i6.FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }], directives: [{ type: i7.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -529,9 +643,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-applyButton="kendo.flatcolorpicker.applyButton|The message for the Apply action button."
             applyButton="Apply"
             i18n-cancelButton="kendo.flatcolorpicker.cancelButton|The message for the Cancel action button."
-            cancelButton="Cancel">
+            cancelButton="Cancel"
+            i18n-redChannelLabel="kendo.flatcolorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.flatcolorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.flatcolorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.flatcolorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.flatcolorpicker.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.flatcolorpicker.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.flatcolorpicker.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.flatcolorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
         </ng-container>
         <div kendoFlatColorPickerHeader
+            [innerTabIndex]="this.innerTabIndex"
             *ngIf="headerHasContent"
             #header
             [clearButton]="clearButton"
@@ -542,24 +673,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [preview]="preview"
             (clearButtonClick)="onClearButtonClick()"
             (viewChange)="onViewChange($event)"
-            (valuePaneClick)="resetSelection($event)">
-        </div>
+            (valuePaneClick)="resetSelection($event)"
+            (tabOut)="lastFocusable.focus()"></div>
         <div class="k-coloreditor-views k-vstack">
             <kendo-colorgradient #gradient
+                [tabindex]="innerTabIndex"
                 *ngIf="activeView === 'gradient'"
-                [tabindex]="null"
                 [value]="selection"
                 [format]="format"
                 [opacity]="gradientSettings.opacity"
                 [delay]="gradientSettings.delay"
                 [contrastTool]="gradientSettings.contrastTool"
+                [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
+                [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
                 (valueChange)="handleValueChange($event)"
-            >
-            </kendo-colorgradient>
+            ></kendo-colorgradient>
             <kendo-colorpalette #palette
+                [tabindex]="innerTabIndex"
                 *ngIf="activeView === 'palette'"
-                kendoFocusOnDomReady
                 [palette]="paletteSettings.palette"
                 [columns]="paletteSettings.columns"
                 [tileSize]="paletteSettings.tileSize"
@@ -567,17 +699,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [value]="selection"
                 [readonly]="readonly"
                 (valueChange)="handleValueChange($event)"
-            >
-            </kendo-colorpalette>
+            ></kendo-colorpalette>
         </div>
-        <div kendoFlatColorPickerActionButtons *ngIf="preview"
+        <div kendoFlatColorPickerActionButtons 
+            [innerTabIndex]="innerTabIndex"
+            *ngIf="preview"
             #footer
             [ngClass]="'k-justify-content-' + actionsLayout"
-            (actionButtonClick)="onAction($event)">
-        </div>
+            (actionButtonClick)="onAction($event)"
+            (tabOut)="firstFocusable.focus()"></div>
 `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FlatColorPickerService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FlatColorPickerService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-flatcolorpicker']
             }, {
@@ -598,6 +731,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], hostTabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isControlInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], enterHandler: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }], escapeHandler: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }], focusHandler: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
             }], readonly: [{
                 type: Input
             }], disabled: [{
@@ -632,14 +783,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], header: [{
                 type: ViewChild,
-                args: ['header', { static: false }]
+                args: ['header']
+            }], headerElement: [{
+                type: ViewChild,
+                args: ['header', { read: ElementRef }]
             }], gradient: [{
                 type: ViewChild,
-                args: ['gradient', { static: false }]
+                args: ['gradient']
+            }], gradientElement: [{
+                type: ViewChild,
+                args: ['gradient', { read: ElementRef }]
             }], palette: [{
                 type: ViewChild,
-                args: ['palette', { static: false }]
+                args: ['palette']
             }], footer: [{
                 type: ViewChild,
-                args: ['footer', { static: false }]
+                args: ['footer']
             }] } });

package/esm2015/colorpicker/localization/messages.js

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class ColorPickerMessages extends ComponentMessages {
 }
 ColorPickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ColorPickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
+ColorPickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerMessages, decorators: [{
             type: Directive,
             args: [{
@@ -44,6 +44,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], alphaInputPlaceholder: [{
                 type: Input
+            }], redChannelLabel: [{
+                type: Input
+            }], greenChannelLabel: [{
+                type: Input
+            }], blueChannelLabel: [{
+                type: Input
+            }], alphaChannelLabel: [{
+                type: Input
             }], passContrast: [{
                 type: Input
             }], failContrast: [{

package/esm2015/colorpicker.module.js

@@ -21,6 +21,7 @@ import { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.direc
 import { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
 import { ContrastComponent } from './colorpicker/contrast.component';
 import { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
+import { NumericLabelDirective } from './colorpicker/color-gradient-numeric-label.directive';
 import * as i0 from "@angular/core";
 const PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
@@ -31,6 +32,7 @@ const PUBLIC_DIRECTIVES = [
     ColorPickerCustomMessagesComponent
 ];
 const INTERNAL_DIRECTIVES = [
+    NumericLabelDirective,
     ColorInputComponent,
     FocusOnDomReadyDirective,
     ContrastComponent,
@@ -51,7 +53,8 @@ ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         ColorGradientComponent,
         FlatColorPickerComponent,
         LocalizedColorPickerMessagesDirective,
-        ColorPickerCustomMessagesComponent, ColorInputComponent,
+        ColorPickerCustomMessagesComponent, NumericLabelDirective,
+        ColorInputComponent,
         FocusOnDomReadyDirective,
         ContrastComponent,
         ContrastValidationComponent,

package/esm2015/main.js

@@ -57,6 +57,7 @@ export { RangeSliderCustomMessagesComponent } from './rangeslider/localization/c
 export { SwitchCustomMessagesComponent } from './switch/localization/custom-messages.component';
 export { TextBoxCustomMessagesComponent } from './textbox/localization/custom-messages.component';
 export { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
+export { NumericLabelDirective } from './colorpicker/color-gradient-numeric-label.directive';
 export { SignatureComponent } from './signature/signature.component';
 export { SignatureModule } from './signature.module';
 export { SignatureOpenEvent, SignatureCloseEvent } from './signature/events';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665569942,
+    publishDate: 1666617508,
     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/esm2015/signature/localization/messages.js

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class SignatureMessages extends ComponentMessages {
 }
 SignatureMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SignatureMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SignatureMessages, selector: "kendo-signature-messages-base", inputs: { clear: "clear", minimize: "minimize", maximize: "maximize" }, usesInheritance: true, ngImport: i0 });
+SignatureMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SignatureMessages, selector: "kendo-signature-messages-base", inputs: { clear: "clear", minimize: "minimize", maximize: "maximize", canvasLabel: "canvasLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureMessages, decorators: [{
             type: Directive,
             args: [{
@@ -24,4 +24,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], maximize: [{
                 type: Input
+            }], canvasLabel: [{
+                type: Input
             }] } });