@progress/kendo-angular-inputs 7.4.0-dev.202109021544 → 7.5.0-dev.202110261427

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

@@ -11,15 +11,13 @@ import { isPresent, fitIntoBounds } from '../common/utils';
 import { isChanged, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
 import { containsFocus, isUntouched } from '../common/dom-utils';
 import { SliderComponent } from '../slider/slider.component';
-const DEFAULT_OUTPUT_FORMAT = 'rgba';
-const DEFAULT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject } from 'rxjs';
 import { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
 import { ColorInputComponent } from './color-input.component';
 import { throttleTime } from 'rxjs/operators';
+import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED } from './constants';
 let serial = 0;
-const DRAGHANDLE_MOVE_SPEED = 5;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
  * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
@@ -68,7 +66,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         /**
          * @hidden
          */
-        this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
+        this.backgroundColor = DEFAULT_GRADIENT_BACKGROUND_COLOR;
         /**
          * @hidden
          *
@@ -162,6 +160,12 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
     get gradientRect() {
         return this.gradientWrapper.nativeElement.getBoundingClientRect();
     }
+    /**
+     * @hidden
+     */
+    get contrastToolVisible() {
+        return typeof this.contrastTool === 'string' && this.contrastTool !== '';
+    }
     ngAfterViewInit() {
         this.updateUI();
         this.cdr.detectChanges();
@@ -452,8 +456,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
     }
 };
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-flatcolorpicker'),
+    HostBinding('class.k-colorgradient'),
     tslib_1.__metadata("design:type", Boolean)
 ], ColorGradientComponent.prototype, "hostClasses", void 0);
 tslib_1.__decorate([
@@ -509,6 +512,10 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", String),
     tslib_1.__metadata("design:paramtypes", [String])
 ], ColorGradientComponent.prototype, "value", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorGradientComponent.prototype, "contrastTool", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number),
@@ -582,10 +589,16 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
             i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
             blueInputPlaceholder="Blue"
             i18n-alphaInputPlaceholder="kendo.colorgradient.alphaInputPlaceholder|The placeholder for the alpha input."
-            alphaInputPlaceholder="Alpha">
+            alphaInputPlaceholder="Alpha"
+            i18n-passContrast="kendo.colorgradient.passContrast|The pass message for the contrast tool."
+            passContrast="Pass"
+            i18n-failContrast="kendo.colorgradient.failContrast|The fail message for the contrast tool."
+            failContrast="Fail"
+            i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio">
         </ng-container>
-        <div class="k-hbox k-hsv-wrap">
-            <div class="k-hsv-rectangle" [style.background-color]="backgroundColor">
+        <div class="k-colorgradient-canvas k-hstack">
+            <div class="k-hsv-rectangle" [style.background]="backgroundColor">
                 <div
                     #gradientWrapper
                     kendoDraggable
@@ -596,7 +609,7 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
                     (kendoRelease)="onHandleRelease()">
                     <div
                         #gradientDragHandle
-                        class="k-draghandle"
+                        class="k-hsv-draghandle k-draghandle"
                         tabindex="0"
                         [attr.title]="colorGradientHandleTitle"
                         [attr.aria-label]="colorGradientHandleAriaLabel"
@@ -604,8 +617,8 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
                     </div>
                 </div>
             </div>
-            <div class="k-hbox k-sliders-wrap {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-                <span class="k-clear-color k-button k-bare k-button-icon"
+            <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
+                <span class="k-clear-color k-button k-flat k-button-icon"
                     *ngIf="clearButton"
                     (click)="reset()"
                     (keydown.enter)="reset()"
@@ -616,7 +629,8 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
                     <span class="k-icon k-i-reset-color"></span>
                 </span>
                 <kendo-slider
-                    class="k-hue-slider"
+                    [ngClass]="{'k-align-self-end': clearButton}"
+                    class="k-hue-slider k-colorgradient-slider"
                     [dragHandleTitle]="hueSliderTitle"
                     [disabled]="disabled"
                     [readonly]="readonly"
