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

package/esm2015/colorpicker/color-input.component.js

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostBinding, ViewChild } from '@angular/core';
 import { getRGBA, parseColor, getColorFromRGBA } from './utils';
 import { isPresent } from '../common/utils';
 import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
@@ -11,6 +11,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../numerictextbox/numerictextbox.component";
 import * as i3 from "@angular/common";
+import * as i4 from "./color-gradient-numeric-label.directive";
 /**
  * @hidden
  */
@@ -23,6 +24,10 @@ export 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.
          */
@@ -39,6 +44,10 @@ export 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.
@@ -108,6 +117,14 @@ export 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';
     }
@@ -117,14 +134,20 @@ export 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>
@@ -140,6 +163,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>
@@ -147,8 +172,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"
@@ -164,8 +192,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"
@@ -181,8 +212,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"
@@ -191,15 +225,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"
@@ -209,12 +247,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: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -225,6 +264,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>
@@ -240,6 +281,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>
@@ -247,8 +290,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"
@@ -264,8 +310,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"
@@ -281,8 +330,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"
@@ -291,15 +343,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"
@@ -309,7 +365,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>
@@ -320,6 +377,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], formatView: [{
                 type: Input
+            }], tabindex: [{
+                type: Input
             }], value: [{
                 type: Input
             }], opacity: [{
@@ -330,6 +389,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']
@@ -338,13 +399,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 }]

package/esm2015/colorpicker/color-palette.component.js

@@ -36,6 +36,10 @@ export class ColorPaletteComponent {
         this.renderer = renderer;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
+        /**
+         * @hidden
+         */
+        this.role = 'grid';
         /**
          * @hidden
          */
@@ -97,6 +101,13 @@ export class ColorPaletteComponent {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
+    /**
+     * @hidden
+     */
+    get activeDescendant() {
+        return this.activeCellId;
+    }
+    ;
     /**
      * @hidden
      */
@@ -237,6 +248,14 @@ export class ColorPaletteComponent {
         }
         event.preventDefault();
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        if (!this.focusInComponent) {
+            this.focus();
+        }
+    }
     /**
      * @hidden
      */
@@ -291,6 +310,18 @@ export 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.
@@ -352,7 +383,7 @@ export class ColorPaletteComponent {
     }
 }
 ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.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,
@@ -376,13 +407,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"
@@ -433,13 +463,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"
@@ -464,6 +493,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ColorPaletteService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i2.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']
@@ -509,6 +544,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']

package/esm2015/colorpicker/colorpicker.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { take } from 'rxjs/operators';
 import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewContainerRef, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
@@ -26,6 +26,10 @@ const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
+/**
+ * @hidden
+ */
+let nextColorPickerId = 0;
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -33,15 +37,17 @@ const DEFAULT_FILL_MODE = 'solid';
  * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 export 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.
@@ -149,6 +155,7 @@ export 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();
@@ -156,6 +163,7 @@ export class ColorPickerComponent {
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
+        this.colorPickerId = nextColorPickerId++;
     }
     get focusedClass() {
         return this.isFocused;
@@ -172,6 +180,10 @@ export 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
      */
@@ -314,6 +326,8 @@ export 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'];
@@ -590,19 +604,21 @@ export 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;
     }
@@ -625,7 +641,7 @@ export 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;
@@ -673,8 +689,8 @@ export class ColorPickerComponent {
         }
     }
 }
-ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.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.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.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)
@@ -724,7 +740,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
@@ -737,6 +769,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>
@@ -817,7 +851,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
@@ -830,6 +880,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>
@@ -856,7 +908,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.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorpicker']
             }, {
@@ -889,6 +941,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: [{

package/esm2015/colorpicker/constants.js

@@ -14,6 +14,10 @@ export const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
  * @hidden
  */
 export const DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+export const DRAGHANDLE_MOVE_SPEED_SMALL_STEP = 2;
 /**
  * @hidden
  */