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

package/dist/fesm2015/index.js

@@ -459,7 +459,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1630597338,
+    publishDate: 1635258302,
     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'
 };
@@ -2939,6 +2939,14 @@ const extractSignificantNumericChars = (formattedString, separator) => {
     const significantCharacters = `${separator}0123456789-`;
     return formattedString.split('').reduce((acc, curr) => significantCharacters.includes(curr) ? ++acc : acc, 0);
 };
+/**
+ * @hidden
+ */
+const isRightClick = (event) => {
+    const isRightClickIE = event.button && event.button === 2;
+    const isRightClickOther = event.which && event.which === 3;
+    return isRightClickIE || isRightClickOther;
+};
 
 /**
  * @hidden
@@ -3421,7 +3429,7 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
     }
     arrowPress(direction, e) {
         e.preventDefault();
-        if (this.isDisabled) {
+        if (this.isDisabled || isRightClick(e)) {
             return;
         }
         if (!mobileOS) {
@@ -7341,6 +7349,58 @@ function nameFormat(value, safe) {
     }
     return key;
 }
+/**
+ * @hidden
+ *
+ * Returns the RGB object representation of the color based on the background color.
+ */
+const getRGBFromRGBA = (foregroundColor, backgroundColor) => {
+    const r1 = fitIntoBounds(foregroundColor.r, 0, 255);
+    const g1 = fitIntoBounds(foregroundColor.g, 0, 255);
+    const b1 = fitIntoBounds(foregroundColor.b, 0, 255);
+    const a1 = fitIntoBounds(foregroundColor.a, 0, 1);
+    const r2 = fitIntoBounds(backgroundColor.r, 0, 255);
+    const g2 = fitIntoBounds(backgroundColor.g, 0, 255);
+    const b2 = fitIntoBounds(backgroundColor.b, 0, 255);
+    return {
+        r: Math.round(((1 - a1) * r2) + (a1 * r1)),
+        g: Math.round(((1 - a1) * g2) + (a1 * g1)),
+        b: Math.round(((1 - a1) * b2) + (a1 * b1))
+    };
+};
+/**
+ * @hidden
+ *
+ * Returns the relative luminance.
+ */
+const getLuminance = (rgb) => {
+    let a = [rgb.r, rgb.g, rgb.b].map(function (v) {
+        v /= 255;
+        return v <= 0.03928
+            ? v / 12.92
+            : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+/**
+ * @hidden
+ *
+ * Returns the color contrast.
+ */
+const getContrast = (luminance1, luminance2) => {
+    const brightest = Math.max(luminance1, luminance2);
+    const darkest = Math.min(luminance1, luminance2);
+    return (brightest + 0.05)
+        / (darkest + 0.05);
+};
+/**
+ * @hidden
+ *
+ * Returns the color contrast from two RGBA colors.
+ */
+const getContrastFromTwoRGBAs = (a, b) => {
+    return getContrast(getLuminance(getRGBFromRGBA(a, b)), getLuminance(getRGBFromRGBA(b, { r: 0, g: 0, b: 0, a: 1 })));
+};
 
 // tslint:disable:max-line-length
 /**
@@ -7443,9 +7503,10 @@ ColorGradientLocalizationService = __decorate([
  * @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.
          */
@@ -7467,6 +7528,7 @@ let ColorInputComponent = class ColorInputComponent {
          * The rgba inputs values.
          */
         this.rgba = {};
+        this.subscriptions = new Subscription();
     }
     /**
      * Indicates whether any of the inputs are focused.
@@ -7484,6 +7546,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$1(this.value, 'hex');
@@ -7519,13 +7589,23 @@ let ColorInputComponent = class ColorInputComponent {
     handleHexInputBlur() {
         this.hex = parseColor$1(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()));
+    }
 };
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorInputComponent.prototype, "formatView", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -7547,109 +7627,142 @@ __decorate([
     __metadata("design:type", EventEmitter)
 ], ColorInputComponent.prototype, "valueChange", void 0);
 __decorate([
-    HostBinding('class.k-colorinputs'),
+    HostBinding('class.k-colorgradient-inputs'),
+    HostBinding('class.k-hstack'),
     __metadata("design:type", Boolean)
 ], ColorInputComponent.prototype, "colorInputClass", void 0);
 __decorate([
     ViewChild('opacityInput', { read: ElementRef, static: false }),
     __metadata("design:type", ElementRef)
 ], ColorInputComponent.prototype, "opacityInput", void 0);
+__decorate([
+    ViewChild('toggleFormatButton', { static: false }),
+    __metadata("design:type", ElementRef)
+], ColorInputComponent.prototype, "toggleFormatButton", void 0);
 ColorInputComponent = __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>
     `
     }),
     __metadata("design:paramtypes", [LocalizationService,
-        ElementRef])
+        ElementRef,
+        Renderer2])
 ], ColorInputComponent);
 
-var ColorGradientComponent_1;
+/**
+ * @hidden
+ */
 const DEFAULT_OUTPUT_FORMAT = 'rgba';
-const DEFAULT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
-let serial = 0;
+/**
+ * @hidden
+ */
+const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
+/**
+ * @hidden
+ */
 const DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+const AAA_RATIO = 7.0;
+/**
+ * @hidden
+ */
+const AA_RATIO = 4.5;
+
+var ColorGradientComponent_1;
+let serial = 0;
 /**
  * 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.
@@ -7698,7 +7811,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         /**
          * @hidden
          */
-        this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
+        this.backgroundColor = DEFAULT_GRADIENT_BACKGROUND_COLOR;
         /**
          * @hidden
          *
@@ -7792,6 +7905,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();
@@ -8082,8 +8201,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
     }
 };
 __decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-flatcolorpicker'),
+    HostBinding('class.k-colorgradient'),
     __metadata("design:type", Boolean)
 ], ColorGradientComponent.prototype, "hostClasses", void 0);
 __decorate([
@@ -8139,6 +8257,10 @@ __decorate([
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
 ], ColorGradientComponent.prototype, "value", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorGradientComponent.prototype, "contrastTool", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Number),
@@ -8212,10 +8334,16 @@ ColorGradientComponent = ColorGradientComponent_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
@@ -8226,7 +8354,7 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
                     (kendoRelease)="onHandleRelease()">
                     <div
                         #gradientDragHandle
-                        class="k-draghandle"
+                        class="k-hsv-draghandle k-draghandle"
                         tabindex="0"
                         [attr.title]="colorGradientHandleTitle"
                         [attr.aria-label]="colorGradientHandleAriaLabel"
@@ -8234,8 +8362,8 @@ ColorGradientComponent = ColorGradientComponent_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()"
@@ -8246,7 +8374,8 @@ ColorGradientComponent = ColorGradientComponent_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"
@@ -8264,7 +8393,8 @@ ColorGradientComponent = ColorGradientComponent_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"
@@ -8283,13 +8413,29 @@ ColorGradientComponent = ColorGradientComponent_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;
+        }
+    `]
     }),
     __metadata("design:paramtypes", [ElementRef,
         NgZone,
@@ -9228,15 +9374,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$1(value, this.format, false);
         this.cellSelection.emit(parsedColor);
         if (this.value !== parsedColor) {
@@ -9249,8 +9398,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}`;
         }
     }
     /**
@@ -9296,6 +9445,10 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
             this.notifyNgChanged(undefined);
         }
     }
+    handleCellFocusOnBlur() {
+        this.focusInComponent = false;
+        this.focusedCell = this.selectedCell;
+    }
     setRows() {
         if (!isPresent(this.palette)) {
             return;
@@ -9308,11 +9461,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$1(this.value, this.format);
@@ -9393,7 +9542,6 @@ __decorate([
     __metadata("design:paramtypes", [])
 ], ColorPaletteComponent.prototype, "hostTabindex", null);
 __decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-colorpalette'),
     __metadata("design:type", Boolean)
 ], ColorPaletteComponent.prototype, "hostClasses", void 0);
@@ -9448,18 +9596,19 @@ ColorPaletteComponent = ColorPaletteComponent_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]="{
@@ -9531,6 +9680,18 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], ColorPickerMessages.prototype, "alphaInputPlaceholder", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "passContrast", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "failContrast", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "contrastRatio", void 0);
 
 var ColorPickerCustomMessagesComponent_1;
 /**
@@ -9605,6 +9766,116 @@ FocusOnDomReadyDirective = __decorate([
         NgZone])
 ], FocusOnDomReadyDirective);
 
+/**
+ * @hidden
+ */
+let ContrastValidationComponent = class ContrastValidationComponent {
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get passMessage() {
+        return this.localization.get('passContrast');
+    }
+    get failMessage() {
+        return this.localization.get('failContrast');
+    }
+    get contrastText() {
+        return `${this.type}: ${this.ratio.toFixed(1)}`;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ContrastValidationComponent.prototype, "type", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], ContrastValidationComponent.prototype, "ratio", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ContrastValidationComponent.prototype, "pass", void 0);
+ContrastValidationComponent = __decorate([
+    Component({
+        selector: '[kendoContrastValidation]',
+        template: `
+        <span>{{contrastText}}</span>
+                <span class="k-contrast-validation k-text-success" *ngIf="pass">
+                    {{passMessage}}
+                    <span class="k-icon k-i-check"></span>
+                </span>
+                <span class="k-contrast-validation k-text-error" *ngIf="!pass">
+                    {{failMessage}}
+                <span class="k-icon k-i-close"></span>
+        </span>
+    `
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
+], ContrastValidationComponent);
+
+/**
+ * @hidden
+ */
+let ContrastComponent = class ContrastComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.aaRatio = AA_RATIO;
+        this.aaaRatio = AAA_RATIO;
+    }
+    get formatedRatio() {
+        return this.contrastRatio.toFixed(2);
+    }
+    get contrastRatioMessage() {
+        return this.localization.get('contrastRatio');
+    }
+    get satisfiesAACondition() {
+        return this.contrastRatio >= this.aaRatio;
+    }
+    get satisfiesAAACondition() {
+        return this.contrastRatio >= this.aaaRatio;
+    }
+    get contrastRatio() {
+        let contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
+        return contrast;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ContrastComponent.prototype, "value", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ContrastComponent.prototype, "ratio", void 0);
+ContrastComponent = __decorate([
+    Component({
+        selector: '[kendoContrastTool]',
+        template: `
+        <div class="k-contrast-ratio">
+            <span class="k-contrast-ratio-text">{{contrastRatioMessage}}: {{formatedRatio}}</span>
+            <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
+                <span class="k-icon k-i-check"></span>
+                <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
+            </span>
+            <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
+                <span class="k-icon k-i-close"></span>
+            </span>
+        </div>
+        <div kendoContrastValidation
+            type="AA"
+            [ratio]="aaaRatio"
+            [pass]="satisfiesAACondition">
+        </div>
+        <div kendoContrastValidation
+            type="AAA"
+            [ratio]="aaaRatio"
+            [pass]="satisfiesAAACondition">
+        </div>
+    `
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
+], ContrastComponent);
+
 const PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
     ColorPaletteComponent,
@@ -9614,7 +9885,9 @@ const PUBLIC_DIRECTIVES = [
 ];
 const INTERNAL_DIRECTIVES = [
     ColorInputComponent,
-    FocusOnDomReadyDirective
+    FocusOnDomReadyDirective,
+    ContrastComponent,
+    ContrastValidationComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -10281,4 +10554,4 @@ InputsModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { CheckBoxModule, ColorInputComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, ColorPickerMessages, ColorPaletteService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxContainerComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, ActiveColorClickEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective };
+export { CheckBoxModule, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, ColorPickerMessages, ColorPaletteService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxContainerComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, ActiveColorClickEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective };