@progress/kendo-angular-inputs/esm2022/colorpicker/contrast.component.mjs

Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { LocalizationService } from '@progress/kendo-angular-l10n';
import { getContrastFromTwoRGBAs, getRGBA } from './utils';
import { AA_RATIO, AAA_RATIO } from './constants';
import { checkIcon, xCircleIcon } from '@progress/kendo-svg-icons';
import { ContrastValidationComponent } from './contrast-validation.component';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
 * @hidden
 */
export class ContrastComponent {
    localization;
    value;
    ratio;
    checkIcon = checkIcon;
    xCircleIcon = xCircleIcon;
    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() {
        const contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
        return contrast;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContrastComponent, isStandalone: true, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
        <div class="k-contrast-ratio">
          <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
          @if (value) {
            @if (satisfiesAACondition) {
              <span class="k-contrast-validation k-text-success">
                <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                @if (satisfiesAAACondition) {
                  <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                }
              </span>
            } @else {
              <span class="k-contrast-validation k-text-error">
                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
              </span>
            }
          }
        </div>
        <div kendoContrastValidation
          type="AA"
          [value]="value"
          [pass]="satisfiesAACondition">
        </div>
        <div kendoContrastValidation
          type="AAA"
          [value]="value"
          [pass]="satisfiesAAACondition">
        </div>
        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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>
          @if (value) {
            @if (satisfiesAACondition) {
              <span class="k-contrast-validation k-text-success">
                <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                @if (satisfiesAAACondition) {
                  <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                }
              </span>
            } @else {
              <span class="k-contrast-validation k-text-error">
                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
              </span>
            }
          }
        </div>
        <div kendoContrastValidation
          type="AA"
          [value]="value"
          [pass]="satisfiesAACondition">
        </div>
        <div kendoContrastValidation
          type="AAA"
          [value]="value"
          [pass]="satisfiesAAACondition">
        </div>
        `,
                    standalone: true,
                    imports: [IconWrapperComponent, ContrastValidationComponent]
                }]
        }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { value: [{
                type: Input
            }], ratio: [{
                type: Input
            }] } });