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

package/dist/es/colorpicker/localization/localized-colorpicker-messages.directive.js

@@ -26,7 +26,7 @@ var LocalizedColorPickerMessagesDirective = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return LocalizedColorPickerMessagesDirective_1; }) // tslint:disable-line:no-forward-ref
                 }
             ],
-            selector: '[kendoColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
+            selector: '[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], LocalizedColorPickerMessagesDirective);

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

@@ -21,6 +21,14 @@ var ColorPickerMessages = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerMessages.prototype, "colorGradientNoColor", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "flatColorPickerNoColor", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "colorPickerNoColor", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -69,6 +77,34 @@ var ColorPickerMessages = /** @class */ (function (_super) {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerMessages.prototype, "contrastRatio", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "previewColor", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "revertSelection", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "gradientView", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "paletteView", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "formatButton", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "applyButton", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerMessages.prototype, "cancelButton", void 0);
     return ColorPickerMessages;
 }(ComponentMessages));
 export { ColorPickerMessages };

package/dist/es/colorpicker/models.js

@@ -2,5 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './models/preventable-event';
-export * from './models/active-color-click-event';
+export * from './models/palette-presets';

package/dist/es/colorpicker/services/flatcolorpicker.service.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Injectable } from "@angular/core";
+import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from "../constants";
+import { PALETTEPRESETS } from "../models";
+/**
+ * @hidden
+ */
+var FlatColorPickerService = /** @class */ (function () {
+    function FlatColorPickerService() {
+    }
+    FlatColorPickerService.prototype.getPaletteSettings = function (settings, format) {
+        var defaultPreset = (format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        var settingsPalette = settings.palette;
+        var presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
+            PALETTEPRESETS[settingsPalette].columns :
+            undefined;
+        return {
+            palette: settingsPalette || defaultPreset,
+            tileSize: settings.tileSize || 24,
+            columns: settings.columns || presetColumns || 10
+        };
+    };
+    FlatColorPickerService.prototype.paletteTileLayout = function (tileSize) {
+        if (typeof tileSize === 'number') {
+            return { width: tileSize, height: tileSize };
+        }
+        return {
+            width: tileSize.width ? tileSize.width : tileSize.height,
+            height: tileSize.height ? tileSize.height : tileSize.width
+        };
+    };
+    FlatColorPickerService = tslib_1.__decorate([
+        Injectable()
+    ], FlatColorPickerService);
+    return FlatColorPickerService;
+}());
+export { FlatColorPickerService };

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

@@ -9,7 +9,8 @@ import { isPresent, fitIntoBounds } from '../../common/utils';
  *
  * Returns the hex or rgba string representation of the color.
  */
-export var parseColor = function (value, format, safe) {
+export var parseColor = function (value, format, opacityEnabled, safe) {
+    if (opacityEnabled === void 0) { opacityEnabled = false; }
     if (safe === void 0) { safe = true; }
     var allowedFormats = ['hex', 'rgba', 'name'];
     if (allowedFormats.indexOf(format) === -1) {
@@ -25,7 +26,8 @@ export var parseColor = function (value, format, safe) {
     if (!isPresent(parsedColor)) {
         return;
     }
-    return format === 'hex' ? parsedColor.toCss() : parsedColor.toCssRgba();
+    var parsedColorResult = format === 'hex' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
+    return parsedColorResult;
 };
 /**
  * @hidden
@@ -58,12 +60,23 @@ export var getRGBA = function (value, safe) {
  *
  * Returns the RGBA string representation of the color.
  */
-export var getColorFromHSV = function (hsva) {
+export var getColorFromHSV = function (hsva, format, opacityEnabled) {
+    if (format === void 0) { format = 'rgba'; }
+    if (opacityEnabled === void 0) { opacityEnabled = false; }
     var hue = fitIntoBounds(hsva.h, 0, 359.9);
     var saturation = fitIntoBounds(hsva.s, 0, 1);
     var value = fitIntoBounds(hsva.v, 0, 1);
     var alpha = fitIntoBounds(hsva.a, 0, 1);
-    return Color.fromHSV(hue, saturation, value, alpha).toCssRgba();
+    var color = Color.fromHSV(hue, saturation, value, alpha);
+    return format === 'hex' ? getHexValue(color, opacityEnabled) : color.toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+export var getHexValue = function (color, opacity) {
+    return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
 };
 /**
  * @hidden
@@ -99,7 +112,7 @@ export function nameFormat(value, safe) {
     }
     var key = Object.keys(colors).find(function (key) { return colors[key] === value; });
     if (!key && !safe) {
-        throw new Error("The provided color " + value + " is not supported for 'format=\"name\"' property.To display " + value + " color, the component 'format' property shoud be set to 'hex' or 'rgba' ");
+        throw new Error("The provided color " + value + " is not supported for 'format=\"name\"' property.To display " + value + " color, the component 'format' property should be set to 'hex' or 'rgba' ");
     }
     return key;
 }

package/dist/es/colorpicker/utils/contrast-curve.js

@@ -0,0 +1,91 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export var bezierCommand = function (controlPointCalc) { return function (point, i, a) {
+    // start control point
+    var _a = controlPointCalc(a[i - 1], a[i - 2], point), cpsX = _a[0], cpsY = _a[1];
+    // end control point
+    var _b = controlPointCalc(point, a[i - 1], a[i + 1], true), cpeX = _b[0], cpeY = _b[1];
+    return "C " + cpsX + "," + cpsY + " " + cpeX + "," + cpeY + " " + point[0] + "," + point[1];
+}; };
+/**
+ * @hidden
+ */
+export var controlPoint = function (lineCalc) {
+    return function (current, previous, next, reverse) {
+        // when 'current' is the first or last point of the array
+        // 'previous' and 'next' are undefined
+        // replace with 'current'
+        var p = previous || current;
+        var n = next || current;
+        var smooth = 0.1;
+        // properties of the line between previous and next
+        var l = lineCalc(p, n);
+        // If is end-control-point, add PI to the angle to go backward
+        var angle = l.angle + (reverse ? Math.PI : 0);
+        var length = l.length * smooth;
+        // The control point position is relative to the current point
+        var x = current[0] + Math.cos(angle) * length;
+        var y = current[1] + Math.sin(angle) * length;
+        return [x, y];
+    };
+};
+/**
+ * @hidden
+ */
+export var line = function (pointA, pointB) {
+    var lengthX = pointB[0] - pointA[0];
+    var lengthY = pointB[1] - pointA[1];
+    return {
+        length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+        angle: Math.atan2(lengthY, lengthX)
+    };
+};
+/**
+ * @hidden
+ */
+export var d = function (points, command) {
+    if (points.length === 0) {
+        return '';
+    }
+    // build the d attributes by looping over the points
+    var d = points.reduce(function (acc, point, i, a) {
+        return i === 0 ?
+            // if first point
+            "M " + point[0] + "," + point[1] :
+            // else
+            acc + " " + command(point, i, a);
+    }, '');
+    return d;
+};
+/**
+ * @hidden
+ *
+ * Render the svg <path> element.
+ *
+ * @param points (array) Represents the points coordinates as an array of tuples.
+ * @param command (function) The command that is used (bezierCommand, lineCommand).
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) a svg path command.
+ * @output (string) a Svg <path> element
+ */
+export var svgPath = function (points, command) {
+    if (points.length === 0) {
+        return '';
+    }
+    // build the d attributes by looping over the points
+    var d = points.reduce(function (acc, point, i, a) {
+        return i === 0 ?
+            // if first point
+            "M " + point[0] + "," + point[1] :
+            // else
+            acc + " " + command(point, i, a);
+    }, '');
+    return d;
+};

package/dist/es/colorpicker/utils.js

@@ -2,5 +2,5 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export * from './utils/palette-presets';
 export * from './utils/color-parser';
+export * from './utils/contrast-curve';

package/dist/es/colorpicker.module.js

@@ -13,15 +13,20 @@ import { ColorPickerComponent } from './colorpicker/colorpicker.component';
 import { ColorPaletteComponent } from './colorpicker/color-palette.component';
 import { ColorGradientComponent } from './colorpicker/color-gradient.component';
 import { ColorInputComponent } from './colorpicker/color-input.component';
+import { FlatColorPickerHeaderComponent } from './colorpicker/flatcolorpicker-header.component';
+import { FlatColorPickerActionButtonsComponent } from './colorpicker/flatcolorpicker-actions.component';
+import { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.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';
+import { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
 var PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
     ColorPaletteComponent,
     ColorGradientComponent,
+    FlatColorPickerComponent,
     LocalizedColorPickerMessagesDirective,
     ColorPickerCustomMessagesComponent
 ];
@@ -29,7 +34,10 @@ var INTERNAL_DIRECTIVES = [
     ColorInputComponent,
     FocusOnDomReadyDirective,
     ContrastComponent,
-    ContrastValidationComponent
+    ContrastValidationComponent,
+    FlatColorPickerHeaderComponent,
+    FlatColorPickerActionButtonsComponent,
+    ColorContrastSvgComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})

package/dist/es/index.js

@@ -7,16 +7,21 @@
  */
 export * from './main';
 export { CheckBoxModule } from './checkbox.module';
+export { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
 export { ColorInputComponent } from './colorpicker/color-input.component';
 export { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
 export { ContrastComponent } from './colorpicker/contrast.component';
+export { FlatColorPickerActionButtonsComponent } from './colorpicker/flatcolorpicker-actions.component';
+export { FlatColorPickerHeaderComponent } from './colorpicker/flatcolorpicker-header.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';
 export { ColorPickerLocalizationService } from './colorpicker/localization/colorpicker-localization.service';
 export { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
+export { FlatColorPickerLocalizationService } from './colorpicker/localization/flatcolorpicker-localization.service';
 export { ColorPickerMessages } from './colorpicker/localization/messages';
 export { ColorPaletteService } from './colorpicker/services/color-palette.service';
+export { FlatColorPickerService } from './colorpicker/services/flatcolorpicker.service';
 export { MaskingService } from './maskedtextbox/masking.service';
 export { NumericTextBoxMessages } from './numerictextbox/localization/messages';
 export { RadioButtonModule } from './radiobutton.module';

package/dist/es/main.js

@@ -21,11 +21,14 @@ export { NumericTextBoxModule } from './numerictextbox.module';
 export { MaskedTextBoxModule } from './maskedtextbox.module';
 export { TextBoxModule } from './textbox.module';
 export { TextAreaModule } from './textarea.module';
+// All ColorPicker Components
 export { ColorPickerComponent } from './colorpicker/colorpicker.component';
 export { ColorPaletteComponent } from './colorpicker/color-palette.component';
 export { ColorGradientComponent } from './colorpicker/color-gradient.component';
 export { ColorPickerModule } from './colorpicker.module';
-export { ActiveColorClickEvent } from './colorpicker/models';
+export * from './colorpicker/events';
+export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
+export { ColorPickerCancelEvent } from './colorpicker/events';
 export { CheckBoxDirective } from './checkbox/checkbox.directive';
 export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
 export { HintComponent } from './formfield/hint.component';

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637576485,
+    publishDate: 1639665048,
     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'
 };

package/dist/es2015/colorpicker/color-contrast-svg.component.d.ts

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SimpleChanges, AfterViewInit, OnChanges } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { HSVA } from './models';
+/**
+ * @hidden
+ */
+export declare class ColorContrastSvgComponent implements AfterViewInit, OnChanges {
+    hostClass: boolean;
+    wrapper: any;
+    hsva: BehaviorSubject<HSVA>;
+    backgroundColor: string;
+    paths: any[];
+    oldHsva: HSVA;
+    oldH: number;
+    oldA: number;
+    metrics: any;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    setPaths(): void;
+    private findValue;
+    private getPaths;
+}

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;