@@ -634,7 +648,8 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
                 <kendo-slider
                     *ngIf="opacity && format === 'rgba'"
                     #alphaSlider
-                    class="k-alpha-slider"
+                    [ngClass]="{'k-align-self-end': clearButton}"
+                    class="k-alpha-slider k-colorgradient-slider"
                     [dragHandleTitle]="opacitySliderTitle"
                     [disabled]="disabled"
                     [readonly]="readonly"
@@ -653,13 +668,29 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
         </div>
         <kendo-colorinput  #inputs
             [opacity]="opacity"
+            [formatView]="format"
             [value]="value"
             [disabled]="disabled"
             [readonly]="readonly"
             (valueChange)="handleInputsValueChange($event)"
         >
         </kendo-colorinput>
-`
+        <div class="k-colorgradient-color-contrast k-vbox" *ngIf="contrastToolVisible"
+            kendoContrastTool
+            [value]="value"
+            [ratio]="contrastTool">
+        </div>
+    `,
+        styles: [`
+        .k-clear-color {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .k-align-self-end {
+            height: 140px;
+        }
+    `]
     }),
     tslib_1.__metadata("design:paramtypes", [ElementRef,
         NgZone,

package/dist/es2015/colorpicker/color-input.component.d.ts

@@ -2,15 +2,20 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnChanges, SimpleChanges, EventEmitter, ElementRef } from '@angular/core';
+import { OnChanges, SimpleChanges, EventEmitter, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
 import { RGBA } from './models';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 /**
  * @hidden
  */
-export declare class ColorInputComponent implements OnChanges {
+export declare class ColorInputComponent implements AfterViewInit, OnChanges {
     private localization;
     private host;
+    private renderer;
+    /**
+     * The color format view.
+     */
+    formatView: string;
     /**
      * The color value that will be parsed and populate the hex & rgba inputs.
      * Required input property.
@@ -34,6 +39,7 @@ export declare class ColorInputComponent implements OnChanges {
     valueChange: EventEmitter<string>;
     colorInputClass: boolean;
     opacityInput: ElementRef;
+    toggleFormatButton: ElementRef;
     /**
      * The rgba inputs values.
      */
@@ -47,14 +53,16 @@ export declare class ColorInputComponent implements OnChanges {
      * Indicates whether any of the rgba inputs have value.
      */
     private readonly rgbaInputValid;
-    constructor(localization: LocalizationService, host: ElementRef);
+    private subscriptions;
+    constructor(localization: LocalizationService, host: ElementRef, renderer: Renderer2);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
     handleRgbaValueChange(): void;
     handleHexValueChange(hex: string): void;
     handleRgbaInputBlur(): void;
     handleHexInputBlur(): void;
-    /**
-     * @hidden
-     */
     textFor(key: string): string;
+    private toggleFormatView;
+    private initDomEvents;
 }

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

@@ -3,18 +3,20 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2 } from '@angular/core';
 import { getRGBA, parseColor, getColorFromRGBA } from './utils';
 import { isPresent } from '../common/utils';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Subscription } from 'rxjs';
 /**
  * @hidden
  */
 let ColorInputComponent = class ColorInputComponent {
-    constructor(localization, host) {
+    constructor(localization, host, renderer) {
         this.localization = localization;
         this.host = host;
+        this.renderer = renderer;
         /**
          * Sets whether the alpha slider will be shown.
          */
@@ -36,6 +38,7 @@ let ColorInputComponent = class ColorInputComponent {
          * The rgba inputs values.
          */
         this.rgba = {};
+        this.subscriptions = new Subscription();
     }
     /**
      * Indicates whether any of the inputs are focused.
@@ -53,6 +56,14 @@ let ColorInputComponent = class ColorInputComponent {
     get rgbaInputValid() {
         return Object.keys(this.rgba).every(key => isPresent(this.rgba[key]));
     }
+    ngAfterViewInit() {
+        this.initDomEvents();
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
     ngOnChanges(changes) {
         if (isPresent(changes.value) && !this.isFocused) {
             this.hex = parseColor(this.value, 'hex');
@@ -88,13 +99,23 @@ let ColorInputComponent = class ColorInputComponent {
     handleHexInputBlur() {
         this.hex = parseColor(this.value, 'hex');
     }
-    /**
-     * @hidden
-     */
     textFor(key) {
         return this.localization.get(key);
     }
+    toggleFormatView() {
+        this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
+    }
+    initDomEvents() {
+        if (!this.host) {
+            return;
+        }
+        this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', () => this.toggleFormatView()));
+    }
 };
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorInputComponent.prototype, "formatView", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -116,101 +137,116 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", EventEmitter)
 ], ColorInputComponent.prototype, "valueChange", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-colorinputs'),
+    HostBinding('class.k-colorgradient-inputs'),
+    HostBinding('class.k-hstack'),
     tslib_1.__metadata("design:type", Boolean)
 ], ColorInputComponent.prototype, "colorInputClass", void 0);
 tslib_1.__decorate([
     ViewChild('opacityInput', { read: ElementRef, static: false }),
     tslib_1.__metadata("design:type", ElementRef)
 ], ColorInputComponent.prototype, "opacityInput", void 0);
+tslib_1.__decorate([
+    ViewChild('toggleFormatButton', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], ColorInputComponent.prototype, "toggleFormatButton", void 0);
 ColorInputComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-colorinput',
         template: `
-        <div class="k-hbox k-gradient-values">
-            <input
-                #hexInput
-                class="k-textbox k-hex-value"
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [value]="hex || ''"
-                [placeholder]="textFor('hexInputPlaceholder')"
-                (blur)="handleHexInputBlur()"
-                (input)="handleHexValueChange(hexInput.value)"
-            />
-            <kendo-numerictextbox
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [min]="0"
-                [max]="255"
-                [placeholder]="textFor('redInputPlaceholder')"
-                [(value)]="rgba.r"
-                [autoCorrect]="true"
-                [spinners]="false"
-                [format]="'n'"
-                [decimals]="0"
-                (blur)="handleRgbaInputBlur()"
-                (valueChange)="handleRgbaValueChange()"
-            >
-            </kendo-numerictextbox>
-            <kendo-numerictextbox
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [min]="0"
-                [max]="255"
-                [placeholder]="textFor('greenInputPlaceholder')"
-                [(value)]="rgba.g"
-                [autoCorrect]="true"
-                [spinners]="false"
-                [format]="'n'"
-                [decimals]="0"
-                (blur)="handleRgbaInputBlur()"
-                (valueChange)="handleRgbaValueChange()"
-            >
-            </kendo-numerictextbox>
-            <kendo-numerictextbox
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [min]="0"
-                [max]="255"
-                [placeholder]="textFor('blueInputPlaceholder')"
-                [(value)]="rgba.b"
-                [autoCorrect]="true"
-                [spinners]="false"
-                [format]="'n'"
-                [decimals]="0"
-                (blur)="handleRgbaInputBlur()"
-                (valueChange)="handleRgbaValueChange()"
-            >
-            </kendo-numerictextbox>
-            <kendo-numerictextbox  #opacityInput
-                *ngIf="opacity"
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [min]="0"
-                [max]="1"
-                [placeholder]="textFor('alphaInputPlaceholder')"
-                [(value)]="rgba.a"
-                [autoCorrect]="true"
-                [spinners]="false"
-                [step]="0.01"
-                [format]="'n2'"
-                [decimals]="2"
-                (blur)="handleRgbaInputBlur()"
-                (valueChange)="handleRgbaValueChange()"
-            >
-            </kendo-numerictextbox>
-        </div>
-        <div class="k-hbox k-gradient-values">
-            <div class="k-hex-value">hex</div>
-            <div>r</div>
-            <div>g</div>
-            <div>b</div>
-            <div *ngIf="opacity">a</div>
+        <div class="k-vstack">
+            <button class="k-colorgradient-toggle-mode k-button k-icon-button k-flat" #toggleFormatButton>
+                <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
+            </button>
         </div>
+        <input *ngIf="formatView === 'hex'"
+            #hexInput
+            class="k-textbox k-hex-value"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [value]="hex || ''"
+            [placeholder]="textFor('hexInputPlaceholder')"
+            (blur)="handleHexInputBlur()"
+            (input)="handleHexValueChange(hexInput.value)"
+        />
+        <ng-container *ngIf="formatView === 'rgba'">
+            <div class="k-vstack">
+                <kendo-numerictextbox
+                    #red
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [min]="0"
+                    [max]="255"
+                    [placeholder]="textFor('redInputPlaceholder')"
+                    [(value)]="rgba.r"
+                    [autoCorrect]="true"
+                    [spinners]="false"
+                    [format]="'n'"
+                    [decimals]="0"
+                    (blur)="handleRgbaInputBlur()"
+                    (valueChange)="handleRgbaValueChange()">
+                </kendo-numerictextbox>
+                <label [for]="red.focusableId" class="k-colorgradient-input-label">R</label>
+            </div>
+            <div class="k-vstack">
+                <kendo-numerictextbox
+                    #green
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [min]="0"
+                    [max]="255"
+                    [placeholder]="textFor('greenInputPlaceholder')"
+                    [(value)]="rgba.g"
+                    [autoCorrect]="true"
+                    [spinners]="false"
+                    [format]="'n'"
+                    [decimals]="0"
+                    (blur)="handleRgbaInputBlur()"
+                    (valueChange)="handleRgbaValueChange()">
+                </kendo-numerictextbox>
+                <label [for]="green.focusableId" class="k-colorgradient-input-label">G</label>
+            </div>
+            <div class="k-vstack">
+                <kendo-numerictextbox
+                    #blue
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [min]="0"
+                    [max]="255"
+                    [placeholder]="textFor('blueInputPlaceholder')"
+                    [(value)]="rgba.b"
+                    [autoCorrect]="true"
+                    [spinners]="false"
+                    [format]="'n'"
+                    [decimals]="0"
+                    (blur)="handleRgbaInputBlur()"
+                    (valueChange)="handleRgbaValueChange()">
+                </kendo-numerictextbox>
+                <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
+            </div>
+            <div class="k-vstack" *ngIf="opacity">
+                <kendo-numerictextbox  #opacityInput
+                    #alpha
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [min]="0"
+                    [max]="1"
+                    [placeholder]="textFor('alphaInputPlaceholder')"
+                    [(value)]="rgba.a"
+                    [autoCorrect]="true"
+                    [spinners]="false"
+                    [step]="0.01"
+                    [format]="'n2'"
+                    [decimals]="2"
+                    (blur)="handleRgbaInputBlur()"
+                    (valueChange)="handleRgbaValueChange()">
+                </kendo-numerictextbox>
+                <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
+            </div>
+        </ng-container>
     `
     }),
     tslib_1.__metadata("design:paramtypes", [LocalizationService,
-        ElementRef])
+        ElementRef,
+        Renderer2])
 ], ColorInputComponent);
 export { ColorInputComponent };

