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

package/dist/es2015/colorpicker/contrast-validation.component.js

@@ -0,0 +1,54 @@
+/**-----------------------------------------------------------------------------------------
+* 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";
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Component, Input } from '@angular/core';
+/**
+ * @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)}`;
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ContrastValidationComponent.prototype, "type", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], ContrastValidationComponent.prototype, "ratio", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], ContrastValidationComponent.prototype, "pass", void 0);
+ContrastValidationComponent = tslib_1.__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>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService])
+], ContrastValidationComponent);
+export { ContrastValidationComponent };

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

@@ -0,0 +1,21 @@
+/**-----------------------------------------------------------------------------------------
+* 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 ContrastComponent {
+    private localization;
+    value: string;
+    ratio: string;
+    aaRatio: number;
+    aaaRatio: number;
+    constructor(localization: LocalizationService);
+    readonly formatedRatio: string;
+    readonly contrastRatioMessage: string;
+    readonly satisfiesAACondition: boolean;
+    readonly satisfiesAAACondition: boolean;
+    readonly contrastRatio: number;
+}

package/dist/es2015/colorpicker/contrast.component.js

@@ -0,0 +1,72 @@
+/**-----------------------------------------------------------------------------------------
+* 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";
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Component, Input } from '@angular/core';
+import { getContrastFromTwoRGBAs, getRGBA } from './utils';
+import { AA_RATIO, AAA_RATIO } from './constants';
+/**
+ * @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;
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ContrastComponent.prototype, "value", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ContrastComponent.prototype, "ratio", void 0);
+ContrastComponent = tslib_1.__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>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService])
+], ContrastComponent);
+export { ContrastComponent };

package/dist/es2015/colorpicker/localization/messages.d.ts

@@ -51,4 +51,16 @@ export declare class ColorPickerMessages extends ComponentMessages {
      * The placeholder for the alpha input.
      */
     alphaInputPlaceholder: string;
+    /**
+     * The "Pass" message for the contrast tool.
+     */
+    passContrast: string;
+    /**
+     * The "Fail" message for the contrast tool.
+     */
+    failContrast: string;
+    /**
+     * The "Contrast ratio" message for the contrast tool.
+     */
+    contrastRatio: string;
 }

package/dist/es2015/colorpicker/localization/messages.js

@@ -54,3 +54,15 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ColorPickerMessages.prototype, "alphaInputPlaceholder", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "passContrast", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "failContrast", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerMessages.prototype, "contrastRatio", void 0);

package/dist/es2015/colorpicker/models/rgb.d.ts

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export interface RGB {
+    r?: number;
+    g?: number;
+    b?: number;
+}

package/dist/es2015/colorpicker/models/rgb.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/colorpicker/utils/color-parser.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { OutputFormat, HSVA, RGBA } from '../models';
+import { RGB } from '../models/rgb';
 /**
  * @hidden
  *
@@ -44,3 +45,27 @@ export declare const getColorFromRGBA: (rgba: RGBA) => string;
  * @hidden
  */
 export declare function nameFormat(value: string, safe: boolean): string;
+/**
+ * @hidden
+ *
+ * Returns the RGB object representation of the color based on the background color.
+ */
+export declare const getRGBFromRGBA: (foregroundColor: RGBA, backgroundColor: RGBA) => RGB;
+/**
+ * @hidden
+ *
+ * Returns the relative luminance.
+ */
+export declare const getLuminance: (rgb: RGB) => number;
+/**
+ * @hidden
+ *
+ * Returns the color contrast.
+ */
+export declare const getContrast: (luminance1: number, luminance2: number) => number;
+/**
+ * @hidden
+ *
+ * Returns the color contrast from two RGBA colors.
+ */
+export declare const getContrastFromTwoRGBAs: (a: RGBA, b: RGBA) => number;

package/dist/es2015/colorpicker/utils/color-parser.js

@@ -100,3 +100,55 @@ export function nameFormat(value, safe) {
     }
     return key;
 }
+/**
+ * @hidden
+ *
+ * Returns the RGB object representation of the color based on the background color.
+ */
+export 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export const getContrastFromTwoRGBAs = (a, b) => {
+    return getContrast(getLuminance(getRGBFromRGBA(a, b)), getLuminance(getRGBFromRGBA(b, { r: 0, g: 0, b: 0, a: 1 })));
+};

package/dist/es2015/colorpicker.module.js

@@ -16,6 +16,8 @@ import { ColorInputComponent } from './colorpicker/color-input.component';
 import { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
 import { LocalizedColorPickerMessagesDirective } from './colorpicker/localization/localized-colorpicker-messages.directive';
 import { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
+import { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
+import { ContrastComponent } from './colorpicker/contrast.component';
 const PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
     ColorPaletteComponent,
@@ -25,7 +27,9 @@ const PUBLIC_DIRECTIVES = [
 ];
 const INTERNAL_DIRECTIVES = [
     ColorInputComponent,
-    FocusOnDomReadyDirective
+    FocusOnDomReadyDirective,
+    ContrastComponent,
+    ContrastValidationComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})

package/dist/es2015/index.d.ts

@@ -8,6 +8,8 @@
 export * from './main';
 export { CheckBoxModule } from './checkbox.module';
 export { ColorInputComponent } from './colorpicker/color-input.component';
+export { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
+export { ContrastComponent } from './colorpicker/contrast.component';
 export { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
 export { ColorGradientLocalizationService } from './colorpicker/localization/colorgradient-localization.service';
 export { ColorPaletteLocalizationService } from './colorpicker/localization/colorpalette-localization.service';

package/dist/es2015/index.js

@@ -8,6 +8,8 @@
 export * from './main';
 export { CheckBoxModule } from './checkbox.module';
 export { ColorInputComponent } from './colorpicker/color-input.component';
+export { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
+export { ContrastComponent } from './colorpicker/contrast.component';
 export { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
 export { ColorGradientLocalizationService } from './colorpicker/localization/colorgradient-localization.service';
 export { ColorPaletteLocalizationService } from './colorpicker/localization/colorpalette-localization.service';