@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
233 lines (232 loc) • 7.04 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { OnInit, EventEmitter, SimpleChanges, OnChanges, OnDestroy, ChangeDetectorRef, Renderer2, ElementRef, AfterViewInit, NgZone } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { TileSize, OutputFormat, TableCell } from './models';
import { ColorPaletteService } from './services/color-palette.service';
import { InputSize } from '../common/models';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI ColorPalette component.
*
* The `ColorPaletteComponent` provides a set of predefined palette presets and lets you implement a custom color palette. You can use it directly or as part of the `kendo-colorpicker`.
*
* @example
* ```html
* <kendo-colorpalette [palette]="['#fff', '#000']" [(value)]="selectedColor"></kendo-colorpalette>
* ```
*
* @remarks
* Supported children components are: {@link ColorPickerMessages}.
*/
export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {
host: ElementRef;
private service;
private cdr;
private renderer;
private localizationService;
private ngZone;
/**
* @hidden
*/
direction: string;
/**
* @hidden
*/
role: string;
/**
* @hidden
*/
get activeDescendant(): string;
/**
* @hidden
*/
get paletteId(): string;
/**
* @hidden
*/
id: string;
/**
* Specifies the output format of the `ColorPaletteComponent`.
* The input value may be in a different format. The component parses it into the output `format`.
*
* @default 'hex'
*/
format: OutputFormat;
/**
* Sets the value of the selected color.
*/
set value(value: string);
get value(): string;
/**
* Sets the number of columns to display.
*
* @default 10
*/
set columns(value: number);
get columns(): number;
/**
* Sets the color palette to display. You can use a predefined palette preset (such as `office`, `basic`, or `apex`), string with comma-separated colors, or an array of string colors.
*/
set palette(value: string | Array<string>);
get palette(): string | Array<string>;
/**
* Sets the size of the ColorPalette internal elements.
*
* @default 'medium'
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*
* @default 0
*/
set tabindex(value: number);
get tabindex(): number;
/**
* Disables the ColorPalette. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
*/
disabled: boolean;
/**
* Sets the read-only state of the ColorPalette.
*
* @default false
*/
readonly: boolean;
/**
* Sets the size of a color cell. The default tile size depends on the `size` of the component.
*/
tileSize: number | TileSize;
/**
* @hidden
*/
get tileLayout(): TileSize;
/**
* Fires when the color selection changes.
*/
selectionChange: EventEmitter<string>;
/**
* Fires when the value changes.
*/
valueChange: EventEmitter<string>;
/**
* Fires each time the user selects a cell with the mouse or presses `Enter`.
*
* @hidden
*/
cellSelection: EventEmitter<string>;
/**
* @hidden
*/
get colorRows(): string[][];
/**
* @hidden
*/
get hostTabindex(): number;
/**
* @hidden
*/
hostClasses: boolean;
/**
* @hidden
*/
get disabledClass(): boolean;
/**
* @hidden
*/
get readonlyAttribute(): boolean;
/**
* @hidden
*/
activeCellId: string;
/**
* @hidden
*/
focusedCell: TableCell;
/**
* @hidden
*/
selectedCell: TableCell;
/**
* @hidden
*/
focusInComponent: boolean;
/**
* @hidden
*/
uniqueId: string;
private selection;
private _size;
private _value;
private _columns;
private _palette;
private _tabindex;
private subs;
private dynamicRTLSubscription;
constructor(host: ElementRef, service: ColorPaletteService, cdr: ChangeDetectorRef, renderer: Renderer2, localizationService: LocalizationService, ngZone: NgZone);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
/**
* @hidden
*/
handleKeydown(event: KeyboardEvent): void;
/**
* @hidden
*/
handleFocus(): void;
/**
* @hidden
*/
handleHostBlur(): void;
/**
* @hidden
*/
handleCellSelection(value: string, focusedCell?: TableCell): void;
/**
* @hidden
*/
writeValue(value: string): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
focus(): void;
/**
* @hidden
* Used by the FloatingLabel to determine if the component is empty.
*/
isEmpty(): boolean;
/**
* Clears the color value of the ColorPalette.
*/
reset(): void;
private handleValueChange;
private handleCellFocusOnBlur;
private selectCell;
private setRows;
private handleCellNavigation;
private setHostElementAriaLabel;
private handleEnter;
private handleClasses;
private notifyNgTouched;
private notifyNgChanged;
static ɵfac: i0.ɵɵFactoryDeclaration<ColorPaletteComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ColorPaletteComponent, "kendo-colorpalette", ["kendoColorPalette"], { "id": { "alias": "id"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tileSize": { "alias": "tileSize"; "required": false; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "cellSelection": "cellSelection"; }, never, never, true, never>;
}