@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
914 lines (913 loc) • 40.1 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 */
/* eslint-disable no-unused-expressions */
import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, isDevMode, NgZone, ChangeDetectorRef, Output, Renderer2, ViewChild, Injector, HostListener } from "@angular/core";
import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subscription } from 'rxjs';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { findFocusableChild, isChanged, KendoInput } from '@progress/kendo-angular-common';
import { validatePackage } from "@progress/kendo-licensing";
import { FlatColorPickerLocalizationService } from './localization/flatcolorpicker-localization.service';
import { FlatColorPickerService } from './services/flatcolorpicker.service';
import { packageMetadata } from "../package-metadata";
import { ColorPickerCancelEvent } from './events';
import { parseColor } from './utils';
import { getStylingClasses, isPresent } from '../common/utils';
import { ColorGradientComponent } from './color-gradient.component';
import { ColorPaletteComponent } from './color-palette.component';
import { FlatColorPickerHeaderComponent } from './flatcolorpicker-header.component';
import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions.component';
import { DRAGHANDLE_MOVE_SPEED, DRAGHANDLE_MOVE_SPEED_SMALL_STEP } from "./constants";
import { take } from "rxjs/operators";
import { NgIf, NgClass } from "@angular/common";
import { LocalizedColorPickerMessagesDirective } from "./localization/localized-colorpicker-messages.directive";
import * as i0 from "@angular/core";
import * as i1 from "./services/flatcolorpicker.service";
import * as i2 from "@progress/kendo-angular-l10n";
const DEFAULT_SIZE = 'medium';
/**
* Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
*
* The FlatColorPicker is a powerful tool which allows the user to choose colors through palettes with predefined sets of colors and
* through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
*/
export class FlatColorPickerComponent {
host;
service;
localizationService;
cdr;
renderer;
ngZone;
injector;
hostClasses = true;
get disabledClass() {
return this.disabled;
}
get ariaReadonly() {
return this.readonly;
}
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;
}
event.preventDefault();
this.internalNavigation = true;
this.ngZone.onStable.pipe(take(1)).subscribe(() => this.firstFocusable?.focus());
}
/**
* @hidden
*/
escapeHandler() {
this.internalNavigation = false;
this.host.nativeElement.focus();
}
/**
* @hidden
*/
focusHandler(ev) {
this.internalNavigation = ev.target !== this.host.nativeElement;
}
/**
* Sets the read-only state of the FlatColorPicker.
*
* @default false
*/
readonly = false;
/**
* Sets the disabled state of the FlatColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
*
* @default false
*/
disabled = false;
/**
* Specifies the output format of the FlatColorPicker.
*
* If the input value is in a different format, it will be parsed into the specified output `format`.
*
* The supported values are:
* * `rgba` (default)
* * `hex`
*/
format = 'rgba';
/**
* Specifies the initially selected color.
*/
set value(value) {
this._value = parseColor(value, this.format, this.gradientSettings.opacity);
}
get value() {
return this._value;
}
/**
* 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 whether the FlatColorPicker should display a 'Clear color' button.
*
* @default true
*/
clearButton = true;
/**
* Displays `Apply` and `Cancel` action buttons and a color preview pane.
*
* When enabled, the component value will not change immediately upon
* color selection, but only after the `Apply` button is clicked.
*
* The `Cancel` button reverts the current selection to its
* initial state i.e. to the current value.
*
* @default true
*/
preview = true;
/**
* Configures the layout of the `Apply` and `Cancel` action buttons.
* * `start`
* * `center`
* * `end` (default)
* * `stretch`
*/
actionsLayout = 'end';
/**
* Sets the initially active view in the FlatColorPicker. The property supports two-way binding.
* * `gradient` (default)
* * `palette`
*/
activeView;
/**
* Specifies the views that will be rendered. Default value is gradient and palette.
*/
views = ['gradient', 'palette'];
/**
* Configures the gradient view.
*/
set gradientSettings(value) {
Object.assign(this._gradientSettings, value);
}
get gradientSettings() {
return this._gradientSettings;
}
/**
* @hidden
*/
adaptiveMode = false;
/**
* Configures the palette view.
*/
set paletteSettings(value) {
Object.assign(this._paletteSettings, value);
}
get paletteSettings() {
return this._paletteSettings;
}
/**
* The size property specifies the padding of the FlatColorPicker 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;
}
/**
* Fires each time the component value is changed.
*/
valueChange = new EventEmitter();
/**
* Fires when the user cancels the current color selection.
*
* The event is emitted on preview pane or on 'Cancel' button click.
*/
cancel = new EventEmitter();
/**
* Fires each time the view is about to change.
* Used to provide a two-way binding for the `activeView` property.
*/
activeViewChange = new EventEmitter();
/**
* @hidden
* Fires each time the clear button is clicked.
*/
clearButtonClick = new EventEmitter();
/**
* @hidden
*/
actionButtonClick = new EventEmitter();
header;
headerElement;
gradient;
gradientElement;
palette;
footer;
/**
* @hidden
*/
selection;
focused;
_value;
_tabindex = 0;
_gradientSettings = {
opacity: true,
delay: 0,
gradientSliderStep: DRAGHANDLE_MOVE_SPEED,
gradientSliderSmallStep: DRAGHANDLE_MOVE_SPEED_SMALL_STEP
};
_paletteSettings = {};
dynamicRTLSubscription;
subscriptions = new Subscription();
internalNavigation = false;
_size = 'medium';
control;
/**
* @hidden
*/
get innerTabIndex() {
return this.internalNavigation ? 0 : -1;
}
/**
* @hidden
*/
get firstFocusable() {
if (this.headerHasContent) {
return this.headerElement.nativeElement.querySelector('.k-button');
}
return this.activeView === 'gradient' ? this.gradient : this.palette;
}
constructor(host, service, localizationService, cdr, renderer, ngZone, injector) {
this.host = host;
this.service = service;
this.localizationService = localizationService;
this.cdr = cdr;
this.renderer = renderer;
this.ngZone = ngZone;
this.injector = injector;
validatePackage(packageMetadata);
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
this.direction = rtl ? 'rtl' : 'ltr';
});
}
ngOnInit() {
this.selection = this.value;
this.control = this.injector.get(NgControl, null);
this._paletteSettings = this.service.getPaletteSettings(this._paletteSettings, this.format);
this.setActiveView();
}
ngAfterViewInit() {
const stylingInputs = ['size'];
stylingInputs.forEach(input => {
this.handleClasses(this[input], input);
});
this.setHostElementAriaLabel();
this.initDomEvents();
this.setSizingVariables();
this.ngZone.onStable.pipe(take(1)).subscribe(() => this.removeGradientAttributes());
}
ngOnChanges(changes) {
if (isChanged('value', changes)) {
this.selection = this.value;
this.setHostElementAriaLabel();
}
if (isChanged('paletteSettings', changes)) {
this.setSizingVariables();
}
}
ngOnDestroy() {
if (this.dynamicRTLSubscription) {
this.dynamicRTLSubscription.unsubscribe();
}
this.subscriptions.unsubscribe();
}
/**
* @hidden
*/
focusFirstHeaderButton() {
if (this.gradientElement.nativeElement === document.activeElement) {
if (this.headerHasContent && !this.preview) {
const firstHeaderButton = this.headerElement.nativeElement.querySelector('.k-button');
firstHeaderButton.focus();
}
}
}
/**
* @hidden
*/
lastFocusable(event) {
if (this.preview) {
this.footer.lastButton.nativeElement.focus();
return;
}
event.stopImmediatePropagation();
const gradient = this.gradientElement?.nativeElement;
const palette = this.palette?.host.nativeElement;
this.activeView === 'gradient' ? gradient.focus() : palette.focus();
}
/**
* @hidden
*/
onTab(ev) {
const { shiftKey } = ev;
const nextTabStop = this.preview ? this.footer.firstButton.nativeElement : this.headerHasContent ? findFocusableChild(this.headerElement.nativeElement) : null;
const previousTabStop = this.headerHasContent ? findFocusableChild(this.headerElement.nativeElement) : this.preview ? this.footer.lastButton.nativeElement : null;
if (!nextTabStop && !previousTabStop) {
return;
}
ev.preventDefault();
// eslint-disable-next-line no-unused-expressions
shiftKey ? previousTabStop?.focus() : nextTabStop?.focus();
}
/**
* @hidden
*/
get headerHasContent() {
return this.preview || this.views.length > 1 || this.clearButton;
}
/**
* @hidden
* Used by the FloatingLabel to determine if the component is empty.
*/
isEmpty() {
return false;
}
/**
* Focuses the wrapper of the FlatColorPicker.
*/
focus() {
if (this.disabled || this.focused) {
return;
}
this.host.nativeElement.focus();
this.focused = true;
}
/**
* Blurs the wrapper of the FlatColorPicker.
*/
blur() {
if (!this.focused) {
return;
}
this.notifyNgTouched();
this.host.nativeElement.blur();
this.focused = false;
}
/**
* Clears the value of the FlatColorPicker.
*/
reset() {
if (!isPresent(this.value)) {
return;
}
this.value = undefined;
this.notifyNgChanged(undefined);
this.setHostElementAriaLabel();
}
/**
* @hidden
*/
onViewChange(view) {
if (this.activeView === view) {
return;
}
this.activeView = view;
this.activeViewChange.emit(view);
this.ngZone.runOutsideAngular(() => {
setTimeout(() => {
this[this.activeView]?.focus();
});
});
if (this.activeView === 'gradient') {
this.removeGradientAttributes();
}
}
/**
* @hidden
*/
onClearButtonClick() {
this.resetInnerComponentValue();
this.clearButtonClick.emit();
}
/**
* @hidden
*/
handleValueChange(color) {
// eslint-disable-next-line no-unused-expressions
this.preview ? this.changeCurrentValue(color) : this.setFlatColorPickerValue(color);
}
/**
* @hidden
*/
onAction(ev) {
// eslint-disable-next-line no-unused-expressions
ev.target === 'apply' ? this.setFlatColorPickerValue(this.selection) : this.resetSelection(ev.originalEvent);
this.actionButtonClick.emit();
}
/**
* @hidden
*/
writeValue(value) {
this.value = value;
}
/**
* @hidden
*/
registerOnChange(fn) {
this.notifyNgChanged = fn;
}
/**
* @hidden
*/
registerOnTouched(fn) {
this.notifyNgTouched = fn;
}
/**
* @hidden
*/
setDisabledState(isDisabled) {
this.cdr.markForCheck();
this.disabled = isDisabled;
}
/**
* @hidden
*/
resetSelection(ev) {
const eventArgs = new ColorPickerCancelEvent(ev);
this.cancel.emit(eventArgs);
if (!eventArgs.isDefaultPrevented()) {
this.selection = this.value;
}
this.notifyNgTouched();
}
setHostElementAriaLabel() {
const parsed = parseColor(this.value, this.format, this.gradientSettings.opacity);
const ariaLabelValue = `${this.value ? parsed : this.localizationService.get('flatColorPickerNoColor')}`;
this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
}
setSizingVariables() {
const paletteTileSize = this.service.paletteTileLayout(this.paletteSettings.tileSize);
const element = this.host.nativeElement.querySelector('.k-coloreditor-views.k-vstack');
const cssProperties = [`--kendo-color-preview-columns: ${this.paletteSettings.columns};`];
if (paletteTileSize.width) {
cssProperties.push(`--kendo-color-preview-width: ${paletteTileSize.width}px;`);
}
if (paletteTileSize.height) {
cssProperties.push(`--kendo-color-preview-height: ${paletteTileSize.height}px;`);
}
this.renderer.setProperty(element, 'style', cssProperties.join(' '));
}
changeCurrentValue(color) {
this.selection = color;
this.notifyNgTouched();
}
resetInnerComponentValue() {
this.selection = null;
if (this.gradient) {
this.gradient.reset();
return;
}
this.palette.reset();
}
setFlatColorPickerValue(color) {
if (this.value === color) {
return;
}
this.value = color;
this.valueChange.emit(color);
this.notifyNgChanged(color);
this.setHostElementAriaLabel();
}
setActiveView() {
if (!isPresent(this.activeView)) {
this.activeView = this.views[0];
return;
}
if (isDevMode() && this.views.indexOf(this.activeView) === -1) {
throw new Error("Invalid configuration: The current activeView is not present in the views collection");
}
}
notifyNgChanged = () => { };
notifyNgTouched = () => { };
initDomEvents() {
if (!this.host) {
return;
}
const hostElement = this.host.nativeElement;
this.ngZone.runOutsideAngular(() => {
this.subscriptions.add(this.renderer.listen(hostElement, 'focus', () => {
this.focused = true;
}));
this.subscriptions.add(this.renderer.listen(hostElement, 'blur', () => {
this.focused = false;
this.notifyNgTouched();
}));
});
}
removeGradientAttributes() {
this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'role');
this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'aria-label');
}
handleClasses(value, input) {
const elem = this.host.nativeElement;
const classes = getStylingClasses('coloreditor', 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: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FlatColorPickerService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlatColorPickerComponent, isStandalone: true, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", adaptiveMode: "adaptiveMode", paletteSettings: "paletteSettings", size: "size" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [
{
multi: true,
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FlatColorPickerComponent)
},
{
provide: KendoInput,
useExisting: forwardRef(() => FlatColorPickerComponent)
},
FlatColorPickerService,
FlatColorPickerLocalizationService,
{
provide: LocalizationService,
useExisting: FlatColorPickerLocalizationService
},
{
provide: L10N_PREFIX,
useValue: 'kendo.flatcolorpicker'
}
], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerElement", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true }, { propertyName: "gradientElement", first: true, predicate: ["gradient"], descendants: true, read: ElementRef }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], exportAs: ["kendoFlatColorPicker"], usesOnChanges: true, ngImport: i0, template: `
<ng-container kendoFlatColorPickerLocalizedMessages
i18n-flatColorPickerNoColor="kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
flatColorPickerNoColor="Flatcolorpicker no color chosen"
i18n-colorGradientNoColor="kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
colorGradientNoColor="Colorgradient no color chosen"
i18n-colorPaletteNoColor="kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
colorPaletteNoColor="Colorpalette no color chosen"
i18n-colorGradientHandle="kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
colorGradientHandle="Choose color"
i18n-clearButton="kendo.flatcolorpicker.clearButton|The title for the clear button."
clearButton="Clear value"
i18n-hueSliderHandle="kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle."
hueSliderHandle="Set hue"
i18n-opacitySliderHandle="kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle."
opacitySliderHandle="Set opacity"
i18n-contrastRatio="kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool."
contrastRatio="Contrast ratio"
i18n-previewColor="kendo.flatcolorpicker.previewColor|The message for the color preview pane."
previewColor="Color preview"
i18n-revertSelection="kendo.flatcolorpicker.revertSelection|The message for the selected color pane."
revertSelection="Revert selection"
i18n-gradientView="kendo.flatcolorpicker.gradientView|The message for the gradient view button."
gradientView="Gradient view"
i18n-paletteView="kendo.flatcolorpicker.paletteView|The message for the palette view button."
paletteView="Palette view"
i18n-formatButton="kendo.flatcolorpicker.formatButton|The message for the input format toggle button."
formatButton="Change color format"
i18n-applyButton="kendo.flatcolorpicker.applyButton|The message for the Apply action button."
applyButton="Apply"
i18n-cancelButton="kendo.flatcolorpicker.cancelButton|The message for the Cancel action button."
cancelButton="Cancel"
i18n-redChannelLabel="kendo.flatcolorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
redChannelLabel="Red channel"
i18n-greenChannelLabel="kendo.flatcolorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
greenChannelLabel="Green channel"
i18n-blueChannelLabel="kendo.flatcolorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
blueChannelLabel="Blue channel"
i18n-alphaChannelLabel="kendo.flatcolorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
alphaChannelLabel="Alpha channel"
i18n-redInputPlaceholder="kendo.flatcolorpicker.redInputPlaceholder|The placeholder for the red color input."
redChannelLabel="R"
i18n-greenInputPlaceholder="kendo.flatcolorpicker.greenInputPlaceholder|The placeholder for the green color input."
greenInputPlaceholder="G"
i18n-blueInputPlaceholder="kendo.flatcolorpicker.blueInputPlaceholder|The placeholder for the blue color input."
blueInputPlaceholder="B"
i18n-hexInputPlaceholder="kendo.flatcolorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
hexInputPlaceholder="HEX">
</ng-container>
<div kendoFlatColorPickerHeader
[innerTabIndex]="innerTabIndex"
*ngIf="headerHasContent"
#header
[clearButton]="clearButton"
[activeView]="activeView"
[views]="views"
[size]="size"
[value]="value"
[selection]="selection"
[preview]="preview"
(clearButtonClick)="onClearButtonClick()"
(viewChange)="onViewChange($event)"
(valuePaneClick)="resetSelection($event)"
(tabOut)="lastFocusable($event)"></div>
<div class="k-coloreditor-views k-vstack">
<kendo-colorgradient #gradient
[tabindex]="innerTabIndex"
*ngIf="activeView === 'gradient'"
[value]="selection"
[size]="size"
[adaptiveMode]="adaptiveMode"
[format]="format"
[opacity]="gradientSettings.opacity"
[delay]="gradientSettings.delay"
[contrastTool]="gradientSettings.contrastTool"
[gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
[gradientSliderStep]="gradientSettings.gradientSliderStep"
[readonly]="readonly"
(keydown.tab)="focusFirstHeaderButton()"
(valueChange)="handleValueChange($event)"
></kendo-colorgradient>
<kendo-colorpalette #palette
[tabindex]="innerTabIndex"
*ngIf="activeView === 'palette'"
[palette]="paletteSettings.palette"
[size]="size"
[columns]="paletteSettings.columns"
[tileSize]="paletteSettings.tileSize"
[format]="format"
[value]="selection"
[readonly]="readonly"
(valueChange)="handleValueChange($event)"
></kendo-colorpalette>
</div>
<div *ngIf="preview && !adaptiveMode"
#footer
kendoFlatColorPickerActionButtons
[innerTabIndex]="innerTabIndex"
[size]="size"
[ngClass]="'k-justify-content-' + actionsLayout"
(actionButtonClick)="onAction($event)"
(tabOut)="firstFocusable.focus()">
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoFlatColorPicker',
selector: 'kendo-flatcolorpicker',
providers: [
{
multi: true,
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FlatColorPickerComponent)
},
{
provide: KendoInput,
useExisting: forwardRef(() => FlatColorPickerComponent)
},
FlatColorPickerService,
FlatColorPickerLocalizationService,
{
provide: LocalizationService,
useExisting: FlatColorPickerLocalizationService
},
{
provide: L10N_PREFIX,
useValue: 'kendo.flatcolorpicker'
}
],
template: `
<ng-container kendoFlatColorPickerLocalizedMessages
i18n-flatColorPickerNoColor="kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
flatColorPickerNoColor="Flatcolorpicker no color chosen"
i18n-colorGradientNoColor="kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
colorGradientNoColor="Colorgradient no color chosen"
i18n-colorPaletteNoColor="kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
colorPaletteNoColor="Colorpalette no color chosen"
i18n-colorGradientHandle="kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
colorGradientHandle="Choose color"
i18n-clearButton="kendo.flatcolorpicker.clearButton|The title for the clear button."
clearButton="Clear value"
i18n-hueSliderHandle="kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle."
hueSliderHandle="Set hue"
i18n-opacitySliderHandle="kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle."
opacitySliderHandle="Set opacity"
i18n-contrastRatio="kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool."
contrastRatio="Contrast ratio"
i18n-previewColor="kendo.flatcolorpicker.previewColor|The message for the color preview pane."
previewColor="Color preview"
i18n-revertSelection="kendo.flatcolorpicker.revertSelection|The message for the selected color pane."
revertSelection="Revert selection"
i18n-gradientView="kendo.flatcolorpicker.gradientView|The message for the gradient view button."
gradientView="Gradient view"
i18n-paletteView="kendo.flatcolorpicker.paletteView|The message for the palette view button."
paletteView="Palette view"
i18n-formatButton="kendo.flatcolorpicker.formatButton|The message for the input format toggle button."
formatButton="Change color format"
i18n-applyButton="kendo.flatcolorpicker.applyButton|The message for the Apply action button."
applyButton="Apply"
i18n-cancelButton="kendo.flatcolorpicker.cancelButton|The message for the Cancel action button."
cancelButton="Cancel"
i18n-redChannelLabel="kendo.flatcolorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
redChannelLabel="Red channel"
i18n-greenChannelLabel="kendo.flatcolorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
greenChannelLabel="Green channel"
i18n-blueChannelLabel="kendo.flatcolorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
blueChannelLabel="Blue channel"
i18n-alphaChannelLabel="kendo.flatcolorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
alphaChannelLabel="Alpha channel"
i18n-redInputPlaceholder="kendo.flatcolorpicker.redInputPlaceholder|The placeholder for the red color input."
redChannelLabel="R"
i18n-greenInputPlaceholder="kendo.flatcolorpicker.greenInputPlaceholder|The placeholder for the green color input."
greenInputPlaceholder="G"
i18n-blueInputPlaceholder="kendo.flatcolorpicker.blueInputPlaceholder|The placeholder for the blue color input."
blueInputPlaceholder="B"
i18n-hexInputPlaceholder="kendo.flatcolorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
hexInputPlaceholder="HEX">
</ng-container>
<div kendoFlatColorPickerHeader
[innerTabIndex]="innerTabIndex"
*ngIf="headerHasContent"
#header
[clearButton]="clearButton"
[activeView]="activeView"
[views]="views"
[size]="size"
[value]="value"
[selection]="selection"
[preview]="preview"
(clearButtonClick)="onClearButtonClick()"
(viewChange)="onViewChange($event)"
(valuePaneClick)="resetSelection($event)"
(tabOut)="lastFocusable($event)"></div>
<div class="k-coloreditor-views k-vstack">
<kendo-colorgradient #gradient
[tabindex]="innerTabIndex"
*ngIf="activeView === 'gradient'"
[value]="selection"
[size]="size"
[adaptiveMode]="adaptiveMode"
[format]="format"
[opacity]="gradientSettings.opacity"
[delay]="gradientSettings.delay"
[contrastTool]="gradientSettings.contrastTool"
[gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
[gradientSliderStep]="gradientSettings.gradientSliderStep"
[readonly]="readonly"
(keydown.tab)="focusFirstHeaderButton()"
(valueChange)="handleValueChange($event)"
></kendo-colorgradient>
<kendo-colorpalette #palette
[tabindex]="innerTabIndex"
*ngIf="activeView === 'palette'"
[palette]="paletteSettings.palette"
[size]="size"
[columns]="paletteSettings.columns"
[tileSize]="paletteSettings.tileSize"
[format]="format"
[value]="selection"
[readonly]="readonly"
(valueChange)="handleValueChange($event)"
></kendo-colorpalette>
</div>
<div *ngIf="preview && !adaptiveMode"
#footer
kendoFlatColorPickerActionButtons
[innerTabIndex]="innerTabIndex"
[size]="size"
[ngClass]="'k-justify-content-' + actionsLayout"
(actionButtonClick)="onAction($event)"
(tabOut)="firstFocusable.focus()">
</div>
`,
standalone: true,
imports: [LocalizedColorPickerMessagesDirective, NgIf, FlatColorPickerHeaderComponent, ColorGradientComponent, ColorPaletteComponent, FlatColorPickerActionButtonsComponent, NgClass]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FlatColorPickerService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class.k-flatcolorpicker']
}, {
type: HostBinding,
args: ['class.k-coloreditor']
}], disabledClass: [{
type: HostBinding,
args: ['class.k-disabled']
}, {
type: HostBinding,
args: ['attr.aria-disabled']
}], ariaReadonly: [{
type: HostBinding,
args: ['attr.aria-readonly']
}], 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']
}], focusHandler: [{
type: HostListener,
args: ['focusin', ['$event']]
}], readonly: [{
type: Input
}, {
type: HostBinding,
args: ['class.k-readonly']
}], disabled: [{
type: Input
}], format: [{
type: Input
}], value: [{
type: Input
}], tabindex: [{
type: Input
}], clearButton: [{
type: Input
}], preview: [{
type: Input
}], actionsLayout: [{
type: Input
}], activeView: [{
type: Input
}], views: [{
type: Input
}], gradientSettings: [{
type: Input
}], adaptiveMode: [{
type: Input
}], paletteSettings: [{
type: Input
}], size: [{
type: Input
}], valueChange: [{
type: Output
}], cancel: [{
type: Output
}], activeViewChange: [{
type: Output
}], clearButtonClick: [{
type: Output
}], actionButtonClick: [{
type: Output
}], header: [{
type: ViewChild,
args: ['header']
}], headerElement: [{
type: ViewChild,
args: ['header', { read: ElementRef }]
}], gradient: [{
type: ViewChild,
args: ['gradient']
}], gradientElement: [{
type: ViewChild,
args: ['gradient', { read: ElementRef }]
}], palette: [{
type: ViewChild,
args: ['palette']
}], footer: [{
type: ViewChild,
args: ['footer']
}] } });