@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/esm2020/colorpicker/color-gradient.component.mjs

@@ -0,0 +1,1003 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, ViewChild, ElementRef, Renderer2, NgZone, Output, EventEmitter, HostBinding, forwardRef, ChangeDetectorRef, Injector, HostListener } from '@angular/core';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { take, throttleTime } from 'rxjs/operators';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { isChanged, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
+import { validatePackage } from '@progress/kendo-licensing';
+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 { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
+import { ColorInputComponent } from './color-input.component';
+import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED, DRAGHANDLE_MOVE_SPEED_SMALL_STEP } from './constants';
+import { packageMetadata } from '../package-metadata';
+import { dropletSlashIcon } from '@progress/kendo-svg-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./color-contrast-svg.component";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "../slider/slider.component";
+import * as i5 from "./color-input.component";
+import * as i6 from "./contrast.component";
+import * as i7 from "./localization/localized-colorpicker-messages.directive";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "@angular/common";
+let 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.
+ */
+export class ColorGradientComponent {
+    constructor(host, ngZone, renderer, cdr, localizationService, injector) {
+        this.host = host;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.localizationService = localizationService;
+        this.injector = injector;
+        this.hostClasses = true;
+        this.ariaRole = 'textbox';
+        /**
+         * @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 = DEFAULT_OUTPUT_FORMAT;
+        /**
+         * Fires each time the user selects a new color.
+         */
+        this.valueChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.backgroundColor = 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 BehaviorSubject({});
+        /**
+         * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
+         *
+         * @default 5
+         */
+        this.gradientSliderStep = DRAGHANDLE_MOVE_SPEED;
+        /**
+         * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.
+         *
+         * @default 2
+         */
+        this.gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
+        /**
+         * @hidden
+         */
+        this.internalNavigation = false;
+        /**
+         * @hidden
+         */
+        this.dropletSlashIcon = dropletSlashIcon;
+        this._tabindex = 0;
+        this.listeners = [];
+        this.hueSliderTouched = false;
+        this.alphaSliderTouched = false;
+        this.updateValues = new Subject();
+        this.hsvHandleCoordinates = { x: 0, y: 0 };
+        this.notifyNgChanged = () => { };
+        this.notifyNgTouched = () => { };
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    get readonlyAttribute() {
+        return this.readonly;
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    get gradientId() {
+        return this.id;
+    }
+    get hostTabindex() {
+        return this.tabindex?.toString() || '0';
+    }
+    get isControlInvalid() {
+        return (this.control?.invalid)?.toString();
+    }
+    get isDisabled() {
+        return this.disabled?.toString() || undefined;
+    }
+    /**
+     * @hidden
+     */
+    enterHandler(event) {
+        if (event.target !== this.host.nativeElement) {
+            return;
+        }
+        this.internalNavigation = true;
+        this.gradientDragHandle.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    escapeHandler(event) {
+        if (!this.host.nativeElement.matches(':focus')) {
+            event.stopImmediatePropagation();
+        }
+        this.internalNavigation = false;
+        this.host.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    focusHandler(ev) {
+        this.internalNavigation = ev.target !== this.host.nativeElement;
+    }
+    /**
+     * Specifies the value of the initially selected color.
+     */
+    set value(value) {
+        this._value = parseColor(value, this.format, this.opacity);
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * 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 contrastTool(value) {
+        this._contrastTool = parseColor(value, this.format, this.opacity);
+    }
+    get contrastTool() {
+        return this._contrastTool;
+    }
+    /**
+     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
+     */
+    set tabindex(value) {
+        if (isPresent(value)) {
+            const tabindex = Number(value);
+            this._tabindex = !isNaN(tabindex) ? tabindex : 0;
+        }
+        else {
+            // Allows removal of the tabindex attribute
+            this._tabindex = value;
+        }
+    }
+    get tabindex() {
+        return !this.disabled ? this._tabindex : undefined;
+    }
+    /**
+     * Indicates whether the ColorGradient or any of its content is focused.
+     */
+    get isFocused() {
+        if (!(isDocumentAvailable() && isPresent(this.host))) {
+            return false;
+        }
+        return this.host.nativeElement === document.activeElement || this.host.nativeElement.contains(document.activeElement);
+    }
+    /**
+     * @hidden
+     */
+    get alphaSliderValue() {
+        // 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.value) && isPresent(this.hsva.value.a))) {
+            return;
+        }
+        return this.hsva.value.a * 100;
+    }
+    get gradientRect() {
+        return this.gradientWrapper.nativeElement.getBoundingClientRect();
+    }
+    /**
+     * @hidden
+     */
+    get hsvSliderValueText() {
+        return `X: ${this.hsvHandleCoordinates.x} Y: ${this.hsvHandleCoordinates.y}`;
+    }
+    /**
+     * @hidden
+     */
+    get contrastToolVisible() {
+        return this.contrastTool && this.contrastTool.length > 0;
+    }
+    /**
+     * @hidden
+     */
+    get innerTabIndex() {
+        return this.internalNavigation ? 0 : -1;
+    }
+    ngOnInit() {
+        this.control = this.injector.get(NgControl, null);
+    }
+    ngAfterViewInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.updateUI();
+            this.cdr.detectChanges();
+        });
+        this.addEventListeners();
+        this.subscribeChanges();
+    }
+    ngOnChanges(changes) {
+        if (isChanged('value', changes) && !this.isFocused) {
+            this.updateUI();
+        }
+        if (isChanged('delay', changes)) {
+            this.unsubscribeChanges();
+            this.subscribeChanges();
+        }
+    }
+    ngOnDestroy() {
+        this.listeners.forEach(removeListener => removeListener());
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+        this.unsubscribeChanges();
+    }
+    /**
+     * Focuses the component.
+     */
+    focus() {
+        if (this.disabled) {
+            return;
+        }
+        this.gradientDragHandle.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    reset() {
+        this.handleValueChange(undefined);
+        this.updateUI();
+    }
+    /**
+     * @hidden
+     */
+    handleDragPress(args) {
+        if (this.disabled || this.readonly || !isPresent(args.originalEvent)) {
+            return;
+        }
+        this.focus();
+        args.originalEvent.preventDefault();
+    }
+    /**
+     * @hidden
+     */
+    onHandleDrag(args) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.renderer.addClass(this.gradientWrapper.nativeElement, 'k-dragging');
+        this.changePosition(args);
+    }
+    /**
+     * @hidden
+     */
+    onHandleRelease() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.renderer.removeClass(this.gradientWrapper.nativeElement, 'k-dragging');
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+    }
+    /**
+     * @hidden
+     */
+    onKeyboardAction(args) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (args.key && args.key.indexOf('Arrow') !== -1) {
+            args.preventDefault();
+            const dragHandleElement = this.gradientDragHandle.nativeElement;
+            this.renderer.addClass(this.gradientWrapper.nativeElement, 'k-dragging');
+            let keyboardMoveX = 0;
+            let keyboardMoveY = 0;
+            const shiftKey = args.shiftKey;
+            switch (args.key) {
+                case 'ArrowRight':
+                    keyboardMoveX = shiftKey ? this.gradientSliderSmallStep : this.gradientSliderStep;
+                    break;
+                case 'ArrowLeft':
+                    keyboardMoveX = shiftKey ? -this.gradientSliderSmallStep : -this.gradientSliderStep;
+                    break;
+                case 'ArrowUp':
+                    keyboardMoveY = shiftKey ? -this.gradientSliderSmallStep : -this.gradientSliderStep;
+                    break;
+                case 'ArrowDown':
+                    keyboardMoveY = shiftKey ? this.gradientSliderSmallStep : this.gradientSliderStep;
+                    break;
+                default: break;
+            }
+            const newY = parseInt(dragHandleElement.style.top, 10) + keyboardMoveY;
+            const newX = parseInt(dragHandleElement.style.left, 10) + keyboardMoveX;
+            this.renderer.setStyle(dragHandleElement, 'top', `${newY}px`);
+            this.renderer.setStyle(dragHandleElement, 'left', `${newX}px`);
+            this.ngZone.run(() => this.moveDragHandle(newX, newY));
+        }
+    }
+    /**
+     * @hidden
+     */
+    changePosition(position) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.gradientDragHandle.nativeElement.focus();
+        const gradientRect = this.gradientRect;
+        const newX = position.clientX - gradientRect.left;
+        const newY = position.clientY - gradientRect.top;
+        this.ngZone.run(() => this.moveDragHandle(newX, newY));
+    }
+    /**
+     * @hidden
+     */
+    handleHueSliderChange(hue) {
+        const 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.setBackgroundColor(this.backgroundColor);
+        this.setAlphaSliderBackground(this.backgroundColor);
+        this.hueSliderTouched = true;
+    }
+    /**
+     * @hidden
+     */
+    handleAlphaSliderChange(alpha) {
+        const hsva = this.hsva.value;
+        hsva.a = alpha / 100;
+        this.hsva.next(hsva);
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.alphaSliderTouched = true;
+    }
+    /**
+     * @hidden
+     */
+    handleInputsValueChange(color) {
+        const parsed = parseColor(color, this.format, this.opacity);
+        if (this.value !== parsed) {
+            this.handleValueChange(parsed);
+            this.updateUI();
+        }
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.value = value;
+        if (isPresent(this.gradientWrapper)) {
+            this.updateUI();
+        }
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.notifyNgChanged = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.notifyNgTouched = fn;
+    }
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled) {
+        this.cdr.markForCheck();
+        this.disabled = isDisabled;
+    }
+    /**
+     * @hidden
+     */
+    get colorGradientHandleTitle() {
+        return this.localizationService.get('colorGradientHandle');
+    }
+    /**
+     * @hidden
+     */
+    get colorGradientHandleAriaLabel() {
+        const parsed = parseColor(this.value, this.format, this.opacity);
+        return `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`;
+    }
+    /**
+     * @hidden
+     */
+    get hueSliderTitle() {
+        return this.localizationService.get('hueSliderHandle');
+    }
+    /**
+     * @hidden
+     */
+    get opacitySliderTitle() {
+        return this.localizationService.get('opacitySliderHandle');
+    }
+    /**
+     * @hidden
+     */
+    get clearButtonTitle() {
+        return this.localizationService.get('clearButton');
+    }
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty() {
+        return false;
+    }
+    moveDragHandle(positionX, positionY) {
+        const gradientRect = this.gradientRect;
+        const gradientRectWidth = gradientRect.width;
+        const gradientRectHeight = gradientRect.height;
+        const top = fitIntoBounds(positionY, 0, gradientRectHeight);
+        const left = fitIntoBounds(positionX, 0, gradientRectWidth);
+        this.setDragHandleElementPosition(top, left);
+        const 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({ ...this.hsva.value, a: 1 }, this.format, this.opacity));
+    }
+    handleValueChange(color) {
+        if (this.value === color) {
+            return;
+        }
+        this.value = color;
+        this.valueChange.emit(color);
+        this.notifyNgChanged(color);
+        this.setHostElementAriaLabel();
+    }
+    setDragHandleElementPosition(top, left) {
+        const dragHandle = this.gradientDragHandle.nativeElement;
+        this.hsvHandleCoordinates = { x: left, y: top };
+        this.renderer.setStyle(dragHandle, 'top', `${top}px`);
+        this.renderer.setStyle(dragHandle, 'left', `${left}px`);
+    }
+    setAlphaSliderBackground(backgroundColor) {
+        if (!isPresent(this.alphaSlider)) {
+            return;
+        }
+        const sliderTrack = this.alphaSlider.track.nativeElement;
+        this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to top, transparent, ${backgroundColor})`);
+    }
+    setHostElementAriaLabel() {
+        const parsed = parseColor(this.value, this.format, this.opacity);
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
+    }
+    setBackgroundColor(color) {
+        this.renderer.setStyle(this.hsvRectangle.nativeElement, 'background', color);
+    }
+    updateUI() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (this.hueSliderTouched || this.alphaSliderTouched) {
+            this.hueSliderTouched = false;
+            this.alphaSliderTouched = false;
+            return;
+        }
+        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
+        const gradientRect = this.gradientRect;
+        const top = (1 - this.hsva.value.v) * gradientRect.height;
+        const left = this.hsva.value.s * gradientRect.width;
+        this.setDragHandleElementPosition(top, left);
+        this.backgroundColor = getColorFromHue(this.hsva.value.h);
+        this.setBackgroundColor(this.backgroundColor);
+        this.setAlphaSliderBackground(this.backgroundColor);
+        this.setHostElementAriaLabel();
+    }
+    addEventListeners() {
+        this.ngZone.runOutsideAngular(() => {
+            const focusOutListener = this.renderer.listen(this.host.nativeElement, 'focusout', (event) => {
+                if (!containsFocus(this.host.nativeElement, event.relatedTarget) && isUntouched(this.host)) {
+                    this.ngZone.run(() => this.notifyNgTouched());
+                }
+            });
+            const keydownListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'keydown', (event) => {
+                this.onKeyboardAction(event);
+            });
+            const keyupListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'keyup', () => {
+                this.renderer.removeClass(this.gradientWrapper.nativeElement, 'k-dragging');
+                if (!this.readonly && !this.disabled) {
+                    this.ngZone.run(() => this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity)));
+                }
+            });
+            const dragHandleFocusInListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusin', () => {
+                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-focus');
+            });
+            const dragHandleFocusOutListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusout', () => {
+                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-focus');
+            });
+            this.listeners.push(focusOutListener, keydownListener, keyupListener, dragHandleFocusInListener, dragHandleFocusOutListener);
+        });
+    }
+    subscribeChanges() {
+        this.changeRequestsSubscription = this.updateValues.pipe(throttleTime(this.delay)).subscribe(value => {
+            this.handleValueChange(value);
+        });
+    }
+    unsubscribeChanges() {
+        if (this.changeRequestsSubscription) {
+            this.changeRequestsSubscription.unsubscribe();
+        }
+    }
+}
+ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled" } }, providers: [
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorGradientComponent)
+        },
+        {
+            provide: KendoInput,
+            useExisting: forwardRef(() => ColorGradientComponent)
+        },
+        ColorGradientLocalizationService,
+        {
+            provide: LocalizationService,
+            useExisting: ColorGradientLocalizationService
+        },
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.colorgradient'
+        }
+    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoColorGradientLocalizedMessages
+            i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            colorGradientNoColor="Colorgradient no color chosen"
+            i18n-colorGradientHandle="kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser."
+            colorGradientHandle="Choose color"
+            i18n-clearButton="kendo.colorgradient.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.colorgradient.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            i18n-passContrast="kendo.colorgradient.passContrast|The pass message for the contrast tool."
+            passContrast="Pass"
+            i18n-failContrast="kendo.colorgradient.failContrast|The fail message for the contrast tool."
+            failContrast="Fail"
+            i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio"
+            i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
+            formatButton="Change color format"
+            i18n-redChannelLabel="kendo.colorgradient.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorgradient.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorgradient.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorgradient.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
+        </ng-container>
+        <div class="k-colorgradient-canvas k-hstack">
+            <div class="k-hsv-rectangle" #hsvRectangle>
+                <div
+                    #gradientWrapper
+                    kendoDraggable
+                    class="k-hsv-gradient"
+                    (click)="changePosition($event)"
+                    (kendoPress)="handleDragPress($event)"
+                    (kendoDrag)="onHandleDrag($event)"
+                    (kendoRelease)="onHandleRelease()">
+                    <div
+                        #gradientDragHandle
+                        class="k-hsv-draghandle k-draghandle"
+                        [tabindex]="innerTabIndex.toString()"
+                        [attr.title]="colorGradientHandleTitle"
+                        [attr.aria-label]="colorGradientHandleTitle + ' ' + colorGradientHandleAriaLabel"
+                        role="slider"
+                        [attr.aria-valuetext]="hsvSliderValueText"
+                        [attr.aria-readonly]="readonly ? readonly : undefined"
+                        [attr.aria-disabled]="disabled ? disabled : undefined"
+                        [attr.aria-orientation]="'undefined'"
+                        [attr.aria-valuenow]="'0'"
+                        (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
+                    </div>
+                </div>
+                <svg kendoColorContrastSvg
+                    *ngIf="contrastToolVisible && gradientWrapper"
+                    class="k-color-contrast-svg"
+                    xmlns="http://www.w3.org/2000/svg"
+                    [wrapper]="gradientWrapper ? gradientWrapper : undefined"
+                    [hsva]="hsva"
+                    [backgroundColor]="contrastTool"
+                    [style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
+                </svg>
+            </div>
+            <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
+
+                <button
+                    kendoButton
+                    *ngIf="clearButton"
+                    class="k-clear-color"
+                    fillMode="flat"
+                    icon="droplet-slash"
+                    [svgIcon]="dropletSlashIcon"
+                    (click)="reset()"
+                    (keydown.enter)="reset()"
+                    (keydown.space)="reset()"
+                    [attr.aria-label]="clearButtonTitle"
+                    [attr.title]="clearButtonTitle"
+                    [tabindex]="innerTabIndex.toString()"
+                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'"
+                >
+                </button>
+                <kendo-slider
+                    [ngClass]="{'k-align-self-end': clearButton}"
+                    [style.height.px]="clearButton ? '140' : null"
+                    class="k-hue-slider k-colorgradient-slider"
+                    [dragHandleTitle]="hueSliderTitle"
+                    [tabindex]="innerTabIndex"
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [showButtons]="false"
+                    tickPlacement="none"
+                    [vertical]="true"
+                    [min]="0"
+                    [max]="360"
+                    [value]="hsva.value.h"
+                    [smallStep]="5"
+                    [largeStep]="10"
+                    (valueChange)="handleHueSliderChange($event)"
+                >
+                </kendo-slider>
+                <kendo-slider
+                    *ngIf="opacity"
+                    #alphaSlider
+                    [tabindex]="innerTabIndex"
+                    [ngClass]="{'k-align-self-end': clearButton}"
+                    [style.height.px]="clearButton ? '140' : null"
+                    class="k-alpha-slider k-colorgradient-slider"
+                    [dragHandleTitle]="opacitySliderTitle"
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [showButtons]="false"
+                    tickPlacement="none"
+                    [vertical]="true"
+                    [min]="0"
+                    [max]="100"
+                    [smallStep]="1"
+                    [largeStep]="10"
+                    [value]="alphaSliderValue"
+                    (valueChange)="handleAlphaSliderChange($event)"
+                >
+                </kendo-slider>
+            </div>
+        </div>
+        <kendo-colorinput  #inputs
+            [tabindex]="innerTabIndex"
+            [opacity]="opacity"
+            [formatView]="format"
+            [value]="value"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            (valueChange)="handleInputsValueChange($event)"
+            (tabOut)="gradientDragHandle.focus()"
+        >
+        </kendo-colorinput>
+        <div class="k-colorgradient-color-contrast k-vbox"
+            *ngIf="contrastToolVisible"
+            kendoContrastTool
+            [value]="value"
+            [ratio]="contrastTool">
+        </div>
+    `, isInline: true, components: [{ type: i2.ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i3.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: i5.ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: i6.ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: i7.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i8.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorGradientComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoColorGradient',
+                    selector: 'kendo-colorgradient',
+                    providers: [
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorGradientComponent)
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => ColorGradientComponent)
+                        },
+                        ColorGradientLocalizationService,
+                        {
+                            provide: LocalizationService,
+                            useExisting: ColorGradientLocalizationService
+                        },
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.colorgradient'
+                        }
+                    ],
+                    template: `
+        <ng-container kendoColorGradientLocalizedMessages
+            i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            colorGradientNoColor="Colorgradient no color chosen"
+            i18n-colorGradientHandle="kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser."
+            colorGradientHandle="Choose color"
+            i18n-clearButton="kendo.colorgradient.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.colorgradient.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            i18n-passContrast="kendo.colorgradient.passContrast|The pass message for the contrast tool."
+            passContrast="Pass"
+            i18n-failContrast="kendo.colorgradient.failContrast|The fail message for the contrast tool."
+            failContrast="Fail"
+            i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio"
+            i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
+            formatButton="Change color format"
+            i18n-redChannelLabel="kendo.colorgradient.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorgradient.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorgradient.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorgradient.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
+        </ng-container>
+        <div class="k-colorgradient-canvas k-hstack">
+            <div class="k-hsv-rectangle" #hsvRectangle>
+                <div
+                    #gradientWrapper
+                    kendoDraggable
+                    class="k-hsv-gradient"
+                    (click)="changePosition($event)"
+                    (kendoPress)="handleDragPress($event)"
+                    (kendoDrag)="onHandleDrag($event)"
+                    (kendoRelease)="onHandleRelease()">
+                    <div
+                        #gradientDragHandle
+                        class="k-hsv-draghandle k-draghandle"
+                        [tabindex]="innerTabIndex.toString()"
+                        [attr.title]="colorGradientHandleTitle"
+                        [attr.aria-label]="colorGradientHandleTitle + ' ' + colorGradientHandleAriaLabel"
+                        role="slider"
+                        [attr.aria-valuetext]="hsvSliderValueText"
+                        [attr.aria-readonly]="readonly ? readonly : undefined"
+                        [attr.aria-disabled]="disabled ? disabled : undefined"
+                        [attr.aria-orientation]="'undefined'"
+                        [attr.aria-valuenow]="'0'"
+                        (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
+                    </div>
+                </div>
+                <svg kendoColorContrastSvg
+                    *ngIf="contrastToolVisible && gradientWrapper"
+                    class="k-color-contrast-svg"
+                    xmlns="http://www.w3.org/2000/svg"
+                    [wrapper]="gradientWrapper ? gradientWrapper : undefined"
+                    [hsva]="hsva"
+                    [backgroundColor]="contrastTool"
+                    [style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
+                </svg>
+            </div>
+            <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
+
+                <button
+                    kendoButton
+                    *ngIf="clearButton"
+                    class="k-clear-color"
+                    fillMode="flat"
+                    icon="droplet-slash"
+                    [svgIcon]="dropletSlashIcon"
+                    (click)="reset()"
+                    (keydown.enter)="reset()"
+                    (keydown.space)="reset()"
+                    [attr.aria-label]="clearButtonTitle"
+                    [attr.title]="clearButtonTitle"
+                    [tabindex]="innerTabIndex.toString()"
+                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'"
+                >
+                </button>
+                <kendo-slider
+                    [ngClass]="{'k-align-self-end': clearButton}"
+                    [style.height.px]="clearButton ? '140' : null"
+                    class="k-hue-slider k-colorgradient-slider"
+                    [dragHandleTitle]="hueSliderTitle"
+                    [tabindex]="innerTabIndex"
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [showButtons]="false"
+                    tickPlacement="none"
+                    [vertical]="true"
+                    [min]="0"
+                    [max]="360"
+                    [value]="hsva.value.h"
+                    [smallStep]="5"
+                    [largeStep]="10"
+                    (valueChange)="handleHueSliderChange($event)"
+                >
+                </kendo-slider>
+                <kendo-slider
+                    *ngIf="opacity"
+                    #alphaSlider
+                    [tabindex]="innerTabIndex"
+                    [ngClass]="{'k-align-self-end': clearButton}"
+                    [style.height.px]="clearButton ? '140' : null"
+                    class="k-alpha-slider k-colorgradient-slider"
+                    [dragHandleTitle]="opacitySliderTitle"
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [showButtons]="false"
+                    tickPlacement="none"
+                    [vertical]="true"
+                    [min]="0"
+                    [max]="100"
+                    [smallStep]="1"
+                    [largeStep]="10"
+                    [value]="alphaSliderValue"
+                    (valueChange)="handleAlphaSliderChange($event)"
+                >
+                </kendo-slider>
+            </div>
+        </div>
+        <kendo-colorinput  #inputs
+            [tabindex]="innerTabIndex"
+            [opacity]="opacity"
+            [formatView]="format"
+            [value]="value"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            (valueChange)="handleInputsValueChange($event)"
+            (tabOut)="gradientDragHandle.focus()"
+        >
+        </kendo-colorinput>
+        <div class="k-colorgradient-color-contrast k-vbox"
+            *ngIf="contrastToolVisible"
+            kendoContrastTool
+            [value]="value"
+            [ratio]="contrastTool">
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-colorgradient']
+            }], readonlyAttribute: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], gradientId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostTabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isControlInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], enterHandler: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }], escapeHandler: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
+            }], focusHandler: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], id: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], contrastTool: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], gradientSliderStep: [{
+                type: Input
+            }], gradientSliderSmallStep: [{
+                type: Input
+            }], gradientDragHandle: [{
+                type: ViewChild,
+                args: ['gradientDragHandle']
+            }], inputs: [{
+                type: ViewChild,
+                args: ['inputs']
+            }], alphaSlider: [{
+                type: ViewChild,
+                args: ['alphaSlider']
+            }], gradientWrapper: [{
+                type: ViewChild,
+                args: ['gradientWrapper']
+            }], hsvRectangle: [{
+                type: ViewChild,
+                args: ['hsvRectangle']
+            }] } });