@progress/kendo-angular-inputs 7.5.1 → 8.0.0-dev.202112211528

package/dist/es/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,17 +15,92 @@ import { Directive, HostBinding } from '@angular/core';
  * ```
  */
 var CheckBoxDirective = /** @class */ (function () {
-    function CheckBoxDirective() {
+    function CheckBoxDirective(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
         this.kendoClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
     }
+    Object.defineProperty(CheckBoxDirective.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * 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`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CheckBoxDirective.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * 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: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CheckBoxDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
+    CheckBoxDirective.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var 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);
     return CheckBoxDirective;
 }());

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

@@ -0,0 +1,95 @@
+/**-----------------------------------------------------------------------------------------
+* 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
+ */
+var ColorContrastSvgComponent = /** @class */ (function () {
+    function ColorContrastSvgComponent() {
+        this.hostClass = true;
+    }
+    ColorContrastSvgComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        this.metrics = this.wrapper.getBoundingClientRect();
+        this.oldA = this.hsva.value.a;
+        this.oldH = this.hsva.value.h;
+        this.hsva.subscribe(function (value) {
+            if (value.h !== _this.oldH || value.a !== _this.oldA) {
+                _this.oldH = value.h;
+                _this.oldA = value.a;
+                _this.setPaths();
+            }
+        });
+    };
+    ColorContrastSvgComponent.prototype.ngOnChanges = function (changes) {
+        if (isPresent(changes.backgroundColor) && this.metrics) {
+            this.setPaths();
+        }
+    };
+    ColorContrastSvgComponent.prototype.setPaths = function () {
+        var 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)];
+    };
+    ColorContrastSvgComponent.prototype.findValue = function (contrast, saturation, low, high, comparer) {
+        var mid = (low + high) / 2;
+        var hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
+        var 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);
+    };
+    ColorContrastSvgComponent.prototype.getPaths = function (contrast, stepCount, reversed) {
+        if (reversed === void 0) { reversed = false; }
+        var points = [];
+        for (var i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
+            var value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? (function (a, b) { return a < b; }) : (function (a, b) { return 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: "\n        <svg:path *ngFor=\"let path of paths\" [attr.d]=\"path\" fill=\"none\" stroke=\"white\" stroke-width=\"1\"></svg:path>\n    "
+        })
+    ], ColorContrastSvgComponent);
+    return ColorContrastSvgComponent;
+}());
+export { ColorContrastSvgComponent };

package/dist/es/colorpicker/color-gradient.component.js