package/dist/es2015/colorpicker/color-palette.component.d.ts

@@ -100,10 +100,6 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
      * @hidden
      */
     readonly colorRows: string[][];
-    /**
-     * @hidden
-     */
-    focusedCell: TableCell;
     /**
      * @hidden
      */
@@ -124,6 +120,18 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
      * @hidden
      */
     activeCellId: string;
+    /**
+     * @hidden
+     */
+    focusedCell: TableCell;
+    /**
+     * @hidden
+     */
+    selectedCell: TableCell;
+    /**
+     * @hidden
+     */
+    focusInComponent: boolean;
     private selection;
     private _value;
     private _columns;
@@ -146,7 +154,7 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
     /**
      * @hidden
      */
-    handleCellSelection(value: string, focusedCell?: TableCell): void;
+    handleCellSelection(value: string, cell?: TableCell): void;
     /**
      * @hidden
      */
@@ -172,6 +180,7 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
      * Clears the color value of the ColorPalette.
      */
     reset(): void;
+    private handleCellFocusOnBlur;
     private setRows;
     private handleCellNavigation;
     private setHostElementAriaLabel;

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

@@ -225,15 +225,18 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
      */
     handleHostBlur() {
         this.notifyNgTouched();
+        this.handleCellFocusOnBlur();
     }
     /**
      * @hidden
      */
