@progress/kendo-angular-inputs 7.5.2-dev.202111191702 → 8.0.0-dev.202112251033

package/dist/es2015/colorpicker/color-contrast-svg.component.js

@@ -0,0 +1,97 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component, HostBinding, Input } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { isPresent } from '../common/utils';
+import { AA_RATIO, STEP_COUNT, AAA_RATIO } from './constants';
+import { bezierCommand, getContrastFromTwoRGBAs, getRGBA, getColorFromHSV, svgPath, controlPoint, line } from './utils';
+/**
+ * @hidden
+ */
+let ColorContrastSvgComponent = class ColorContrastSvgComponent {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.hostClass = true;
+    }
+    ngAfterViewInit() {
+        this.metrics = this.wrapper.getBoundingClientRect();
+        this.oldA = this.hsva.value.a;
+        this.oldH = this.hsva.value.h;
+        this.hsva.subscribe((value) => {
+            if (value.h !== this.oldH || value.a !== this.oldA) {
+                this.oldH = value.h;
+                this.oldA = value.a;
+                this.setPaths();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (isPresent(changes.backgroundColor) && this.metrics) {
+            this.setPaths();
+        }
+    }
+    setPaths() {
+        const bezierCommandCalc = bezierCommand(controlPoint(line));
+        this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
+            svgPath(this.getPaths(AA_RATIO, STEP_COUNT, true), bezierCommandCalc),
+            svgPath(this.getPaths(AAA_RATIO, STEP_COUNT), bezierCommandCalc),
+            svgPath(this.getPaths(AAA_RATIO, STEP_COUNT, true), bezierCommandCalc)];
+    }
+    findValue(contrast, saturation, low, high, comparer) {
+        const mid = (low + high) / 2;
+        const hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
+        const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.backgroundColor || ''));
+        if (low + 0.5 > high) {
+            if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
+                return mid;
+            }
+            else {
+                return null;
+            }
+        }
+        if (comparer(currentContrast, contrast)) {
+            return this.findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
+        }
+        return this.findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
+    }
+    getPaths(contrast, stepCount, reversed = false) {
+        const points = [];
+        for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
+            const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
+            if (value !== null) {
+                points.push([i, value]);
+            }
+        }
+        return points;
+    }
+};
+tslib_1.__decorate([
+    HostBinding('class.k-color-contrast-svg'),
+    tslib_1.__metadata("design:type", Boolean)
+], ColorContrastSvgComponent.prototype, "hostClass", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], ColorContrastSvgComponent.prototype, "wrapper", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", BehaviorSubject)
+], ColorContrastSvgComponent.prototype, "hsva", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorContrastSvgComponent.prototype, "backgroundColor", void 0);
+ColorContrastSvgComponent = tslib_1.__decorate([
+    Component({
+        selector: '[kendoColorContrastSvg]',
+        template: `
+        <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
+    `
+    })
+], ColorContrastSvgComponent);
+export { ColorContrastSvgComponent };

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

@@ -4,8 +4,10 @@
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef, Renderer2, NgZone, EventEmitter, SimpleChanges, OnChanges, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { OutputFormat, KendoDragEvent, HSVA } from './models';
+import { BehaviorSubject } from 'rxjs';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { OutputFormat, HSVA } from './models';
+import { KendoDragEvent } from './events/kendo-drag-event';
 import { ColorInputComponent } from './color-input.component';
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -17,48 +19,38 @@ export declare class ColorGradientComponent implements OnChanges, OnDestroy, Con
     private renderer;
     private cdr;
     private localizationService;
-    /**
-     * @hidden
-     */
     hostClasses: boolean;
-    /**
-     * @hidden
-     */
     readonly readonlyAttribute: boolean;
-    /**
-     * @hidden
-     */
     readonly disabledClass: boolean;
-    /**
-     * @hidden
-     */
-    readonly hostTabindex: number;
-    /**
-     * @hidden
-     */
     readonly gradientId: string;
+    direction: string;
+    readonly hostTabindex: number;
     /**
      * @hidden
      */
     id: string;
-    /**
-     * @hidden
-     */
-    direction: string;
     /**
      * Defines whether the alpha slider will be displayed.
+     *
+     * @default true
      */
     opacity: boolean;
     /**
      * Sets the disabled state of the ColorGradient.
+     *
+     * @default false
      */
     disabled: boolean;
     /**
      * Sets the read-only state of the ColorGradient.
+     *
+     * @default false
      */
     readonly: boolean;
     /**
      * Specifies whether the ColorGradient should display a 'Clear color' button.
+     *
+     * @default false
      */
     clearButton: boolean;
     /**
@@ -73,13 +65,25 @@ export declare class ColorGradientComponent implements OnChanges, OnDestroy, Con
     value: string;
     /**
      * Enables the color contrast tool. Accepts the background color that will be compared to the selected value.
-     * The tool will calculate the contrast ratio between two colors. Currently, only the RGBA format is supported.
+     * The tool will calculate the contrast ratio between the two colors.
      */
     contrastTool: string;
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
      */
     tabindex: number;
+    /**
+     * Specifies the output format of the ColorGradientComponent.
+     * The input value may be in a different format, but it will be parsed into the output `format`
+     * after the component processes it.
+     *
+     * The supported values are:
+     * * (Default) `rgba`
+     * * `hex`
+     */
+    format: OutputFormat;
     /**
      * Fires each time the user selects a new color.
      */
@@ -95,7 +99,7 @@ export declare class ColorGradientComponent implements OnChanges, OnDestroy, Con
      * The values are initially set in `ngOnInit` or in `ngOnChanges` and are
      * updated on moving the drag handle or the sliders.
      */
-    hsva: HSVA;
+    hsva: BehaviorSubject<HSVA>;
     /**
      * Indicates whether the ColorGradient or any of its content is focused.
      */
@@ -104,33 +108,18 @@ export declare class ColorGradientComponent implements OnChanges, OnDestroy, Con
      * @hidden
      */
     readonly alphaSliderValue: number;
-    /**
-     * Specifies the output format of the ColorGradientComponent.
-     * The input value may be in a different format. However, it will be parsed into the output `format`
-     * after the component processes it.
-     *
-     * The supported values are:
-     * * (Default) `rgba`
-     * * `hex`
-     */
-    format: OutputFormat;
-    /**
-     * @hidden
-     */
     gradientDragHandle: ElementRef;
-    /**
-     * @hidden
-     */
     inputs: ColorInputComponent;
+    private alphaSlider;
+    private gradientWrapper;
     private _value;
     private _tabindex;
+    private _contrastTool;
     private listeners;
     private updateValues;
     private changeRequestsSubscription;
     private dynamicRTLSubscription;
-    private alphaSlider;
-    private gradientWrapper;
-    private readonly gradientRect;
+    readonly gradientRect: ClientRect;
     /**
      * @hidden
      */
@@ -217,7 +206,7 @@ export declare class ColorGradientComponent implements OnChanges, OnDestroy, Con
     readonly clearButtonTitle: string;
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     isEmpty(): boolean;
     private notifyNgChanged;