@progress/kendo-angular-inputs 8.0.4 → 9.0.0-next.202202161022

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

@@ -1,681 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var core_1 = require("@angular/core");
-var forms_1 = require("@angular/forms");
-var rxjs_1 = require("rxjs");
-var operators_1 = require("rxjs/operators");
-var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
-var kendo_angular_common_1 = require("@progress/kendo-angular-common");
-var kendo_licensing_1 = require("@progress/kendo-licensing");
-var dom_utils_1 = require("../common/dom-utils");
-var utils_1 = require("./utils");
-var utils_2 = require("../common/utils");
-var slider_component_1 = require("../slider/slider.component");
-var colorgradient_localization_service_1 = require("./localization/colorgradient-localization.service");
-var color_input_component_1 = require("./color-input.component");
-var constants_1 = require("./constants");
-var package_metadata_1 = require("../package-metadata");
-var serial = 0;
-/**
- * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
- * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
- */
-var ColorGradientComponent = /** @class */ (function () {
-    function ColorGradientComponent(host, ngZone, renderer, cdr, localizationService) {
-        var _this = this;
-        this.host = host;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.localizationService = localizationService;
-        this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        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;
-        /**
-         * Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay.
-         *
-         * @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 = constants_1.DEFAULT_OUTPUT_FORMAT;
-        /**
-         * Fires each time the user selects a new color.
-         */
-        this.valueChange = new core_1.EventEmitter();
-        /**
-         * @hidden
-         */
-        this.backgroundColor = constants_1.DEFAULT_GRADIENT_BACKGROUND_COLOR;
-        /**
-         * @hidden
-         *
-         * Represents the currently selected `hue`, `saturation`, `value`, and `alpha` values.
-         * The values are initially set in `ngOnInit` or in `ngOnChanges` and are
-         * updated on moving the drag handle or the sliders.
-         */
-        this.hsva = new rxjs_1.BehaviorSubject({});
-        this._tabindex = 0;
-        this.listeners = [];
-        this.updateValues = new rxjs_1.Subject();
-        this.notifyNgChanged = function () { };
-        this.notifyNgTouched = function () { };
-        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
-        this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
-    ColorGradientComponent_1 = ColorGradientComponent;
-    Object.defineProperty(ColorGradientComponent.prototype, "readonlyAttribute", {
-        get: function () {
-            return this.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "disabledClass", {
-        get: function () {
-            return this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "gradientId", {
-        get: function () {
-            return this.id;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "hostTabindex", {
-        get: function () {
-            return this.tabindex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
-        /**
-         * Specifies the value of the initially selected color.
-         */
-        set: function (value) {
-            this._value = utils_1.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 = utils_1.parseColor(value, this.format, this.opacity);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "tabindex", {
-        get: function () {
-            return !this.disabled ? this._tabindex : undefined;
-        },
-        /**
-         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         *
-         * @default 0
-         */
-        set: function (value) {
-            if (utils_2.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
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "isFocused", {
-        /**
-         * Indicates whether the ColorGradient or any of its content is focused.
-         */
-        get: function () {
-            if (!(kendo_angular_common_1.isDocumentAvailable() && utils_2.isPresent(this.host))) {
-                return false;
-            }
-            return this.host.nativeElement === document.activeElement || this.host.nativeElement.contains(document.activeElement);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "alphaSliderValue", {
-        /**
-         * @hidden
-         */
-        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 (!(utils_2.isPresent(this.hsva.value) && utils_2.isPresent(this.hsva.value.a))) {
-                return;
-            }
-            return this.hsva.value.a * 100;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "gradientRect", {
-        get: function () {
-            return this.gradientWrapper.nativeElement.getBoundingClientRect();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "contrastToolVisible", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.contrastTool && this.contrastTool.length > 0;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColorGradientComponent.prototype.ngAfterViewInit = function () {
-        this.updateUI();
-        this.cdr.detectChanges();
-        this.addEventListeners();
-        this.subscribeChanges();
-    };
-    ColorGradientComponent.prototype.ngOnChanges = function (changes) {
-        if (kendo_angular_common_1.isChanged('value', changes) && !this.isFocused) {
-            this.updateUI();
-        }
-        if (kendo_angular_common_1.isChanged('delay', changes)) {
-            this.unsubscribeChanges();
-            this.subscribeChanges();
-        }
-    };
-    ColorGradientComponent.prototype.ngOnDestroy = function () {
-        this.listeners.forEach(function (removeListener) { return removeListener(); });
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        this.unsubscribeChanges();
-    };
-    /**
-     * Focuses the component.
-     */
-    ColorGradientComponent.prototype.focus = function () {
-        if (this.disabled) {
-            return;
-        }
-        this.gradientDragHandle.nativeElement.focus();
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.reset = function () {
-        this.handleValueChange(undefined);
-        this.updateUI();
-        this.host.nativeElement.focus();
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.handleDragPress = function (args) {
-        if (this.disabled || this.readonly || !utils_2.isPresent(args.originalEvent)) {
-            return;
-        }
-        this.focus();
-        args.originalEvent.preventDefault();
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.onHandleDrag = function (args) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        this.renderer.addClass(this.gradientWrapper.nativeElement, 'k-dragging');
-        this.changePosition(args);
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.onHandleRelease = function () {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        this.renderer.removeClass(this.gradientWrapper.nativeElement, 'k-dragging');
-        this.handleValueChange(utils_1.getColorFromHSV(this.hsva.value, this.format, this.opacity));
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.onKeyboardAction = function (args) {
-        var _this = this;
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        if (args.key && args.key.indexOf('Arrow') !== -1) {
-            args.preventDefault();
-            var dragHandleElement = this.gradientDragHandle.nativeElement;
-            this.renderer.addClass(this.gradientWrapper.nativeElement, 'k-dragging');
-            var keyboardMoveX = 0;
-            var keyboardMoveY = 0;
-            switch (args.key) {
-                case 'ArrowRight':
-                    keyboardMoveX = constants_1.DRAGHANDLE_MOVE_SPEED;
-                    break;
-                case 'ArrowLeft':
-                    keyboardMoveX = -constants_1.DRAGHANDLE_MOVE_SPEED;
-                    break;
-                case 'ArrowUp':
-                    keyboardMoveY = -constants_1.DRAGHANDLE_MOVE_SPEED;
-                    break;
-                case 'ArrowDown':
-                    keyboardMoveY = constants_1.DRAGHANDLE_MOVE_SPEED;
-                    break;
-                default: break;
-            }
-            var newY_1 = parseInt(dragHandleElement.style.top, 10) + keyboardMoveY;
-            var newX_1 = parseInt(dragHandleElement.style.left, 10) + keyboardMoveX;
-            this.renderer.setStyle(dragHandleElement, 'top', newY_1 + "px");
-            this.renderer.setStyle(dragHandleElement, 'left', newX_1 + "px");
-            this.ngZone.run(function () { return _this.moveDragHandle(newX_1, newY_1); });
-        }
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.changePosition = function (position) {
-        var _this = this;
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        this.gradientDragHandle.nativeElement.focus();
-        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) {
-        var hsva = this.hsva.value;
-        hsva.h = hue;
-        this.hsva.next(hsva);
-        this.handleValueChange(utils_1.getColorFromHSV(this.hsva.value, this.format, this.opacity));
-        this.backgroundColor = utils_1.getColorFromHue(hue);
-        this.setAlphaSliderBackground(this.backgroundColor);
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.handleAlphaSliderChange = function (alpha) {
-        var hsva = this.hsva.value;
-        hsva.a = alpha / 100;
-        this.hsva.next(hsva);
-        this.handleValueChange(utils_1.getColorFromHSV(this.hsva.value, this.format, this.opacity));
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.handleInputsValueChange = function (color) {
-        var parsed = utils_1.parseColor(color, this.format, this.opacity);
-        if (this.value !== parsed) {
-            this.handleValueChange(parsed);
-            this.updateUI();
-        }
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.writeValue = function (value) {
-        this.value = value;
-        if (utils_2.isPresent(this.gradientWrapper)) {
-            this.updateUI();
-        }
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.registerOnChange = function (fn) {
-        this.notifyNgChanged = fn;
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.registerOnTouched = function (fn) {
-        this.notifyNgTouched = fn;
-    };
-    /**
-     * @hidden
-     */
-    ColorGradientComponent.prototype.setDisabledState = function (isDisabled) {
-        this.cdr.markForCheck();
-        this.disabled = isDisabled;
-    };
-    Object.defineProperty(ColorGradientComponent.prototype, "colorGradientHandleTitle", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.localizationService.get('colorGradientHandle');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "colorGradientHandleAriaLabel", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            var parsed = utils_1.parseColor(this.value, this.format, this.opacity);
-            return "" + (this.value ? parsed : this.localizationService.get('colorGradientHandle'));
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "hueSliderTitle", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.localizationService.get('hueSliderHandle');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "opacitySliderTitle", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.localizationService.get('opacitySliderHandle');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorGradientComponent.prototype, "clearButtonTitle", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.localizationService.get('clearButton');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     * Used by the FloatingLabel to determine if the component is empty.
-     */
-    ColorGradientComponent.prototype.isEmpty = function () {
-        return false;
-    };
-    ColorGradientComponent.prototype.moveDragHandle = function (positionX, positionY) {
-        var gradientRect = this.gradientRect;
-        var gradientRectWidth = gradientRect.width;
-        var gradientRectHeight = gradientRect.height;
-        var top = utils_2.fitIntoBounds(positionY, 0, gradientRectHeight);
-        var left = utils_2.fitIntoBounds(positionX, 0, gradientRectWidth);
-        this.setDragHandleElementPosition(top, left);
-        var hsva = this.hsva.value;
-        hsva.s = left / gradientRectWidth;
-        hsva.v = 1 - top / gradientRectHeight;
-        this.hsva.next(hsva);
-        this.updateValues.next(utils_1.getColorFromHSV(this.hsva.value, this.format, this.opacity));
-        this.setAlphaSliderBackground(utils_1.getColorFromHSV(tslib_1.__assign({}, this.hsva.value, { a: 1 }), this.format, this.opacity));
-    };
-    ColorGradientComponent.prototype.updateUI = function () {
-        if (!kendo_angular_common_1.isDocumentAvailable()) {
-            return;
-        }
-        this.hsva.next(this.value ? utils_1.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 = utils_1.getColorFromHue(this.hsva.value.h);
-        this.setAlphaSliderBackground(this.backgroundColor);
-        this.setHostElementAriaLabel();
-    };
-    ColorGradientComponent.prototype.handleValueChange = function (color) {
-        if (this.value === color) {
-            return;
-        }
-        this.value = color;
-        this.valueChange.emit(color);
-        this.notifyNgChanged(color);
-        this.setHostElementAriaLabel();
-    };
-    ColorGradientComponent.prototype.setDragHandleElementPosition = function (top, left) {
-        var dragHandle = this.gradientDragHandle.nativeElement;
-        this.renderer.setStyle(dragHandle, 'top', top + "px");
-        this.renderer.setStyle(dragHandle, 'left', left + "px");
-    };
-    ColorGradientComponent.prototype.setAlphaSliderBackground = function (backgroundColor) {
-        if (!utils_2.isPresent(this.alphaSlider)) {
-            return;
-        }
-        var sliderTrack = this.alphaSlider.track.nativeElement;
-        this.renderer.setStyle(sliderTrack, 'background', "linear-gradient(to top, transparent, " + backgroundColor + ")");
-    };
-    ColorGradientComponent.prototype.setHostElementAriaLabel = function () {
-        var parsed = utils_1.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 () {
-        var _this = this;
-        this.ngZone.runOutsideAngular(function () {
-            var focusOutListener = _this.renderer.listen(_this.host.nativeElement, 'focusout', function (event) {
-                if (!dom_utils_1.containsFocus(_this.host.nativeElement, event.relatedTarget) && dom_utils_1.isUntouched(_this.host)) {
-                    _this.ngZone.run(function () { return _this.notifyNgTouched(); });
-                }
-            });
-            var keydownListener = _this.renderer.listen(_this.gradientDragHandle.nativeElement, 'keydown', function (event) {
-                _this.onKeyboardAction(event);
-            });
-            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(utils_1.getColorFromHSV(_this.hsva.value, _this.format, _this.opacity)); });
-                }
-            });
-            var dragHandleFocusInListener = _this.renderer.listen(_this.gradientDragHandle.nativeElement, 'focusin', function () {
-                _this.renderer.addClass(_this.gradientDragHandle.nativeElement, 'k-state-focus');
-            });
-            var dragHandleFocusOutListener = _this.renderer.listen(_this.gradientDragHandle.nativeElement, 'focusout', function () {
-                _this.renderer.removeClass(_this.gradientDragHandle.nativeElement, 'k-state-focus');
-            });
-            _this.listeners.push(focusOutListener, keydownListener, keyupListener, dragHandleFocusInListener, dragHandleFocusOutListener);
-        });
-    };
-    ColorGradientComponent.prototype.subscribeChanges = function () {
-        var _this = this;
-        this.changeRequestsSubscription = this.updateValues.pipe(operators_1.throttleTime(this.delay)).subscribe(function (value) {
-            _this.handleValueChange(value);
-        });
-    };
-    ColorGradientComponent.prototype.unsubscribeChanges = function () {
-        if (this.changeRequestsSubscription) {
-            this.changeRequestsSubscription.unsubscribe();
-        }
-    };
-    var ColorGradientComponent_1;
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-colorgradient'),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorGradientComponent.prototype, "hostClasses", void 0);
-    tslib_1.__decorate([
-        core_1.HostBinding('attr.aria-readonly'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorGradientComponent.prototype, "readonlyAttribute", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('class.k-state-disabled'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorGradientComponent.prototype, "disabledClass", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('attr.id'),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorGradientComponent.prototype, "gradientId", null);
-    tslib_1.__decorate([
-        core_1.HostBinding('attr.dir'),
-        tslib_1.__metadata("design:type", String)
-    ], ColorGradientComponent.prototype, "direction", void 0);
-    tslib_1.__decorate([
-        core_1.HostBinding('attr.tabindex'),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorGradientComponent.prototype, "hostTabindex", null);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorGradientComponent.prototype, "id", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorGradientComponent.prototype, "opacity", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorGradientComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorGradientComponent.prototype, "readonly", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorGradientComponent.prototype, "clearButton", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], ColorGradientComponent.prototype, "delay", void 0);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], ColorGradientComponent.prototype, "value", null);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], ColorGradientComponent.prototype, "contrastTool", null);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [Number])
-    ], ColorGradientComponent.prototype, "tabindex", null);
-    tslib_1.__decorate([
-        core_1.Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorGradientComponent.prototype, "format", void 0);
-    tslib_1.__decorate([
-        core_1.Output(),
-        tslib_1.__metadata("design:type", core_1.EventEmitter)
-    ], ColorGradientComponent.prototype, "valueChange", void 0);
-    tslib_1.__decorate([
-        core_1.ViewChild('gradientDragHandle', { read: core_1.ElementRef, static: false }),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], ColorGradientComponent.prototype, "gradientDragHandle", void 0);
-    tslib_1.__decorate([
-        core_1.ViewChild('inputs', { static: false }),
-        tslib_1.__metadata("design:type", color_input_component_1.ColorInputComponent)
-    ], ColorGradientComponent.prototype, "inputs", void 0);
-    tslib_1.__decorate([
-        core_1.ViewChild('alphaSlider', { static: false }),
-        tslib_1.__metadata("design:type", slider_component_1.SliderComponent)
-    ], ColorGradientComponent.prototype, "alphaSlider", void 0);
-    tslib_1.__decorate([
-        core_1.ViewChild('gradientWrapper', { static: false }),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
-    ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
-        core_1.Component({
-            exportAs: 'kendoColorGradient',
-            selector: 'kendo-colorgradient',
-            providers: [
-                {
-                    multi: true,
-                    provide: forms_1.NG_VALUE_ACCESSOR,
-                    useExisting: core_1.forwardRef(function () { return ColorGradientComponent_1; })
-                },
-                {
-                    provide: kendo_angular_common_1.KendoInput,
-                    useExisting: core_1.forwardRef(function () { return ColorGradientComponent_1; })
-                },
-                colorgradient_localization_service_1.ColorGradientLocalizationService,
-                {
-                    provide: kendo_angular_l10n_1.LocalizationService,
-                    useExisting: colorgradient_localization_service_1.ColorGradientLocalizationService
-                },
-                {
-                    provide: kendo_angular_l10n_1.L10N_PREFIX,
-                    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-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", [core_1.ElementRef,
-            core_1.NgZone,
-            core_1.Renderer2,
-            core_1.ChangeDetectorRef,
-            kendo_angular_l10n_1.LocalizationService])
-    ], ColorGradientComponent);
-    return ColorGradientComponent;
-}());
-exports.ColorGradientComponent = ColorGradientComponent;