@progress/kendo-angular-inputs 21.4.1 → 22.0.0

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

@@ -1,1110 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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 { DraggableDirective, 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, getStylingClasses } 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 { ContrastComponent } from './contrast.component';
-import { ColorContrastSvgComponent } from './color-contrast-svg.component';
-import { NgClass } from '@angular/common';
-import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-let serial = 0;
-const DEFAULT_SIZE = 'medium';
-/**
- * Represents the Kendo UI ColorGradient component.
- *
- * The ColorGradientComponent lets you select a color by moving a drag handle over a gradient area. You can use it directly or as part of the `kendo-colorpicker`.
- *
- * @example
- * ```html
- * <kendo-colorgradient [(ngModel)]="color"></kendo-colorgradient>
- * ```
- *
- * @remarks
- * Supported children components are: {@link ColorPickerMessages}.
- */
-export class ColorGradientComponent {
-    host;
-    ngZone;
-    renderer;
-    cdr;
-    localizationService;
-    injector;
-    hostClasses = true;
-    get readonlyAttribute() {
-        return this.ariaAttributesEnabled ? this.readonly : undefined;
-    }
-    get disabledClass() {
-        return this.disabled;
-    }
-    get gradientId() {
-        return this.id;
-    }
-    direction;
-    get hostTabindex() {
-        return this.tabindex?.toString() || '0';
-    }
-    get ariaRole() {
-        return this.ariaAttributesEnabled ? 'textbox' : undefined;
-    }
-    get isControlInvalid() {
-        return this.ariaAttributesEnabled ? (this.control?.invalid)?.toString() : undefined;
-    }
-    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;
-    }
-    /**
-     * @hidden
-     */
-    adaptiveMode = false;
-    /**
-     * @hidden
-     */
-    id = `k-colorgradient-${serial++}`;
-    /**
-     * Shows or hides the alpha slider.
-     *
-     * @default true
-     */
-    opacity = true;
-    /**
-     * Sets the size of the ColorGradient internal elements.
-     *
-     * @default 'medium'
-     */
-    set size(size) {
-        const newSize = size || DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
-    /**
-     * Disables the ColorGradient. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
-     *
-     * @default false
-     */
-    disabled = false;
-    /**
-     * Sets the read-only state of the ColorGradient.
-     *
-     * @default false
-     */
-    readonly = false;
-    /**
-     * Shows or hides the **Clear color** button.
-     *
-     * @default false
-     */
-    clearButton = false;
-    /**
-     * Sets the delay (in milliseconds) before the value changes on handle drag.
-     *
-     * @default 0
-     */
-    delay = 0;
-    /**
-     * Sets the value of the selected color.
-     */
-    set value(value) {
-        this._value = parseColor(value, this.format, this.opacity);
-    }
-    get value() {
-        return this._value;
-    }
-    /**
-     * Enables the color contrast tool that checks the contrast ratio of the selected color against a predefined background color. [See example](slug:contrasttool_colorgradient).
-     */
-    set contrastTool(value) {
-        this._contrastTool = parseColor(value, this.format, this.opacity);
-    }
-    get contrastTool() {
-        return this._contrastTool;
-    }
-    /**
-     * Sets 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;
-    }
-    /**
-     * Sets the output format of the ColorGradient. The input value may be in a different format, but it will be parsed into the output format after the component processes it.
-     *
-     * @default 'rgba'
-     */
-    format = DEFAULT_OUTPUT_FORMAT;
-    /**
-     * Fires when the user selects a new color..
-     */
-    valueChange = new EventEmitter();
-    /**
-     * @hidden
-     */
-    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.
-     */
-    hsva = new BehaviorSubject({});
-    /**
-     * Returns `true` if the component or 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;
-    }
-    /**
-     * Sets the step (in pixels) for moving the gradient drag handle with the arrow keys.
-     *
-     * @default 5
-     */
-    gradientSliderStep = DRAGHANDLE_MOVE_SPEED;
-    /**
-     * Sets the step (in pixels) for moving the gradient drag handle with `Shift+arrow keys`.
-     *
-     * @default 2
-     */
-    gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
-    /**
-     * Controls whether ARIA attributes should be applied to the component.
-     * When used within FlatColorPicker, this should be set to false to comply with accessibility guidelines.
-     *
-     * @default true
-     * @hidden
-     */
-    ariaAttributesEnabled = true;
-    gradientDragHandle;
-    inputs;
-    alphaSlider;
-    gradientWrapper;
-    hsvRectangle;
-    /**
-     * @hidden
-     */
-    internalNavigation = false;
-    /**
-     * @hidden
-     */
-    dropletSlashIcon = dropletSlashIcon;
-    _value;
-    _tabindex = 0;
-    _contrastTool;
-    listeners = [];
-    hueSliderTouched = false;
-    alphaSliderTouched = false;
-    _size = 'medium';
-    updateValues = new Subject();
-    changeRequestsSubscription;
-    dynamicRTLSubscription;
-    hsvHandleCoordinates = { x: 0, y: 0 };
-    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;
-    }
-    control;
-    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;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
-    ngOnInit() {
-        this.control = this.injector.get(NgControl, null);
-    }
-    ngAfterViewInit() {
-        const stylingInputs = ['size'];
-        stylingInputs.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
-        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();
-        }
-        this.cdr.markForCheck();
-    }
-    /**
-     * @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;
-    }
-    notifyNgChanged = () => { };
-    notifyNgTouched = () => { };
-    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 ${this.adaptiveMode ? 'right' : 'top'}, transparent, ${backgroundColor})`);
-    }
-    setHostElementAriaLabel() {
-        if (!this.ariaAttributesEnabled) {
-            this.renderer.removeAttribute(this.host.nativeElement, 'aria-label');
-            return;
-        }
-        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();
-        }
-    }
-    handleClasses(value, input) {
-        const elem = this.host.nativeElement;
-        const classes = getStylingClasses('colorgradient', input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
-        }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep", ariaAttributesEnabled: "ariaAttributesEnabled" }, 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", "class.k-readonly": "this.readonly" } }, 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 [ngClass]="{
-                'k-colorgradient-canvas': true,
-                'k-vstack': adaptiveMode,
-                'k-hstack': !adaptiveMode
-            }">
-          <div class="k-hsv-rectangle" #hsvRectangle>
-            <div
-              #gradientWrapper
-              kendoDraggable
-              class="k-hsv-gradient"
-              (click)="changePosition($event)"
-              (kendoPress)="handleDragPress($event)"
-              (kendoDrag)="onHandleDrag($event)"
-              (kendoRelease)="onHandleRelease()"
-              [style.touch-action]="'none'">
-              <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>
-            @if (contrastToolVisible && gradientWrapper) {
-              <svg kendoColorContrastSvg
-                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 [ngClass]="{
-                    'k-hsv-controls': true,
-                    'k-sliders-wrap-clearable': clearButton,
-                    'k-vstack': adaptiveMode,
-                    'k-hstack': !adaptiveMode
-                }">
-            @if (clearButton) {
-              <button
-                kendoButton
-                class="k-clear-color"
-                fillMode="flat"
-                icon="droplet-slash"
-                [svgIcon]="dropletSlashIcon"
-                [size]="size"
-                (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]="!adaptiveMode"
-              [min]="0"
-              [max]="360"
-              [value]="hsva.value.h"
-              [smallStep]="5"
-              [largeStep]="10"
-              (valueChange)="handleHueSliderChange($event)"
-              >
-            </kendo-slider>
-            @if (opacity) {
-              <kendo-slider
-                #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]="!adaptiveMode"
-                [min]="0"
-                [max]="100"
-                [smallStep]="1"
-                [largeStep]="10"
-                [value]="alphaSliderValue"
-                (valueChange)="handleAlphaSliderChange($event)"
-                >
-              </kendo-slider>
-            }
-          </div>
-        </div>
-        <kendo-colorinput  #inputs
-          [tabindex]="innerTabIndex"
-          [opacity]="opacity"
-          [size]="size"
-          [formatView]="format"
-          [value]="value"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          (valueChange)="handleInputsValueChange($event)"
-          (tabOut)="gradientDragHandle.focus()"
-          >
-        </kendo-colorinput>
-        @if (contrastToolVisible) {
-          <div class="k-colorgradient-color-contrast k-vbox"
-            kendoContrastTool
-            [value]="value"
-            [ratio]="contrastTool">
-          </div>
-        }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "size", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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 [ngClass]="{
-                'k-colorgradient-canvas': true,
-                'k-vstack': adaptiveMode,
-                'k-hstack': !adaptiveMode
-            }">
-          <div class="k-hsv-rectangle" #hsvRectangle>
-            <div
-              #gradientWrapper
-              kendoDraggable
-              class="k-hsv-gradient"
-              (click)="changePosition($event)"
-              (kendoPress)="handleDragPress($event)"
-              (kendoDrag)="onHandleDrag($event)"
-              (kendoRelease)="onHandleRelease()"
-              [style.touch-action]="'none'">
-              <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>
-            @if (contrastToolVisible && gradientWrapper) {
-              <svg kendoColorContrastSvg
-                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 [ngClass]="{
-                    'k-hsv-controls': true,
-                    'k-sliders-wrap-clearable': clearButton,
-                    'k-vstack': adaptiveMode,
-                    'k-hstack': !adaptiveMode
-                }">
-            @if (clearButton) {
-              <button
-                kendoButton
-                class="k-clear-color"
-                fillMode="flat"
-                icon="droplet-slash"
-                [svgIcon]="dropletSlashIcon"
-                [size]="size"
-                (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]="!adaptiveMode"
-              [min]="0"
-              [max]="360"
-              [value]="hsva.value.h"
-              [smallStep]="5"
-              [largeStep]="10"
-              (valueChange)="handleHueSliderChange($event)"
-              >
-            </kendo-slider>
-            @if (opacity) {
-              <kendo-slider
-                #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]="!adaptiveMode"
-                [min]="0"
-                [max]="100"
-                [smallStep]="1"
-                [largeStep]="10"
-                [value]="alphaSliderValue"
-                (valueChange)="handleAlphaSliderChange($event)"
-                >
-              </kendo-slider>
-            }
-          </div>
-        </div>
-        <kendo-colorinput  #inputs
-          [tabindex]="innerTabIndex"
-          [opacity]="opacity"
-          [size]="size"
-          [formatView]="format"
-          [value]="value"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          (valueChange)="handleInputsValueChange($event)"
-          (tabOut)="gradientDragHandle.focus()"
-          >
-        </kendo-colorinput>
-        @if (contrastToolVisible) {
-          <div class="k-colorgradient-color-contrast k-vbox"
-            kendoContrastTool
-            [value]="value"
-            [ratio]="contrastTool">
-          </div>
-        }
-        `,
-                    standalone: true,
-                    imports: [LocalizedColorPickerMessagesDirective, DraggableDirective, ColorContrastSvgComponent, ButtonComponent, SliderComponent, NgClass, ColorInputComponent, ContrastComponent]
-                }]
-        }], ctorParameters: () => [{ 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']]
-            }], adaptiveMode: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], opacity: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
-            }], 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
-            }], ariaAttributesEnabled: [{
-                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']
-            }] } });