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

package/fesm2015/kendo-angular-inputs.js

@@ -10,7 +10,7 @@ import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, thro
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import * as i3 from '@progress/kendo-angular-common';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, closest as closest$1 } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, findFocusableChild, closest as closest$1 } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -535,7 +535,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665569942,
+    publishDate: 1666092870,
     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'
 };
@@ -8268,6 +8268,10 @@ const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
  * @hidden
  */
 const DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+const DRAGHANDLE_MOVE_SPEED_SMALL_STEP = 2;
 /**
  * @hidden
  */
@@ -8364,9 +8368,11 @@ class FlatColorPickerHeaderComponent {
     constructor(localizationService) {
         this.localizationService = localizationService;
         this.hostClasses = true;
+        this.innerTabIndex = -1;
         this.viewChange = new EventEmitter();
         this.valuePaneClick = new EventEmitter();
         this.clearButtonClick = new EventEmitter();
+        this.tabOut = new EventEmitter();
     }
     onViewButtonClick(view) {
         this.activeView = view;
@@ -8381,21 +8387,30 @@ class FlatColorPickerHeaderComponent {
     getText(text) {
         return this.localizationService.get(text);
     }
+    onHeaderTabOut(ev, index) {
+        if (index === 0) {
+            ev.preventDefault();
+            this.tabOut.emit();
+        }
+    }
 }
 FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <div class="k-coloreditor-header-actions k-hstack">
-            <div *ngIf="viewButtons" class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views"
+            <div 
+                *ngIf="viewButtons" 
+                class="k-button-group k-button-group-flat">
+                <button *ngFor="let view of views; let i = index;"
                     #viewButtons
                     type="button"
+                    [tabindex]="innerTabIndex.toString()"
                     (click)="onViewButtonClick(view)"
+                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
                     class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-selected' : ''"
-                >
+                    [ngClass]="activeView === view ? 'k-selected' : ''">
                     <span
                         class="k-button-icon k-icon"
                         [ngClass]="getViewButtonIcon(view)">
@@ -8405,7 +8420,9 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         </div>
         <div class="k-spacer"></div>
         <div class="k-coloreditor-header-actions k-hstack">
-            <button *ngIf="clearButton"
+            <button
+                [tabindex]="innerTabIndex.toString()"
+                *ngIf="clearButton"
                 #clearButton
                 type="button"
                 class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
@@ -8414,7 +8431,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 (click)="clearButtonClick.emit()">
                     <span class="k-button-icon k-icon k-i-droplet-slash"></span>
             </button>
-            <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
                 <span
                     class="k-coloreditor-preview-color k-color-preview"
                     [attr.title]="getText('previewColor')"
@@ -8435,17 +8452,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: '[kendoFlatColorPickerHeader]',
                     template: `
         <div class="k-coloreditor-header-actions k-hstack">
-            <div *ngIf="viewButtons" class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views"
+            <div 
+                *ngIf="viewButtons" 
+                class="k-button-group k-button-group-flat">
+                <button *ngFor="let view of views; let i = index;"
                     #viewButtons
                     type="button"
+                    [tabindex]="innerTabIndex.toString()"
                     (click)="onViewButtonClick(view)"
+                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
                     class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-selected' : ''"
-                >
+                    [ngClass]="activeView === view ? 'k-selected' : ''">
                     <span
                         class="k-button-icon k-icon"
                         [ngClass]="getViewButtonIcon(view)">
@@ -8455,7 +8475,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
         <div class="k-spacer"></div>
         <div class="k-coloreditor-header-actions k-hstack">
-            <button *ngIf="clearButton"
+            <button
+                [tabindex]="innerTabIndex.toString()"
+                *ngIf="clearButton"
                 #clearButton
                 type="button"
                 class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
@@ -8464,7 +8486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 (click)="clearButtonClick.emit()">
                     <span class="k-button-icon k-icon k-i-droplet-slash"></span>
             </button>
-            <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
                 <span
                     class="k-coloreditor-preview-color k-color-preview"
                     [attr.title]="getText('previewColor')"
@@ -8493,6 +8515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], preview: [{
                 type: Input
+            }], innerTabIndex: [{
+                type: Input
             }], value: [{
                 type: Input
             }], selection: [{
@@ -8503,12 +8527,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], clearButtonClick: [{
                 type: Output
+            }], tabOut: [{
+                type: Output
             }], viewButtonsCollection: [{
                 type: ViewChildren,
                 args: ['viewButtons', { read: ElementRef }]
             }], clearButtonElement: [{
                 type: ViewChild,
-                args: ['clearButton', { read: ElementRef, static: false }]
+                args: ['clearButton', { read: ElementRef }]
             }] } });
 
 /**
@@ -8630,6 +8656,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class NumericLabelDirective {
+    constructor(host) {
+        this.host = host;
+    }
+    ngOnInit() {
+        const localizationToken = `${this.kendoAdditionalNumericLabel}ChannelLabel`;
+        this.host.numericInput.nativeElement.setAttribute('aria-label', this.localizationService.get(localizationToken));
+    }
+}
+NumericLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericLabelDirective, deps: [{ token: NumericTextBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
+NumericLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: { kendoAdditionalNumericLabel: "kendoAdditionalNumericLabel", localizationService: "localizationService" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericLabelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoAdditionalNumericLabel]' }]
+        }], ctorParameters: function () { return [{ type: NumericTextBoxComponent }]; }, propDecorators: { kendoAdditionalNumericLabel: [{
+                type: Input
+            }], localizationService: [{
+                type: Input
+            }] } });
+
 /**
  * @hidden
  */
@@ -8642,6 +8691,10 @@ class ColorInputComponent {
          * The id of the hex input.
          */
         this.focusableId = `k-${guid()}`;
+        /**
+         * The inputs tabindex.
+         */
+        this.tabindex = -1;
         /**
          * Sets whether the alpha slider will be shown.
          */
@@ -8658,6 +8711,10 @@ class ColorInputComponent {
          * Emits a parsed rgba string color.
          */
         this.valueChange = new EventEmitter();
+        /**
+         * Emits when the user tabs out of the last focusable input.
+         */
+        this.tabOut = new EventEmitter();
         this.colorInputClass = true;
         /**
          * The rgba inputs values.
@@ -8727,6 +8784,14 @@ class ColorInputComponent {
     handleHexInputBlur() {
         this.hex = parseColor(this.value, 'hex', this.opacity);
     }
+    focusLast() {
+        this.lastInput().focus();
+    }
+    onTab() {
+        if (this.opacity) {
+            return;
+        }
+    }
     toggleFormatView() {
         this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
     }
@@ -8736,14 +8801,20 @@ class ColorInputComponent {
         }
         this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', () => this.toggleFormatView()));
     }
+    lastInput() {
+        var _a;
+        return ((_a = this.hexInput) === null || _a === void 0 ? void 0 : _a.nativeElement) || this.opacityInput || this.blueInput;
+    }
 }
 ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorInputComponent, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true, read: ElementRef }, { propertyName: "blueInput", first: true, predicate: ["blueInput"], descendants: true, read: ElementRef }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorInputComponent, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blueInput"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
             <button #toggleFormatButton
                 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"
+                [disabled]="disabled"
+                [tabindex]="tabindex.toString()"
                 type="button"
             >
                 <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
@@ -8759,6 +8830,8 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [value]="hex || ''"
                 (blur)="handleHexInputBlur()"
                 (input)="handleHexValueChange(hexInput.value)"
+                [tabindex]="tabindex.toString()"
+                (keydown.tab)="$event.preventDefault(); tabOut.emit();"
             />
             <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
         </div>
@@ -8766,8 +8839,11 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             <div class="k-vstack">
                 <kendo-numerictextbox
                     #red
+                    kendoAdditionalNumericLabel="red"
+                    [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
+                    [tabindex]="tabindex"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.r"
@@ -8783,8 +8859,11 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             <div class="k-vstack">
                 <kendo-numerictextbox
                     #green
+                    kendoAdditionalNumericLabel="green"
+                    [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
+                    [tabindex]="tabindex"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.g"
@@ -8800,8 +8879,11 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             <div class="k-vstack">
                 <kendo-numerictextbox
                     #blue
+                    kendoAdditionalNumericLabel="blue"
+                    [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
+                    [tabindex]="tabindex"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.b"
@@ -8810,15 +8892,19 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     [format]="'n'"
                     [decimals]="0"
                     (blur)="handleRgbaInputBlur()"
-                    (valueChange)="handleRgbaValueChange()">
+                    (valueChange)="handleRgbaValueChange()"
+                    (keydown.tab)="onTab()">
                 </kendo-numerictextbox>
                 <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
             </div>
             <div class="k-vstack" *ngIf="opacity">
                 <kendo-numerictextbox  #opacityInput
                     #alpha
+                    kendoAdditionalNumericLabel="alpha"
+                    [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
+                    [tabindex]="tabindex"
                     [min]="0"
                     [max]="1"
                     [(value)]="rgba.a"
@@ -8828,12 +8914,13 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     [format]="'n2'"
                     [decimals]="2"
                     (blur)="handleRgbaInputBlur()"
-                    (valueChange)="handleRgbaValueChange()">
+                    (valueChange)="handleRgbaValueChange()"
+                    (keydown.tab)="$event.preventDefault(); tabOut.emit();">
                 </kendo-numerictextbox>
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, components: [{ type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -8844,6 +8931,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 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"
+                [disabled]="disabled"
+                [tabindex]="tabindex.toString()"
                 type="button"
             >
                 <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
@@ -8859,6 +8948,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [value]="hex || ''"
                 (blur)="handleHexInputBlur()"
                 (input)="handleHexValueChange(hexInput.value)"
+                [tabindex]="tabindex.toString()"
+                (keydown.tab)="$event.preventDefault(); tabOut.emit();"
             />
             <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
         </div>
@@ -8866,8 +8957,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <div class="k-vstack">
                 <kendo-numerictextbox
                     #red
+                    kendoAdditionalNumericLabel="red"
+                    [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
+                    [tabindex]="tabindex"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.r"
@@ -8883,8 +8977,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <div class="k-vstack">
                 <kendo-numerictextbox
                     #green
+                    kendoAdditionalNumericLabel="green"
+                    [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
+                    [tabindex]="tabindex"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.g"
@@ -8900,8 +8997,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <div class="k-vstack">
                 <kendo-numerictextbox
                     #blue
+                    kendoAdditionalNumericLabel="blue"
+                    [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
+                    [tabindex]="tabindex"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.b"
@@ -8910,15 +9010,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [format]="'n'"
                     [decimals]="0"
                     (blur)="handleRgbaInputBlur()"
-                    (valueChange)="handleRgbaValueChange()">
+                    (valueChange)="handleRgbaValueChange()"
+                    (keydown.tab)="onTab()">
                 </kendo-numerictextbox>
                 <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
             </div>
             <div class="k-vstack" *ngIf="opacity">
                 <kendo-numerictextbox  #opacityInput
                     #alpha
+                    kendoAdditionalNumericLabel="alpha"
+                    [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
+                    [tabindex]="tabindex"
                     [min]="0"
                     [max]="1"
                     [(value)]="rgba.a"
@@ -8928,7 +9032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [format]="'n2'"
                     [decimals]="2"
                     (blur)="handleRgbaInputBlur()"
-                    (valueChange)="handleRgbaValueChange()">
+                    (valueChange)="handleRgbaValueChange()"
+                    (keydown.tab)="$event.preventDefault(); tabOut.emit();">
                 </kendo-numerictextbox>
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
@@ -8939,6 +9044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], formatView: [{
                 type: Input
+            }], tabindex: [{
+                type: Input
             }], value: [{
                 type: Input
             }], opacity: [{
@@ -8949,6 +9056,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], tabOut: [{
+                type: Output
             }], colorInputClass: [{
                 type: HostBinding,
                 args: ['class.k-colorgradient-inputs']
@@ -8957,13 +9066,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-hstack']
             }], opacityInput: [{
                 type: ViewChild,
-                args: ['opacityInput', { static: false }]
+                args: ['opacityInput']
             }], hexInput: [{
                 type: ViewChild,
-                args: ['hexInput', { read: ElementRef, static: false }]
+                args: ['hexInput']
             }], blueInput: [{
                 type: ViewChild,
-                args: ['blueInput', { read: ElementRef, static: false }]
+                args: ['blueInput']
             }], toggleFormatButton: [{
                 type: ViewChild,
                 args: ['toggleFormatButton', { static: false }]
@@ -9119,7 +9228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 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: [{
@@ -9152,6 +9261,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: [{
@@ -9209,13 +9326,15 @@ let serial$3 = 0;
  * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 class ColorGradientComponent {
-    constructor(host, ngZone, renderer, cdr, localizationService) {
+    constructor(host, ngZone, renderer, cdr, localizationService, injector) {
         this.host = host;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.cdr = cdr;
         this.localizationService = localizationService;
+        this.injector = injector;
         this.hostClasses = true;
+        this.ariaRole = 'textbox';
         /**
          * @hidden
          */
@@ -9276,11 +9395,28 @@ class ColorGradientComponent {
          * updated on moving the drag handle or the sliders.
          */
         this.hsva = new BehaviorSubject({});
+        /**
+         * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
+         *
+         * @default 5
+         */
+        this.gradientSliderStep = DRAGHANDLE_MOVE_SPEED;
+        /**
+         * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.
+         *
+         * @default 2
+         */
+        this.gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
+        /**
+         * @hidden
+         */
+        this.internalNavigation = false;
         this._tabindex = 0;
         this.listeners = [];
         this.hueSliderTouched = false;
         this.alphaSliderTouched = false;
         this.updateValues = new Subject();
+        this.hsvHandleCoordinates = { x: 0, y: 0 };
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
         validatePackage(packageMetadata);
@@ -9298,7 +9434,42 @@ class ColorGradientComponent {
         return this.id;
     }
     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;
+        }
+        this.internalNavigation = true;
+        this.gradientDragHandle.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    escapeHandler(event) {
+        if (!this.host.nativeElement.matches(':focus')) {
+            event.stopImmediatePropagation();
+        }
+        this.internalNavigation = false;
+        this.host.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    focusHandler(ev) {
+        this.internalNavigation = ev.target !== this.host.nativeElement;
     }
     /**
      * Specifies the value of the initially selected color.
@@ -9359,12 +9530,27 @@ class ColorGradientComponent {
     get gradientRect() {
         return this.gradientWrapper.nativeElement.getBoundingClientRect();
     }
+    /**
+     * @hidden
+     */
+    get hsvSliderValueText() {
+        return `X: ${this.hsvHandleCoordinates.x} Y: ${this.hsvHandleCoordinates.y}`;
+    }
     /**
      * @hidden
      */
     get contrastToolVisible() {
         return this.contrastTool && this.contrastTool.length > 0;
     }
+    /**
+     * @hidden
+     */
+    get innerTabIndex() {
+        return this.internalNavigation ? 0 : -1;
+    }
+    ngOnInit() {
+        this.control = this.injector.get(NgControl, null);
+    }
     ngAfterViewInit() {
         this.updateUI();
         this.cdr.detectChanges();
@@ -9447,18 +9633,19 @@ class ColorGradientComponent {
             this.renderer.addClass(this.gradientWrapper.nativeElement, 'k-dragging');
             let keyboardMoveX = 0;
             let keyboardMoveY = 0;
+            const shiftKey = args.shiftKey;
             switch (args.key) {
                 case 'ArrowRight':
-                    keyboardMoveX = DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveX = shiftKey ? this.gradientSliderSmallStep : this.gradientSliderStep;
                     break;
                 case 'ArrowLeft':
-                    keyboardMoveX = -DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveX = shiftKey ? -this.gradientSliderSmallStep : -this.gradientSliderStep;
                     break;
                 case 'ArrowUp':
-                    keyboardMoveY = -DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveY = shiftKey ? -this.gradientSliderSmallStep : -this.gradientSliderStep;
                     break;
                 case 'ArrowDown':
-                    keyboardMoveY = DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveY = shiftKey ? this.gradientSliderSmallStep : this.gradientSliderStep;
                     break;
                 default: break;
             }
@@ -9554,7 +9741,7 @@ class ColorGradientComponent {
      */
     get colorGradientHandleAriaLabel() {
         const parsed = parseColor(this.value, this.format, this.opacity);
-        return `${this.value ? parsed : this.localizationService.get('colorGradientHandle')}`;
+        return `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`;
     }
     /**
      * @hidden
@@ -9606,6 +9793,7 @@ class ColorGradientComponent {
     }
     setDragHandleElementPosition(top, left) {
         const dragHandle = this.gradientDragHandle.nativeElement;
+        this.hsvHandleCoordinates = { x: left, y: top };
         this.renderer.setStyle(dragHandle, 'top', `${top}px`);
         this.renderer.setStyle(dragHandle, 'left', `${left}px`);
     }
@@ -9678,8 +9866,8 @@ class ColorGradientComponent {
         }
     }
 }
-ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -9698,7 +9886,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: L10N_PREFIX,
             useValue: 'kendo.colorgradient'
         }
-    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true, read: ElementRef }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorGradientLocalizedMessages
             i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
             colorGradientNoColor="Colorgradient no color chosen"
@@ -9717,7 +9905,23 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
             contrastRatio="Contrast ratio"
             i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
-            formatButton="Change color format">
+            formatButton="Change color format"
+            i18n-redChannelLabel="kendo.colorgradient.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorgradient.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorgradient.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorgradient.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
             <div class="k-hsv-rectangle" #hsvRectangle>
@@ -9732,10 +9936,16 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     <div
                         #gradientDragHandle
                         class="k-hsv-draghandle k-draghandle"
-                        tabindex="0"
+                        [tabindex]="innerTabIndex.toString()"
                         [attr.title]="colorGradientHandleTitle"
-                        [attr.aria-label]="colorGradientHandleAriaLabel"
-                    >
+                        [attr.aria-label]="colorGradientHandleTitle + ' ' + colorGradientHandleAriaLabel"
+                        role="slider"
+                        [attr.aria-valuetext]="hsvSliderValueText"
+                        [attr.aria-readonly]="readonly ? readonly : undefined"
+                        [attr.aria-disabled]="disabled ? disabled : undefined"
+                        [attr.aria-orientation]="'undefined'"
+                        [attr.aria-valuenow]="'0'"
+                        (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
                     </div>
                 </div>
                 <svg kendoColorContrastSvg
@@ -9750,22 +9960,24 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
                 <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
                     *ngIf="clearButton"
+                    role="button"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
-                    tabindex="0">
+                    [tabindex]="innerTabIndex.toString()">
                     <span class="k-icon k-i-droplet-slash"></span>
                 </span>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-hue-slider k-colorgradient-slider"
                     [dragHandleTitle]="hueSliderTitle"
+                    [tabindex]="innerTabIndex"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [showButtons]="false"
-                    [tickPlacement]="'none'"
+                    tickPlacement="none"
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
@@ -9778,13 +9990,14 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 <kendo-slider
                     *ngIf="opacity"
                     #alphaSlider
+                    [tabindex]="innerTabIndex"
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-alpha-slider k-colorgradient-slider"
                     [dragHandleTitle]="opacitySliderTitle"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [showButtons]="false"
-                    [tickPlacement]="'none'"
+                    tickPlacement="none"
                     [vertical]="true"
                     [min]="0"
                     [max]="100"
@@ -9797,12 +10010,14 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </div>
         <kendo-colorinput  #inputs
+            [tabindex]="innerTabIndex"
             [opacity]="opacity"
             [formatView]="format"
             [value]="value"
             [disabled]="disabled"
             [readonly]="readonly"
             (valueChange)="handleInputsValueChange($event)"
+            (tabOut)="gradientDragHandle.focus()"
         >
         </kendo-colorinput>
         <div class="k-colorgradient-color-contrast k-vbox"
@@ -9811,7 +10026,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "], components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "], components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
@@ -9856,7 +10071,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
             contrastRatio="Contrast ratio"
             i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
-            formatButton="Change color format">
+            formatButton="Change color format"
+            i18n-redChannelLabel="kendo.colorgradient.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorgradient.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorgradient.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorgradient.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
             <div class="k-hsv-rectangle" #hsvRectangle>
@@ -9871,10 +10102,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <div
                         #gradientDragHandle
                         class="k-hsv-draghandle k-draghandle"
-                        tabindex="0"
+                        [tabindex]="innerTabIndex.toString()"
                         [attr.title]="colorGradientHandleTitle"
-                        [attr.aria-label]="colorGradientHandleAriaLabel"
-                    >
+                        [attr.aria-label]="colorGradientHandleTitle + ' ' + colorGradientHandleAriaLabel"
+                        role="slider"
+                        [attr.aria-valuetext]="hsvSliderValueText"
+                        [attr.aria-readonly]="readonly ? readonly : undefined"
+                        [attr.aria-disabled]="disabled ? disabled : undefined"
+                        [attr.aria-orientation]="'undefined'"
+                        [attr.aria-valuenow]="'0'"
+                        (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
                     </div>
                 </div>
                 <svg kendoColorContrastSvg
@@ -9889,22 +10126,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
                 <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
                     *ngIf="clearButton"
+                    role="button"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
-                    tabindex="0">
+                    [tabindex]="innerTabIndex.toString()">
                     <span class="k-icon k-i-droplet-slash"></span>
                 </span>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-hue-slider k-colorgradient-slider"
                     [dragHandleTitle]="hueSliderTitle"
+                    [tabindex]="innerTabIndex"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [showButtons]="false"
-                    [tickPlacement]="'none'"
+                    tickPlacement="none"
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
@@ -9917,13 +10156,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 <kendo-slider
                     *ngIf="opacity"
                     #alphaSlider
+                    [tabindex]="innerTabIndex"
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-alpha-slider k-colorgradient-slider"
                     [dragHandleTitle]="opacitySliderTitle"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [showButtons]="false"
-                    [tickPlacement]="'none'"
+                    tickPlacement="none"
                     [vertical]="true"
                     [min]="0"
                     [max]="100"
@@ -9936,12 +10176,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </div>
         </div>
         <kendo-colorinput  #inputs
+            [tabindex]="innerTabIndex"
             [opacity]="opacity"
             [formatView]="format"
             [value]="value"
             [disabled]="disabled"
             [readonly]="readonly"
             (valueChange)="handleInputsValueChange($event)"
+            (tabOut)="gradientDragHandle.focus()"
         >
         </kendo-colorinput>
         <div class="k-colorgradient-color-contrast k-vbox"
@@ -9971,7 +10213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
     `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorgradient']
             }], readonlyAttribute: [{
@@ -9989,6 +10231,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', ['$event']]
+            }], focusHandler: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
             }], id: [{
                 type: Input
             }], opacity: [{
@@ -10011,21 +10271,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], gradientSliderStep: [{
+                type: Input
+            }], gradientSliderSmallStep: [{
+                type: Input
             }], gradientDragHandle: [{
                 type: ViewChild,
-                args: ['gradientDragHandle', { read: ElementRef, static: false }]
+                args: ['gradientDragHandle']
             }], inputs: [{
                 type: ViewChild,
-                args: ['inputs', { static: false }]
+                args: ['inputs']
             }], alphaSlider: [{
                 type: ViewChild,
-                args: ['alphaSlider', { static: false }]
+                args: ['alphaSlider']
             }], gradientWrapper: [{
                 type: ViewChild,
-                args: ['gradientWrapper', { static: false }]
+                args: ['gradientWrapper']
             }], hsvRectangle: [{
                 type: ViewChild,
-                args: ['hsvRectangle', { static: false }]
+                args: ['hsvRectangle']
             }] } });
 
 /**
@@ -10142,6 +10406,10 @@ class ColorPaletteComponent {
         this.renderer = renderer;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
+        /**
+         * @hidden
+         */
+        this.role = 'grid';
         /**
          * @hidden
          */