@@ -5,16 +5,16 @@
 import * as tslib_1 from "tslib";
 import { Component, Input, ViewChild, ElementRef, Renderer2, NgZone, Output, EventEmitter, HostBinding, forwardRef, ChangeDetectorRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { parseColor, getHSV, getColorFromHSV, getColorFromHue } from './utils';
-import { isPresent, fitIntoBounds } from '../common/utils';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isChanged, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
 import { containsFocus, isUntouched } from '../common/dom-utils';
+import { parseColor, getHSV, getColorFromHSV, getColorFromHue } from './utils';
+import { isPresent, fitIntoBounds } from '../common/utils';
 import { SliderComponent } from '../slider/slider.component';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { Subject } from 'rxjs';
 import { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
 import { ColorInputComponent } from './color-input.component';
-import { throttleTime } from 'rxjs/operators';
 import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED } from './constants';
 var serial = 0;
 /**
@@ -29,9 +29,6 @@ var ColorGradientComponent = /** @class */ (function () {
         this.renderer = renderer;
         this.cdr = cdr;
         this.localizationService = localizationService;
-        /**
-         * @hidden
-         */
         this.hostClasses = true;
         /**
          * @hidden
@@ -39,18 +36,26 @@ var ColorGradientComponent = /** @class */ (function () {
         this.id = "k-colorgradient-" + serial++;
         /**
          * Defines whether the alpha slider will be displayed.
+         *
+         * @default true
          */
         this.opacity = true;
         /**
          * Sets the disabled state of the ColorGradient.
+         *
+         * @default false
          */
         this.disabled = false;
         /**
          * Sets the read-only state of the ColorGradient.
+         *
+         * @default false
          */
         this.readonly = false;
         /**
          * Specifies whether the ColorGradient should display a 'Clear color' button.
+         *
+         * @default false
          */
         this.clearButton = false;
         /**
@@ -59,6 +64,16 @@ var ColorGradientComponent = /** @class */ (function () {
          * @default 0
          */
         this.delay = 0;
+        /**
+         * 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`
+         */
+        this.format = DEFAULT_OUTPUT_FORMAT;
         /**
          * Fires each time the user selects a new color.
          */
@@ -74,17 +89,7 @@ var ColorGradientComponent = /** @class */ (function () {
          * The values are initially set in `ngOnInit` or in `ngOnChanges` and are
          * updated on moving the drag handle or the sliders.
          */
-        this.hsva = {};
-        /**
-         * 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`
-         */
-        this.format = DEFAULT_OUTPUT_FORMAT;
+        this.hsva = new BehaviorSubject({});
         this._tabindex = 0;
         this.listeners = [];
         this.updateValues = new Subject();
@@ -97,9 +102,6 @@ var ColorGradientComponent = /** @class */ (function () {
     }
     ColorGradientComponent_1 = ColorGradientComponent;
     Object.defineProperty(ColorGradientComponent.prototype, "readonlyAttribute", {
-        /**
-         * @hidden
-         */
         get: function () {
             return this.readonly;
         },
@@ -107,31 +109,22 @@ var ColorGradientComponent = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(ColorGradientComponent.prototype, "disabledClass", {
-        /**
-         * @hidden
-         */
         get: function () {
             return this.disabled;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorGradientComponent.prototype, "hostTabindex", {
-        /**
-         * @hidden
-         */
+    Object.defineProperty(ColorGradientComponent.prototype, "gradientId", {
         get: function () {
-            return this.tabindex;
+            return this.id;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorGradientComponent.prototype, "gradientId", {
-        /**
-         * @hidden
-         */
+    Object.defineProperty(ColorGradientComponent.prototype, "hostTabindex", {
         get: function () {
-            return this.id;
+            return this.tabindex;
         },
         enumerable: true,
         configurable: true
@@ -144,7 +137,21 @@ var ColorGradientComponent = /** @class */ (function () {
          * Specifies the value of the initially selected color.
          */
         set: function (value) {
-            this._value = parseColor(value, this.format);
+            this._value = parseColor(value, this.format, this.opacity);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorGradientComponent.prototype, "contrastTool", {
+        get: function () {
+            return this._contrastTool;
+        },
+        /**
+         * 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 the two colors.
+         */
+        set: function (value) {
+            this._contrastTool = parseColor(value, this.format, this.opacity);
         },
         enumerable: true,
         configurable: true
@@ -155,11 +162,18 @@ var ColorGradientComponent = /** @class */ (function () {
         },
         /**
          * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         *
+         * @default 0
          */
         set: function (value) {
-            var tabindex = Number(value);
-            var defaultValue = 0;
-            this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+            if (isPresent(value)) {
+                var tabindex = Number(value);
+                this._tabindex = !isNaN(tabindex) ? tabindex : 0;
+            }
+            else {
+                // Allows removal of the tabindex attribute
+                this._tabindex = value;
+            }
         },
         enumerable: true,
         configurable: true
@@ -183,10 +197,10 @@ var ColorGradientComponent = /** @class */ (function () {
          */
         get: function () {
             // setting the initial value to undefined to force the slider to recalculate the height of the slider track on the next cdr run
-            if (!(isPresent(this.hsva) && isPresent(this.hsva.a))) {
+            if (!(isPresent(this.hsva.value) && isPresent(this.hsva.value.a))) {
                 return;
             }
-            return this.hsva.a * 100;
+            return this.hsva.value.a * 100;
         },
         enumerable: true,
         configurable: true
@@ -203,7 +217,7 @@ var ColorGradientComponent = /** @class */ (function () {
          * @hidden
          */
         get: function () {
-            return typeof this.contrastTool === 'string' && this.contrastTool !== '';
+            return this.contrastTool && this.contrastTool.length > 0;
         },
         enumerable: true,
         configurable: true
@@ -237,7 +251,7 @@ var ColorGradientComponent = /** @class */ (function () {
         if (this.disabled) {
             return;
         }
-        this.host.nativeElement.focus();
+        this.gradientDragHandle.nativeElement.focus();
     };
     /**
      * @hidden
@@ -275,7 +289,7 @@ var ColorGradientComponent = /** @class */ (function () {
             return;
         }
         this.renderer.removeClass(this.gradientWrapper.nativeElement, 'k-dragging');
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
     };
     /**
      * @hidden
@@ -322,15 +336,19 @@ var ColorGradientComponent = /** @class */ (function () {
             return;
         }
         this.gradientDragHandle.nativeElement.focus();
-        var newX = position.clientX - this.gradientRect.left;
-        var newY = position.clientY - this.gradientRect.top;
+        var gradientRect = this.gradientRect;
+        var newX = position.clientX - gradientRect.left;
+        var newY = position.clientY - gradientRect.top;
         this.ngZone.run(function () { return _this.moveDragHandle(newX, newY); });
     };
     /**
      * @hidden
      */
     ColorGradientComponent.prototype.handleHueSliderChange = function (hue) {
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        var hsva = this.hsva.value;
+        hsva.h = hue;
+        this.hsva.next(hsva);
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.backgroundColor = getColorFromHue(hue);
         this.setAlphaSliderBackground(this.backgroundColor);
     };
@@ -338,14 +356,16 @@ var ColorGradientComponent = /** @class */ (function () {
      * @hidden
      */
     ColorGradientComponent.prototype.handleAlphaSliderChange = function (alpha) {
-        this.hsva.a = alpha / 100;
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        var hsva = this.hsva.value;
+        hsva.a = alpha / 100;
+        this.hsva.next(hsva);
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
     };
     /**
      * @hidden
      */
     ColorGradientComponent.prototype.handleInputsValueChange = function (color) {
-        var parsed = parseColor(color, this.format);
+        var parsed = parseColor(color, this.format, this.opacity);
         if (this.value !== parsed) {
             this.handleValueChange(parsed);
             this.updateUI();
@@ -394,7 +414,7 @@ var ColorGradientComponent = /** @class */ (function () {
          * @hidden
          */
         get: function () {
-            var parsed = parseColor(this.value, this.format);
+            var parsed = parseColor(this.value, this.format, this.opacity);
             return "" + (this.value ? parsed : this.localizationService.get('colorGradientHandle'));
         },
         enumerable: true,
@@ -432,29 +452,35 @@ var ColorGradientComponent = /** @class */ (function () {
     });
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     ColorGradientComponent.prototype.isEmpty = function () {
         return false;
     };
     ColorGradientComponent.prototype.moveDragHandle = function (positionX, positionY) {
-        var top = fitIntoBounds(positionY, 0, this.gradientRect.height);
-        var left = fitIntoBounds(positionX, 0, this.gradientRect.width);
+        var gradientRect = this.gradientRect;
+        var gradientRectWidth = gradientRect.width;
+        var gradientRectHeight = gradientRect.height;
+        var top = fitIntoBounds(positionY, 0, gradientRectHeight);
+        var left = fitIntoBounds(positionX, 0, gradientRectWidth);
         this.setDragHandleElementPosition(top, left);
-        this.hsva.s = left / this.gradientRect.width;
-        this.hsva.v = 1 - top / this.gradientRect.height;
-        this.updateValues.next(getColorFromHSV(this.hsva));
-        this.setAlphaSliderBackground(getColorFromHSV(tslib_1.__assign({}, this.hsva, { a: 1 })));
+        var hsva = this.hsva.value;
+        hsva.s = left / gradientRectWidth;
+        hsva.v = 1 - top / gradientRectHeight;
+        this.hsva.next(hsva);
+        this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.setAlphaSliderBackground(getColorFromHSV(tslib_1.__assign({}, this.hsva.value, { a: 1 }), this.format, this.opacity));
     };
     ColorGradientComponent.prototype.updateUI = function () {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.hsva = this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 };
-        var top = (1 - this.hsva.v) * this.gradientRect.height;
-        var left = this.hsva.s * this.gradientRect.width;
+        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
+        var gradientRect = this.gradientRect;
+        var top = (1 - this.hsva.value.v) * gradientRect.height;
+        var left = this.hsva.value.s * gradientRect.width;
         this.setDragHandleElementPosition(top, left);
-        this.backgroundColor = getColorFromHue(this.hsva.h);
+        this.backgroundColor = getColorFromHue(this.hsva.value.h);
         this.setAlphaSliderBackground(this.backgroundColor);
         this.setHostElementAriaLabel();
     };
@@ -480,7 +506,7 @@ var ColorGradientComponent = /** @class */ (function () {
         this.renderer.setStyle(sliderTrack, 'background', "linear-gradient(to top, transparent, " + backgroundColor + ")");
     };
     ColorGradientComponent.prototype.setHostElementAriaLabel = function () {
-        var parsed = parseColor(this.value, this.format);
+        var parsed = parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', "" + (this.value ? parsed : this.localizationService.get('colorGradientNoColor')));
     };
     ColorGradientComponent.prototype.addEventListeners = function () {
@@ -497,7 +523,7 @@ var ColorGradientComponent = /** @class */ (function () {
             var keyupListener = _this.renderer.listen(_this.gradientDragHandle.nativeElement, 'keyup', function () {
                 _this.renderer.removeClass(_this.gradientWrapper.nativeElement, 'k-dragging');
                 if (!_this.readonly && !_this.disabled) {
-                    _this.ngZone.run(function () { return _this.handleValueChange(getColorFromHSV(_this.hsva)); });
+                    _this.ngZone.run(function () { return _this.handleValueChange(getColorFromHSV(_this.hsva.value, _this.format, _this.opacity)); });
                 }
             });
             var dragHandleFocusInListener = _this.renderer.listen(_this.gradientDragHandle.nativeElement, 'focusin', function () {
@@ -535,24 +561,24 @@ var ColorGradientComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], ColorGradientComponent.prototype, "disabledClass", null);
-    tslib_1.__decorate([
-        HostBinding('attr.tabindex'),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorGradientComponent.prototype, "hostTabindex", null);
     tslib_1.__decorate([
         HostBinding('attr.id'),
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [])
     ], ColorGradientComponent.prototype, "gradientId", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorGradientComponent.prototype, "id", void 0);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
     ], ColorGradientComponent.prototype, "direction", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.tabindex'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorGradientComponent.prototype, "hostTabindex", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorGradientComponent.prototype, "id", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -580,21 +606,22 @@ var ColorGradientComponent = /** @class */ (function () {
     ], ColorGradientComponent.prototype, "value", null);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorGradientComponent.prototype, "contrastTool", void 0);
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ColorGradientComponent.prototype, "contrastTool", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Number),
         tslib_1.__metadata("design:paramtypes", [Number])
     ], ColorGradientComponent.prototype, "tabindex", null);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorGradientComponent.prototype, "valueChange", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
     ], ColorGradientComponent.prototype, "format", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], ColorGradientComponent.prototype, "valueChange", void 0);
     tslib_1.__decorate([
         ViewChild('gradientDragHandle', { read: ElementRef, static: false }),
         tslib_1.__metadata("design:type", ElementRef)
@@ -613,6 +640,7 @@ var ColorGradientComponent = /** @class */ (function () {
     ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
     ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
         Component({
+            exportAs: 'kendoColorGradient',
             selector: 'kendo-colorgradient',
             providers: [
                 {
@@ -634,8 +662,8 @@ var ColorGradientComponent = /** @class */ (function () {
                     useValue: 'kendo.colorgradient'
                 }
             ],
-            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-hexInputPlaceholder=\"kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input.\"\n            hexInputPlaceholder=\"HEX Color\"\n            i18n-redInputPlaceholder=\"kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input.\"\n            redInputPlaceholder=\"Red\"\n            i18n-greenInputPlaceholder=\"kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input.\"\n            greenInputPlaceholder=\"Green\"\n            i18n-blueInputPlaceholder=\"kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input.\"\n            blueInputPlaceholder=\"Blue\"\n            i18n-alphaInputPlaceholder=\"kendo.colorgradient.alphaInputPlaceholder|The placeholder for the alpha input.\"\n            alphaInputPlaceholder=\"Alpha\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-flat k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [(value)]=\"hsva.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity && format === 'rgba'\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
-            styles: ["\n        .k-clear-color {\n            position: absolute;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-align-self-end {\n            height: 140px;\n        }\n    "]
+            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [value]=\"hsva.value.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
+            styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "]
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef,
             NgZone,