@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
234 lines (233 loc) • 7.19 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";
/**
* The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
* The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
*/
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. However, it will be parsed into the output `format`
* after the component processes it.
*
* The supported values are:
* * (Default) `hex`
* * `rgba`
* * `name`
*/
format: OutputFormat;
/**
* Specifies the value of the initially selected color.
*/
set value(value: string);
get value(): string;
/**
* Specifies the number of columns that will be displayed.
* Defaults to `10`.
*/
set columns(value: number);
get columns(): number;
/**
* The color palette that will be displayed.
*
* The supported values are:
* * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
* * A string with comma-separated colors.
* * A string array.
*/
set palette(value: string | Array<string>);
get palette(): string | Array<string>;
/**
* The size property specifies the padding of the ColorPalette internal elements.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
set tabindex(value: number);
get tabindex(): number;
/**
* Sets the disabled state of the ColorPalette. To learn how to disable the component in reactive forms, refer to the article on [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;
/**
* Specifies 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 each time the color selection is changed.
*/
selectionChange: EventEmitter<string>;
/**
* Fires each time the value is changed.
*/
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: any): 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>;
}