@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
1,086 lines (1,085 loc) • 47.3 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { NgIf, 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';
/**
* 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 {
host;
ngZone;
renderer;
cdr;
localizationService;
injector;
hostClasses = true;
get readonlyAttribute() {
return this.readonly;
}
get disabledClass() {
return this.disabled;
}
get gradientId() {
return this.id;
}
direction;
get hostTabindex() {
return this.tabindex?.toString() || '0';
}
ariaRole = 'textbox';
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;
}
/**
* @hidden
*/
adaptiveMode = false;
/**
* @hidden
*/
id = `k-colorgradient-${serial++}`;
/**
* Defines whether the alpha slider will be displayed.
*
* @default true
*/
opacity = true;
/**
* The size property specifies the padding of the ColorGradient internal elements.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size) {
const newSize = size || DEFAULT_SIZE;
this.handleClasses(newSize, 'size');
this._size = newSize;
}
get size() {
return this._size;
}
/**
* Sets the disabled state of the ColorGradient. To learn how to disable the component in reactive forms, refer to the article on [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;
/**
* Specifies whether the ColorGradient should display a 'Clear color' button.
*
* @default false
*/
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
*/
delay = 0;
/**
* 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;
}
/**
* Specifies the output format of the ColorGradientComponent.
* The input value may be in a different format, but it will be parsed into the output `format`
* after the component processes it.
*
* The supported values are:
* * (Default) `rgba`
* * `hex`
*/
format = DEFAULT_OUTPUT_FORMAT;
/**
* Fires each time 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({});
/**
* 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;
}
/**
* Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
*
* @default 5
*/
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
*/
gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
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();
}
}
/**
* @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() {
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: "16.2.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 });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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" }, 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>
<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 [ngClass]="{
'k-hsv-controls': true,
'k-sliders-wrap-clearable': clearButton,
'k-vstack': adaptiveMode,
'k-hstack': !adaptiveMode
}">
<button
kendoButton
*ngIf="clearButton"
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>
<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]="!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>
<div class="k-colorgradient-color-contrast k-vbox"
*ngIf="contrastToolVisible"
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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "16.2.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 [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>
<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 [ngClass]="{
'k-hsv-controls': true,
'k-sliders-wrap-clearable': clearButton,
'k-vstack': adaptiveMode,
'k-hstack': !adaptiveMode
}">
<button
kendoButton
*ngIf="clearButton"
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>
<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]="!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>
<div class="k-colorgradient-color-contrast k-vbox"
*ngIf="contrastToolVisible"
kendoContrastTool
[value]="value"
[ratio]="contrastTool">
</div>
`,
standalone: true,
imports: [LocalizedColorPickerMessagesDirective, DraggableDirective, NgIf, ColorContrastSvgComponent, ButtonComponent, SliderComponent, NgClass, ColorInputComponent, ContrastComponent]
}]
}], 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']]
}], 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
}], 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']
}] } });