@progress/kendo-angular-inputs 8.0.8 → 9.0.0-next.202203161725

package/{dist/es2015 → esm2015}/colorpicker/colorpicker.component.js

@@ -2,14 +2,10 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-var ColorPickerComponent_1;
 import { take } from 'rxjs/operators';
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewContainerRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs';
-import { FlatColorPickerComponent } from './flatcolorpicker.component';
-import { PopupService } from '@progress/kendo-angular-popup';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -20,6 +16,12 @@ import { parseColor } from './utils';
 import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
 import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./flatcolorpicker.component";
+import * as i4 from "./localization/localized-colorpicker-messages.directive";
+import * as i5 from "@angular/common";
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
@@ -27,7 +29,7 @@ const DOM_FOCUS_EVENTS = ['focus', 'blur'];
  * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
  * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
-let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
+export class ColorPickerComponent {
     constructor(host, popupService, cdr, localizationService, ngZone, renderer) {
         this.host = host;
         this.popupService = popupService;
@@ -664,203 +666,119 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             this.focusableId = id;
         }
     }
-};
-tslib_1.__decorate([
-    HostBinding('class.k-colorpicker'),
-    HostBinding('class.k-icon-picker'),
-    HostBinding('class.k-picker'),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorPickerComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-focus'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPickerComponent.prototype, "focusedClass", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPickerComponent.prototype, "disabledClass", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-readonly'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPickerComponent.prototype, "ariaReadonly", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-expanded'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPickerComponent.prototype, "ariaExpanded", null);
-tslib_1.__decorate([
-    HostBinding('attr.tabindex'),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPickerComponent.prototype, "hostTabindex", null);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String)
-], ColorPickerComponent.prototype, "direction", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.role'),
-    tslib_1.__metadata("design:type", String)
-], ColorPickerComponent.prototype, "role", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], ColorPickerComponent.prototype, "views", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ColorPickerComponent.prototype, "view", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorPickerComponent.prototype, "activeView", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorPickerComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorPickerComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorPickerComponent.prototype, "format", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ColorPickerComponent.prototype, "value", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], ColorPickerComponent.prototype, "popupSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], ColorPickerComponent.prototype, "paletteSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], ColorPickerComponent.prototype, "gradientSettings", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorPickerComponent.prototype, "icon", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ColorPickerComponent.prototype, "iconClass", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorPickerComponent.prototype, "clearButton", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], ColorPickerComponent.prototype, "tabindex", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorPickerComponent.prototype, "preview", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorPickerComponent.prototype, "actionsLayout", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ColorPickerComponent.prototype, "size", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ColorPickerComponent.prototype, "rounded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ColorPickerComponent.prototype, "fillMode", null);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "valueChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "open", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "close", void 0);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "cancel", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "activeColorClick", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "activeViewChange", void 0);
-tslib_1.__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    tslib_1.__metadata("design:type", ViewContainerRef)
-], ColorPickerComponent.prototype, "container", void 0);
-tslib_1.__decorate([
-    ViewChild('activeColor', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ColorPickerComponent.prototype, "activeColor", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ColorPickerComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('flatColorPicker', { static: false }),
-    tslib_1.__metadata("design:type", FlatColorPickerComponent)
-], ColorPickerComponent.prototype, "flatColorPicker", void 0);
-ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoColorPicker',
-        selector: 'kendo-colorpicker',
-        providers: [{
-                multi: true,
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ColorPickerComponent_1)
-            }, {
-                provide: KendoInput,
-                useExisting: forwardRef(() => ColorPickerComponent_1)
-            },
-            ColorPickerLocalizationService,
-            {
-                provide: LocalizationService,
-                useExisting: ColorPickerLocalizationService
-            },
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.colorpicker'
-            }
-        ],
-        template: `
+}
+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: [{
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorPickerComponent)
+        }, {
+            provide: KendoInput,
+            useExisting: forwardRef(() => ColorPickerComponent)
+        },
+        ColorPickerLocalizationService,
+        {
+            provide: LocalizationService,
+            useExisting: ColorPickerLocalizationService
+        },
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.colorpicker'
+        }
+    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "activeColor", first: true, predicate: ["activeColor"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "flatColorPicker", first: true, predicate: ["flatColorPicker"], descendants: true }], exportAs: ["kendoColorPicker"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoColorPickerLocalizedMessages
+            i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
+            colorPickerNoColor="Colorpicker no color chosen"
+            i18n-flatColorPickerNoColor="kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
+            flatColorPickerNoColor="Flatcolorpicker no color chosen"
+            i18n-colorGradientNoColor="kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            colorGradientNoColor="Colorgradient no color chosen"
+            i18n-colorPaletteNoColor="kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
+            colorPaletteNoColor="Colorpalette no color chosen"
+            i18n-colorGradientHandle="kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
+            colorGradientHandle="Choose color"
+            i18n-clearButton="kendo.colorpicker.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.colorpicker.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            i18n-contrastRatio="kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio"
+            i18n-previewColor="kendo.colorpicker.previewColor|The message for the color preview pane."
+            previewColor="Color preview"
+            i18n-revertSelection="kendo.colorpicker.revertSelection|The message for the selected color pane."
+            revertSelection="Revert selection"
+            i18n-gradientView="kendo.colorpicker.gradientView|The message for the gradient view button."
+            gradientView="Gradient view"
+            i18n-paletteView="kendo.colorpicker.paletteView|The message for the palette view button."
+            paletteView="Palette view"
+            i18n-formatButton="kendo.colorpicker.formatButton|The message for the input format toggle button."
+            formatButton="Change color format"
+            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">
+        </ng-container>
+        <span #activeColor class="k-input-inner">
+            <span
+                class="k-value-icon k-color-preview"
+                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}">
+                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
+            </span>
+        </span>
+        <button
+            tabindex="-1"
+            type="button"
+            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-arrow-s"></span>
+        </button>
+        <ng-template #popupTemplate>
+            <kendo-flatcolorpicker
+                #flatColorPicker
+                [value]="value"
+                [format]="format"
+                [views]="views"
+                [activeView]="activeView"
+                [actionsLayout]="actionsLayout"
+                [preview]="preview"
+                [gradientSettings]="gradientSettings"
+                [paletteSettings]="paletteSettings"
+                [clearButton]="clearButton"
+                (cancel)="handleCancelEvent($event)"
+                (focusout)="handlePopupBlur($event)"
+                (valueChange)="handleValueChange($event)"
+                (keydown)="handlePopupKeyDown($event)"
+                (activeViewChange)="activeViewChange.emit($event)"
+                (actionButtonClick)="togglePopup()">
+            </kendo-flatcolorpicker>
+        </ng-template>
+        <ng-container #container></ng-container>
+    `, isInline: true, components: [{ type: i3.FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: i4.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoColorPicker',
+                    selector: 'kendo-colorpicker',
+                    providers: [{
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPickerComponent)
+                        }, {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => ColorPickerComponent)
+                        },
+                        ColorPickerLocalizationService,
+                        {
+                            provide: LocalizationService,
+                            useExisting: ColorPickerLocalizationService
+                        },
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.colorpicker'
+                        }],
+                    template: `
         <ng-container kendoColorPickerLocalizedMessages
             i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
             colorPickerNoColor="Colorpicker no color chosen"
@@ -931,12 +849,106 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
         </ng-template>
         <ng-container #container></ng-container>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [ElementRef,
-        PopupService,
-        ChangeDetectorRef,
-        LocalizationService,
-        NgZone,
-        Renderer2])
-], ColorPickerComponent);
-export { ColorPickerComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-colorpicker']
+            }, {
+                type: HostBinding,
+                args: ['class.k-icon-picker']
+            }, {
+                type: HostBinding,
+                args: ['class.k-picker']
+            }], focusedClass: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], ariaReadonly: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], hostTabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], views: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], paletteSettings: [{
+                type: Input
+            }], gradientSettings: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], actionsLayout: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], cancel: [{
+                type: Output
+            }], activeColorClick: [{
+                type: Output
+            }], activeViewChange: [{
+                type: Output
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], activeColor: [{
+                type: ViewChild,
+                args: ['activeColor', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], flatColorPicker: [{
+                type: ViewChild,
+                args: ['flatColorPicker', { static: false }]
+            }] } });

package/esm2015/colorpicker/contrast-validation.component.js

@@ -0,0 +1,67 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { AA_RATIO, AAA_RATIO } from './constants';
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ContrastValidationComponent {
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get passMessage() {
+        return this.localization.get('passContrast');
+    }
+    get failMessage() {
+        return this.localization.get('failContrast');
+    }
+    get contrastText() {
+        let ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
+        return `${this.type}: ${ratio.toFixed(1)}`;
+    }
+}
+ContrastValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastValidationComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: { type: "type", pass: "pass", value: "value" }, ngImport: i0, template: `
+        <span>{{contrastText}}</span>
+        <ng-container *ngIf="value">
+            <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>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastValidationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoContrastValidation]',
+                    template: `
+        <span>{{contrastText}}</span>
+        <ng-container *ngIf="value">
+            <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>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { type: [{
+                type: Input
+            }], pass: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });

package/esm2015/colorpicker/contrast.component.js

@@ -0,0 +1,95 @@
+/**-----------------------------------------------------------------------------------------
+* 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 } from '@angular/core';
+import { getContrastFromTwoRGBAs, getRGBA } from './utils';
+import { AA_RATIO, AAA_RATIO } from './constants';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./contrast-validation.component";
+import * as i3 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ContrastComponent {
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get formatedRatio() {
+        return this.contrastRatio.toFixed(2);
+    }
+    get contrastRatioText() {
+        return `${this.localization.get('contrastRatio')}: ${this.value ? this.formatedRatio : 'n/a'}`;
+    }
+    get satisfiesAACondition() {
+        return this.contrastRatio >= AA_RATIO;
+    }
+    get satisfiesAAACondition() {
+        return this.contrastRatio >= AAA_RATIO;
+    }
+    get contrastRatio() {
+        let contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
+        return contrast;
+    }
+}
+ContrastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
+        <div class="k-contrast-ratio">
+            <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
+            <ng-container *ngIf="value">
+                <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>
+            </ng-container>
+        </div>
+        <div kendoContrastValidation
+            type="AA"
+            [value]="value"
+            [pass]="satisfiesAACondition">
+        </div>
+        <div kendoContrastValidation
+            type="AAA"
+            [value]="value"
+            [pass]="satisfiesAAACondition">
+        </div>
+    `, isInline: true, components: [{ type: i2.ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoContrastTool]',
+                    template: `
+        <div class="k-contrast-ratio">
+            <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
+            <ng-container *ngIf="value">
+                <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>
+            </ng-container>
+        </div>
+        <div kendoContrastValidation
+            type="AA"
+            [value]="value"
+            [pass]="satisfiesAACondition">
+        </div>
+        <div kendoContrastValidation
+            type="AAA"
+            [value]="value"
+            [pass]="satisfiesAAACondition">
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { value: [{
+                type: Input
+            }], ratio: [{
+                type: Input
+            }] } });