@@ -10203,6 +10471,13 @@ class ColorPaletteComponent {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
+    /**
+     * @hidden
+     */
+    get activeDescendant() {
+        return this.activeCellId;
+    }
+    ;
     /**
      * @hidden
      */
@@ -10343,6 +10618,14 @@ class ColorPaletteComponent {
         }
         event.preventDefault();
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        if (!this.focusInComponent) {
+            this.focus();
+        }
+    }
     /**
      * @hidden
      */
@@ -10397,6 +10680,18 @@ class ColorPaletteComponent {
         this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
+    /**
+     * @hidden
+     */
+    focus() {
+        this.host.nativeElement.focus();
+        if (!this.focusedCell && !this.readonly && !this.disabled) {
+            this.focusedCell = {
+                row: 0,
+                col: 0
+            };
+        }
+    }
     /**
      * @hidden
      * Used by the FloatingLabel to determine if the component is empty.
@@ -10458,7 +10753,7 @@ class ColorPaletteComponent {
     }
 }
 ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -10482,13 +10777,12 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
             colorPaletteNoColor="Colorpalette no color chosen">
         </ng-container>
-        <div role="listbox" class="k-colorpalette-table-wrap"
-            [attr.aria-activedescendant]="activeCellId">
-            <table class="k-colorpalette-table k-palette">
+        <div class="k-colorpalette-table-wrap">
+            <table role="presentation" class="k-colorpalette-table k-palette">
                 <tbody>
-                    <tr *ngFor="let row of colorRows; let rowIndex = index">
+                    <tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
                         <td *ngFor="let color of row; let colIndex = index"
-                            role="option"
+                            role="gridcell"
                             [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
@@ -10539,13 +10833,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
             colorPaletteNoColor="Colorpalette no color chosen">
         </ng-container>
-        <div role="listbox" class="k-colorpalette-table-wrap"
-            [attr.aria-activedescendant]="activeCellId">
-            <table class="k-colorpalette-table k-palette">
+        <div class="k-colorpalette-table-wrap">
+            <table role="presentation" class="k-colorpalette-table k-palette">
                 <tbody>
-                    <tr *ngFor="let row of colorRows; let rowIndex = index">
+                    <tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
                         <td *ngFor="let color of row; let colIndex = index"
-                            role="option"
+                            role="gridcell"
                             [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
@@ -10570,6 +10863,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ColorPaletteService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], activeDescendant: [{
+                type: HostBinding,
+                args: ['attr.aria-activedescendant']
             }], paletteId: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -10615,6 +10914,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
+            }], handleFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
             }], handleHostBlur: [{
                 type: HostListener,
                 args: ['blur']
@@ -10627,7 +10929,9 @@ class FlatColorPickerActionButtonsComponent {
     constructor(localizationService) {
         this.localizationService = localizationService;
         this.hostClasses = true;
+        this.innerTabIndex = -1;
         this.actionButtonClick = new EventEmitter();
+        this.tabOut = new EventEmitter();
     }
     getText(text) {
         return this.localizationService.get(text);
@@ -10641,18 +10945,21 @@ class FlatColorPickerActionButtonsComponent {
     }
 }
 FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", outputs: { actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-        <button
+FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+        <button #first
             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"
+            [tabindex]="innerTabIndex.toString()"
         >{{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"
+            [tabindex]="innerTabIndex.toString()"
+            (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
     `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
@@ -10661,17 +10968,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoFlatColorPickerActionButtons]',
                     template: `
-        <button
+        <button #first
             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"
+            [tabindex]="innerTabIndex.toString()"
         >{{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"
+            [tabindex]="innerTabIndex.toString()"
+            (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
     `
                 }]
@@ -10684,37 +10994,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-hstack']
+            }], innerTabIndex: [{
+                type: Input
             }], actionButtonClick: [{
                 type: Output
+            }], tabOut: [{
+                type: Output
+            }], firstButton: [{
+                type: ViewChild,
+                args: ['first', { read: ElementRef }]
             }], lastButton: [{
                 type: ViewChild,
-                args: ['last', { read: ElementRef, static: false }]
+                args: ['last', { read: ElementRef }]
             }] } });
 
-/**
- * @hidden
- */
-class FocusOnDomReadyDirective {
-    constructor(host, ngZone) {
-        this.host = host;
-        this.ngZone = ngZone;
-    }
-    ngAfterContentInit() {
-        this.focusOnNextTick();
-    }
-    focusOnNextTick() {
-        this.ngZone.runOutsideAngular(() => setTimeout(() => this.host.nativeElement.focus()));
-    }
-}
-FocusOnDomReadyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusOnDomReadyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-FocusOnDomReadyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusOnDomReadyDirective, selector: "[kendoFocusOnDomReady]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusOnDomReadyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoFocusOnDomReady]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
-
+/* eslint-disable no-unused-expressions */
 /**
  * Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
  *
@@ -10722,14 +11016,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 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.
          *
@@ -10802,9 +11098,15 @@ 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);
@@ -10819,7 +11121,40 @@ 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.
@@ -10836,9 +11171,14 @@ 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;
@@ -10861,8 +11201,33 @@ 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();
     }
@@ -10870,6 +11235,7 @@ class FlatColorPickerComponent {
         this.setHostElementAriaLabel();
         this.initDomEvents();
         this.setSizingVariables();
+        this.removeGradientAttributes();
     }
     ngOnChanges(changes) {
         if (isChanged('value', changes)) {
@@ -10886,6 +11252,20 @@ 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
      */
@@ -10903,7 +11283,7 @@ class FlatColorPickerComponent {
      * Focuses the wrapper of the FlatColorPicker.
      */
     focus() {
-        if (this.disabled && this.focused) {
+        if (this.disabled || this.focused) {
             return;
         }
         this.host.nativeElement.focus();
@@ -10940,12 +11320,14 @@ 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();
         }
     }
     /**
@@ -10953,6 +11335,7 @@ class FlatColorPickerComponent {
      */
     onClearButtonClick() {
         this.resetInnerComponentValue();
+        this.internalNavigation = false;
         this.host.nativeElement.focus();
     }
     /**
@@ -11063,9 +11446,13 @@ 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: FlatColorPickerService }, { token: i1.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: FlatColorPickerService }, { token: i1.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,
@@ -11085,7 +11472,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"
@@ -11116,9 +11503,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"
@@ -11129,24 +11533,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"
@@ -11154,15 +11559,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: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick"] }, { type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", outputs: ["actionButtonClick"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusOnDomReadyDirective, selector: "[kendoFocusOnDomReady]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            (actionButtonClick)="onAction($event)"
+            (tabOut)="firstFocusable.focus()"></div>
+`, isInline: true, components: [{ type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -11220,9 +11626,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"
@@ -11233,24 +11656,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"
@@ -11258,17 +11682,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: FlatColorPickerService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FlatColorPickerService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-flatcolorpicker']
             }, {
@@ -11289,6 +11714,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: [{
@@ -11323,22 +11766,32 @@ 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']
             }] } });
 
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 const DEFAULT_SIZE$3 = 'medium';
 const DEFAULT_ROUNDED$2 = 'medium';
 const DEFAULT_FILL_MODE$1 = 'solid';
+/**
+ * @hidden
+ */
+let nextColorPickerId = 0;
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -11346,15 +11799,17 @@ const DEFAULT_FILL_MODE$1 = 'solid';
  * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 class ColorPickerComponent {
-    constructor(host, popupService, cdr, localizationService, ngZone, renderer) {
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector) {
         this.host = host;
         this.popupService = popupService;
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
         this.renderer = renderer;
+        this.injector = injector;
         this.hostClasses = true;
-        this.role = 'listbox';
+        this.role = 'combobox';
+        this.hasPopup = 'dialog';
         /**
          * Specifies the views that will be rendered in the popup.
          * By default both the gradient and palette views will be rendered.
@@ -11462,6 +11917,7 @@ class ColorPickerComponent {
         this._rounded = 'medium';
         this._fillMode = 'solid';
         this.subscriptions = new Subscription();
+        this.popupSubs = new Subscription();
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
         this.domFocusListener = (event) => event.stopImmediatePropagation();
@@ -11469,6 +11925,7 @@ class ColorPickerComponent {
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
+        this.colorPickerId = nextColorPickerId++;
     }
     get focusedClass() {
         return this.isFocused;
@@ -11485,6 +11942,10 @@ class ColorPickerComponent {
     get hostTabindex() {
         return this.tabindex;
     }
+    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();
+    }
     /**
      * @hidden
      */
@@ -11627,6 +12088,8 @@ class ColorPickerComponent {
             columns: this._paletteSettings.columns || presetColumns || 10
         };
         this.handleHostId();
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-controls', `k-colorpicker-popup-${this.colorPickerId}`);
+        this.control = this.injector.get(NgControl, null);
     }
     ngAfterViewInit() {
         const stylingInputs = ['size', 'rounded', 'fillMode'];
@@ -11903,19 +12366,21 @@ class ColorPickerComponent {
             content: this.popupTemplate,
             positionMode: 'absolute'
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => {
+        this.renderer.setAttribute(this.popupRef.popupElement.querySelector('.k-colorpicker-popup'), 'id', `k-colorpicker-popup-${this.colorPickerId}`);
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => {
             this.toggleWithEvents(false);
             if (!this.isOpen) {
                 this.host.nativeElement.focus({
                     preventScroll: true
                 });
             }
-        });
+        }));
     }
     closePopup() {
         if (!this.isOpen) {
             return;
         }
+        this.popupSubs.unsubscribe();
         this.popupRef.close();
         this.popupRef = null;
     }
@@ -11938,7 +12403,7 @@ class ColorPickerComponent {
         if (gradient && inputs && inputs.formatView === 'hex') {
             return inputs.hexInput;
         }
-        return this.gradientSettings.opacity ? inputs.opacityInput.numericInput : inputs.blueInput;
+        return this.gradientSettings.opacity ? inputs.opacityInput.numericInput : inputs.blueInput.numericInput;
     }
     handleDomEvents(action, events) {
         const hostElement = this.host.nativeElement;
@@ -11986,8 +12451,8 @@ class ColorPickerComponent {
         }
     }
 }
-ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role" } }, providers: [{
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [{
             multi: true,
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ColorPickerComponent)
@@ -12037,7 +12502,23 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             i18n-applyButton="kendo.colorpicker.applyButton|The message for the Apply action button."
             applyButton="Apply"
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
-            cancelButton="Cancel">
+            cancelButton="Cancel"
+            i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
         </ng-container>
         <span #activeColor class="k-input-inner">
             <span
@@ -12050,6 +12531,8 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <button
             tabindex="-1"
             type="button"
+            role="none"
+            aria-hidden="true"
             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-caret-alt-down"></span>
         </button>
@@ -12130,7 +12613,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-applyButton="kendo.colorpicker.applyButton|The message for the Apply action button."
             applyButton="Apply"
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
-            cancelButton="Cancel">
+            cancelButton="Cancel"
+            i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
         </ng-container>
         <span #activeColor class="k-input-inner">
             <span
@@ -12143,6 +12642,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <button
             tabindex="-1"
             type="button"
+            role="none"
+            aria-hidden="true"
             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-caret-alt-down"></span>
         </button>
@@ -12169,7 +12670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.PopupService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.PopupService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorpicker']
             }, {
@@ -12202,6 +12703,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], hasPopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], isControlInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
             }], views: [{
                 type: Input
             }], view: [{
@@ -12305,6 +12812,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/**
+ * @hidden
+ */
+class FocusOnDomReadyDirective {
+    constructor(host, ngZone) {
+        this.host = host;
+        this.ngZone = ngZone;
+    }
+    ngAfterContentInit() {
+        this.focusOnNextTick();
+    }
+    focusOnNextTick() {
+        this.ngZone.runOutsideAngular(() => setTimeout(() => this.host.nativeElement.focus()));
+    }
+}
+FocusOnDomReadyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusOnDomReadyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+FocusOnDomReadyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusOnDomReadyDirective, selector: "[kendoFocusOnDomReady]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusOnDomReadyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFocusOnDomReady]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
+
 const PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
     ColorPaletteComponent,
@@ -12314,6 +12845,7 @@ const PUBLIC_DIRECTIVES = [
     ColorPickerCustomMessagesComponent
 ];
 const INTERNAL_DIRECTIVES = [
+    NumericLabelDirective,
     ColorInputComponent,
     FocusOnDomReadyDirective,
     ContrastComponent,
@@ -12334,7 +12866,8 @@ ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         ColorGradientComponent,
         FlatColorPickerComponent,
         LocalizedColorPickerMessagesDirective,
-        ColorPickerCustomMessagesComponent, ColorInputComponent,
+        ColorPickerCustomMessagesComponent, NumericLabelDirective,
+        ColorInputComponent,
         FocusOnDomReadyDirective,
         ContrastComponent,
         ContrastValidationComponent,
@@ -14100,5 +14633,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchComponent, SwitchCustomMessagesComponent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchComponent, SwitchCustomMessagesComponent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };