@ckeditor/ckeditor5-table/src/ui/colorinputview.d.ts

Table feature for CKEditor 5.

/**
 * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */
/**
 * @module table/ui/colorinputview
 */
import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView } from 'ckeditor5/src/ui';
import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
import '../../theme/colorinput.css';
export type ColorInputViewOptions = {
    colorDefinitions: Array<ColorDefinition>;
    columns: number;
    defaultColorValue?: string;
};
/**
 * The color input view class. It allows the user to type in a color (hex, rgb, etc.)
 * or choose it from the configurable color palette with a preview.
 *
 * @internal
 */
export default class ColorInputView extends View {
    /**
     * The value of the input.
     *
     * @observable
     * @default ''
     */
    value: string;
    /**
     * Controls whether the input view is in read-only mode.
     *
     * @observable
     * @default false
     */
    isReadOnly: boolean;
    /**
     * An observable flag set to `true` when the input is focused by the user.
     * `false` otherwise.
     *
     * @observable
     * @default false
     */
    readonly isFocused: boolean;
    /**
     * An observable flag set to `true` when the input contains no text.
     *
     * @observable
     * @default true
     */
    readonly isEmpty: boolean;
    /**
     * @observable
     */
    hasError: boolean;
    /**
     * A cached reference to the options passed to the constructor.
     */
    options: ColorInputViewOptions;
    /**
     * Tracks information about the DOM focus in the view.
     */
    readonly focusTracker: FocusTracker;
    /**
     * A collection of views that can be focused in the view.
     */
    protected readonly _focusables: ViewCollection;
    /**
     * An instance of the dropdown allowing to select a color from a grid.
     */
    dropdownView: DropdownView;
    /**
     * An instance of the input allowing the user to type a color value.
     */
    inputView: InputTextView;
    /**
     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
     */
    readonly keystrokes: KeystrokeHandler;
    /**
     * The flag that indicates whether the user is still typing.
     * If set to true, it means that the text input field ({@link #inputView}) still has the focus.
     * So, we should interrupt the user by replacing the input's value.
     */
    protected _stillTyping: boolean;
    /**
     * Helps cycling over focusable items in the view.
     */
    protected readonly _focusCycler: FocusCycler;
    /**
     * Creates an instance of the color input view.
     *
     * @param locale The locale instance.
     * @param options The input options.
     * @param options.colorDefinitions The colors to be displayed in the palette inside the input's dropdown.
     * @param options.columns The number of columns in which the colors will be displayed.
     * @param options.defaultColorValue If specified, the color input view will replace the "Remove color" button with
     * the "Restore default" button. Instead of clearing the input field, the default color value will be set.
     */
    constructor(locale: Locale, options: ColorInputViewOptions);
    /**
     * @inheritDoc
     */
    render(): void;
    /**
     * Focuses the input.
     */
    focus(): void;
    /**
     * @inheritDoc
     */
    destroy(): void;
    /**
     * Creates and configures the {@link #dropdownView}.
     */
    private _createDropdownView;
    /**
     * Creates and configures an instance of {@link module:ui/inputtext/inputtextview~InputTextView}.
     *
     * @returns A configured instance to be set as {@link #inputView}.
     */
    private _createInputTextView;
    /**
     * Creates and configures the button that clears the color.
     */
    private _createRemoveColorButton;
    /**
     * Creates and configures the color grid inside the {@link #dropdownView}.
     */
    private _createColorGrid;
    /**
     * Sets {@link #inputView}'s value property to the color value or color label,
     * if there is one and the user is not typing.
     *
     * Handles cases like:
     *
     * * Someone picks the color in the grid.
     * * The color is set from the plugin level.
     *
     * @param inputValue Color value to be set.
     */
    private _setInputValue;
}