-    handleCellSelection(value, focusedCell) {
+    handleCellSelection(value, cell) {
         if (this.readonly) {
             return;
         }
-        this.focusedCell = focusedCell;
+        this.selectedCell = cell;
+        this.focusedCell = this.selectedCell;
+        this.focusInComponent = true;
         const parsedColor = parseColor(value, this.format, false);
         this.cellSelection.emit(parsedColor);
         if (this.value !== parsedColor) {
@@ -246,8 +249,8 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
             this.selection = parsedColor;
             this.selectionChange.emit(parsedColor);
         }
-        if (focusedCell) {
-            this.activeCellId = `${this.focusedCell.row}${this.focusedCell.col}`;
+        if (cell) {
+            this.activeCellId = `${this.selectedCell.row}-${this.selectedCell.col}`;
         }
     }
     /**
@@ -293,6 +296,10 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
             this.notifyNgChanged(undefined);
         }
     }
+    handleCellFocusOnBlur() {
+        this.focusInComponent = false;
+        this.focusedCell = this.selectedCell;
+    }
     setRows() {
         if (!isPresent(this.palette)) {
             return;
@@ -305,11 +312,7 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
             return;
         }
         this.focusedCell = this.service.getNextCell(this.focusedCell, horizontalStep, verticalStep);
-        const selection = this.service.getColorAt(this.focusedCell);
-        if (this.selection !== selection) {
-            this.selection = selection;
-            this.selectionChange.emit(selection);
-        }
+        this.focusInComponent = true;
     }
     setHostElementAriaLabel() {
         const parsed = parseColor(this.value, this.format);
@@ -390,7 +393,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:paramtypes", [])
 ], ColorPaletteComponent.prototype, "hostTabindex", null);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-colorpalette'),
     tslib_1.__metadata("design:type", Boolean)
 ], ColorPaletteComponent.prototype, "hostClasses", void 0);
@@ -445,18 +447,19 @@ ColorPaletteComponent = ColorPaletteComponent_1 = tslib_1.__decorate([
             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"
+        <div role="listbox" class="k-colorpalette-table-wrap"
             [attr.aria-activedescendant]="activeCellId">
-            <table class="k-palette k-reset">
+            <table class="k-colorpalette-table k-palette">
                 <tbody>
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
-                            [attr.aria-selected]="focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
-                            class="k-item"
-                            [id]="rowIndex + '' + colIndex"
+                            class="k-colorpalette-tile"
+                            [id]="rowIndex + '-' + colIndex"
                             [attr.value]="color"
                             (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
                             [ngStyle]="{

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

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OutputFormat } from "./models";
+/**
+ * @hidden
+ */
+export declare const DEFAULT_OUTPUT_FORMAT: OutputFormat;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_GRADIENT_BACKGROUND_COLOR: string;
+/**
+ * @hidden
+ */
+export declare const DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+export declare const AAA_RATIO = 7;
+/**
+ * @hidden
+ */
+export declare const AA_RATIO = 4.5;

package/dist/es2015/colorpicker/constants.js

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const DEFAULT_OUTPUT_FORMAT = 'rgba';
+/**
+ * @hidden
+ */
+export const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
+/**
+ * @hidden
+ */
+export const DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+export const AAA_RATIO = 7.0;
+/**
+ * @hidden
+ */
+export const AA_RATIO = 4.5;

package/dist/es2015/colorpicker/contrast-validation.component.d.ts

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+/**
+ * @hidden
+ */
+export declare class ContrastValidationComponent {
+    private localization;
+    type: string;
+    ratio: number;
+    pass: boolean;
+    constructor(localization: LocalizationService);
+    readonly passMessage: string;
+    readonly failMessage: string;
+    readonly contrastText: string;
+}