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

package/dist/es/textbox/textbox.component.js

@@ -10,13 +10,13 @@ import { Component, ElementRef, forwardRef, Input, Output, EventEmitter, HostBin
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { invokeElementMethod } from '../common/dom-utils';
-import { areSame, requiresZoneOnBlur } from '../common/utils';
+import { areSame, requiresZoneOnBlur, getStylingClasses } from '../common/utils';
 import { guid, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
 import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isSafari } from '../shared/utils';
-var FOCUSED = 'k-state-focused';
+var FOCUSED = 'k-focus';
 var TextBoxComponent = /** @class */ (function () {
     function TextBoxComponent(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         var _this = this;
@@ -151,9 +151,12 @@ var TextBoxComponent = /** @class */ (function () {
          * ```
          */
         this.onBlur = new EventEmitter();
-        this.hostClass = true;
+        this.hostClasses = true;
         this._isFocused = false;
         this.focusChangedProgrammatically = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         /**
          * @hidden
          */
@@ -208,6 +211,70 @@ var TextBoxComponent = /** @class */ (function () {
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     TextBoxComponent_1 = TextBoxComponent;
+    Object.defineProperty(TextBoxComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the font size and line height of the TextBox
+         * ([see example]({% slug appearance_textbox %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TextBoxComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the TextBox
+         * ([see example]({% slug appearance_textbox %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TextBoxComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the TextBox
+         * ([see example]({% slug appearance_textbox %}#toc-fillMode)).
+         *
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         */
+        set: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(TextBoxComponent.prototype, "tabIndex", {
         get: function () {
             return this.tabindex;
@@ -284,6 +351,10 @@ var TextBoxComponent = /** @class */ (function () {
                 }
             }));
         });
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
     };
     TextBoxComponent.prototype.ngOnChanges = function (changes) {
         if (changes.disabled || changes.readonly || changes.value) {
@@ -417,8 +488,8 @@ var TextBoxComponent = /** @class */ (function () {
          */
         get: function () {
             return this.successIcon
-                ? "k-text-success " + this.successIcon
-                : "k-text-success k-icon k-i-check-outline";
+                ? "" + this.successIcon
+                : "k-validation-icon k-icon k-i-check";
         },
         enumerable: true,
         configurable: true
@@ -429,8 +500,8 @@ var TextBoxComponent = /** @class */ (function () {
          */
         get: function () {
             return this.errorIcon
-                ? "k-text-error " + this.errorIcon
-                : "k-text-error k-icon k-i-warning";
+                ? "" + this.errorIcon
+                : "k-validation-icon k-icon k-i-warning";
         },
         enumerable: true,
         configurable: true
@@ -442,7 +513,7 @@ var TextBoxComponent = /** @class */ (function () {
         get: function () {
             return this.clearButtonIcon
                 ? this.clearButtonIcon
-                : "k-icon k-i-close-circle";
+                : "k-icon k-i-x";
         },
         enumerable: true,
         configurable: true
@@ -521,6 +592,16 @@ var TextBoxComponent = /** @class */ (function () {
             _this.isFocused = false;
         });
     };
+    TextBoxComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var classes = getStylingClasses('input', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
     var TextBoxComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -574,6 +655,21 @@ var TextBoxComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], TextBoxComponent.prototype, "clearButtonIcon", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TextBoxComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Number),
@@ -620,14 +716,15 @@ var TextBoxComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", TextBoxPrefixTemplateDirective)
     ], TextBoxComponent.prototype, "prefixTemplate", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], TextBoxComponent.prototype, "disabledClass", null);
     tslib_1.__decorate([
         HostBinding('class.k-textbox'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], TextBoxComponent.prototype, "hostClass", void 0);
+    ], TextBoxComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
@@ -646,7 +743,7 @@ var TextBoxComponent = /** @class */ (function () {
                 { provide: KendoInput, useExisting: forwardRef(function () { return TextBoxComponent_1; }) }
             ],
             selector: 'kendo-textbox',
-            template: "\n        <ng-container kendoTextBoxLocalizedMessages\n            i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n            clear=\"Clear\">\n        </ng-container>\n        <span class=\"k-input-prefix\">\n            <ng-template\n                *ngIf=\"prefixTemplate\"\n                [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n        <input\n            class=\"k-input\"\n            #input\n            [id]=\"focusableId\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.tabindex]=\"disabled ? undefined : tabindex\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\"/>\n        <span class=\"k-input-suffix\">\n            <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n            <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n            <span\n                role=\"button\"\n                class=\"k-clear-value\"\n                *ngIf=\"showClearButton\"\n                (click)=\"clearValue()\"\n                (mousedown)=\"$event.preventDefault()\"\n                [tabindex]=\"tabIndex\"\n                [attr.aria-label]=\"clearTitle()\"\n                [title]=\"clearTitle()\"\n                (keydown.enter)=\"clearValue($event)\"\n                (keydown.space)=\"clearValue($event)\"\n                >\n                <span [ngClass]=\"clearButtonClasses\"></span>\n            </span>\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
+            template: "\n        <ng-container kendoTextBoxLocalizedMessages\n            i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n            clear=\"Clear\">\n        </ng-container>\n        <span class=\"k-input-prefix\">\n            <ng-template\n                *ngIf=\"prefixTemplate\"\n                [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n        <input #input\n            class=\"k-input-inner\"\n            [id]=\"focusableId\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.tabindex]=\"disabled ? undefined : tabindex\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\"\n        />\n        <span\n            role=\"button\"\n            class=\"k-clear-value\"\n            *ngIf=\"showClearButton\"\n            (click)=\"clearValue()\"\n            (mousedown)=\"$event.preventDefault()\"\n            [tabindex]=\"tabIndex\"\n            [attr.aria-label]=\"clearTitle()\"\n            [title]=\"clearTitle()\"\n            (keydown.enter)=\"clearValue($event)\"\n            (keydown.space)=\"clearValue($event)\">\n                <span [ngClass]=\"clearButtonClasses\"></span>\n        </span>\n        <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n        <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n        <span class=\"k-input-suffix\">\n            <ng-template\n                *ngIf=\"suffixTemplate\"\n                [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n            </ng-template>\n        </span>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,
             NgZone,

package/dist/es/textbox/textbox.directive.js

@@ -21,7 +21,7 @@ var TextBoxDirective = /** @class */ (function () {
         this.renderer = renderer;
         this.inputElement = inputElement;
         this.ngZone = ngZone;
-        this.hostClass = true;
+        this.hostClasses = true;
         /**
          * @hidden
          */
@@ -99,8 +99,9 @@ var TextBoxDirective = /** @class */ (function () {
     var TextBoxDirective_1;
     tslib_1.__decorate([
         HostBinding('class.k-textbox'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], TextBoxDirective.prototype, "hostClass", void 0);
+    ], TextBoxDirective.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String),

package/dist/es/textbox.module.js

@@ -5,7 +5,6 @@
 import * as tslib_1 from "tslib";
 import { NgModule } from "@angular/core";
 import { TextBoxDirective } from "./textbox/textbox.directive";
-import { TextBoxContainerComponent } from "./textbox/textbox-container.component";
 import { TextBoxComponent } from "./textbox/textbox.component";
 import { CommonModule } from "@angular/common";
 import { EventsModule } from "@progress/kendo-angular-common";
@@ -52,7 +51,6 @@ var TextBoxModule = /** @class */ (function () {
         NgModule({
             declarations: [
                 TextBoxDirective,
-                TextBoxContainerComponent,
                 TextBoxComponent,
                 TextBoxSuffixTemplateDirective,
                 TextBoxPrefixTemplateDirective,
@@ -61,7 +59,6 @@ var TextBoxModule = /** @class */ (function () {
             ],
             exports: [
                 TextBoxDirective,
-                TextBoxContainerComponent,
                 TextBoxComponent,
                 TextBoxSuffixTemplateDirective,
                 TextBoxPrefixTemplateDirective,

package/dist/es2015/checkbox/checkbox.directive.d.ts

@@ -2,6 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2 } from '@angular/core';
+import { CheckBoxRounded, InputSize } from '../common/models';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -12,5 +14,34 @@
  * ```
  */
 export declare class CheckBoxDirective {
+    private renderer;
+    private hostElement;
     kendoClass: boolean;
+    /**
+     * The size property specifies the width and height of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: InputSize;
+    /**
+     * The rounded property specifies the border radius of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    rounded: CheckBoxRounded;
+    private _size;
+    private _rounded;
+    constructor(renderer: Renderer2, hostElement: ElementRef);
+    ngAfterViewInit(): void;
+    private handleClasses;
 }

package/dist/es2015/checkbox/checkbox.directive.js

@@ -3,7 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
+import { getStylingClasses } from '../common/utils';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -14,26 +15,83 @@ import { Directive, HostBinding } from '@angular/core';
  * ```
  */
 let CheckBoxDirective = class CheckBoxDirective {
+    constructor(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.kendoClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
+    }
     /**
-     * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
-     * The directive is placed on input type="checkbox" elements.
+     * The size property specifies the width and height of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
      *
-     * @example
-     * ```ts-no-run
-     * <input type="checkbox" kendoCheckBox />
-     * ```
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
      */
-    constructor() {
-        this.kendoClass = true;
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('checkbox', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
     }
 };
 tslib_1.__decorate([
     HostBinding('class.k-checkbox'),
     tslib_1.__metadata("design:type", Boolean)
 ], CheckBoxDirective.prototype, "kendoClass", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], CheckBoxDirective.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], CheckBoxDirective.prototype, "rounded", null);
 CheckBoxDirective = tslib_1.__decorate([
     Directive({
         selector: 'input[kendoCheckBox]'
-    })
+    }),
+    tslib_1.__metadata("design:paramtypes", [Renderer2,
+        ElementRef])
 ], CheckBoxDirective);
 export { CheckBoxDirective };

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;