@ckeditor/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.d.ts

Table feature for CKEditor 5.

/**
 * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
/**
 * @module table/tablecellproperties/ui/tablecellpropertiesview
 */
import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type FocusableView, type NormalizedColorOption, type ColorPickerConfig } from 'ckeditor5/src/ui.js';
import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils.js';
import type ColorInputView from '../../ui/colorinputview.js';
import type { TableCellPropertiesOptions } from '../../tableconfig.js';
import '../../../theme/form.css';
import '../../../theme/tableform.css';
import '../../../theme/tablecellproperties.css';
export interface TableCellPropertiesViewOptions {
    borderColors: Array<NormalizedColorOption>;
    backgroundColors: Array<NormalizedColorOption>;
    defaultTableCellProperties: TableCellPropertiesOptions;
    colorPickerConfig: false | ColorPickerConfig;
}
/**
 * The class representing a table cell properties form, allowing users to customize
 * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
 */
export default class TableCellPropertiesView extends View {
    /**
     * The value of the cell border style.
     *
     * @observable
     * @default ''
     */
    borderStyle: string;
    /**
     * The value of the cell border width style.
     *
     * @observable
     * @default ''
     */
    borderWidth: string;
    /**
     * The value of the cell border color style.
     *
     * @observable
     * @default ''
     */
    borderColor: string;
    /**
     * The value of the cell padding style.
     *
     * @observable
     * @default ''
     */
    padding: string;
    /**
     * The value of the cell background color style.
     *
     * @observable
     * @default ''
     */
    backgroundColor: string;
    /**
     * The value of the table cell width style.
     *
     * @observable
     * @default ''
     */
    width: string;
    /**
     * The value of the table cell height style.
     *
     * @observable
     * @default ''
     */
    height: string;
    /**
     * The value of the horizontal text alignment style.
     *
     * @observable
     * @default ''
     */
    horizontalAlignment: string;
    /**
     * The value of the vertical text alignment style.
     *
     * @observable
     * @default ''
     */
    verticalAlignment: string;
    /**
     * Options passed to the view. See {@link #constructor} to learn more.
     */
    readonly options: TableCellPropertiesViewOptions;
    /**
     * Tracks information about the DOM focus in the form.
     */
    readonly focusTracker: FocusTracker;
    /**
     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
     */
    readonly keystrokes: KeystrokeHandler;
    /**
     * A collection of child views in the form.
     */
    readonly children: ViewCollection;
    /**
     * A dropdown that allows selecting the style of the table cell border.
     */
    readonly borderStyleDropdown: LabeledFieldView<FocusableView>;
    /**
     * An input that allows specifying the width of the table cell border.
     */
    readonly borderWidthInput: LabeledFieldView<FocusableView>;
    /**
     * An input that allows specifying the color of the table cell border.
     */
    readonly borderColorInput: LabeledFieldView<ColorInputView>;
    /**
     * An input that allows specifying the table cell background color.
     */
    readonly backgroundInput: LabeledFieldView<ColorInputView>;
    /**
     * An input that allows specifying the table cell padding.
     */
    readonly paddingInput: LabeledFieldView;
    /**
     * An input that allows specifying the table cell width.
     */
    readonly widthInput: LabeledFieldView<FocusableView>;
    /**
     * An input that allows specifying the table cell height.
     */
    readonly heightInput: LabeledFieldView<FocusableView>;
    /**
     * A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
     */
    readonly horizontalAlignmentToolbar: ToolbarView;
    /**
     * A toolbar with buttons that allow changing the vertical text alignment in a table cell.
     */
    readonly verticalAlignmentToolbar: ToolbarView;
    /**
     * The "Save" button view.
     */
    saveButtonView: ButtonView;
    /**
     * The "Cancel" button view.
     */
    cancelButtonView: ButtonView;
    /**
     * A collection of views that can be focused in the form.
     */
    protected readonly _focusables: ViewCollection<FocusableView>;
    /**
     * Helps cycling over {@link #_focusables} in the form.
     */
    protected readonly _focusCycler: FocusCycler;
    /**
     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
     * @param options Additional configuration of the view.
     * @param options.borderColors A configuration of the border color palette used by the
     * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#borderColorInput}.
     * @param options.backgroundColors A configuration of the background color palette used by the
     * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
     * @param options.defaultTableCellProperties The default table cell properties.
     */
    constructor(locale: Locale, options: TableCellPropertiesViewOptions);
    /**
     * @inheritDoc
     */
    render(): void;
    /**
     * @inheritDoc
     */
    destroy(): void;
    /**
     * Focuses the fist focusable field in the form.
     */
    focus(): void;
    /**
     * Creates the following form fields:
     *
     * * {@link #borderStyleDropdown},
     * * {@link #borderWidthInput},
     * * {@link #borderColorInput}.
     */
    private _createBorderFields;
    /**
     * Creates the following form fields:
     *
     * * {@link #backgroundInput}.
     */
    private _createBackgroundFields;
    /**
     * Creates the following form fields:
     *
     * * {@link #widthInput}.
     * * {@link #heightInput}.
     */
    private _createDimensionFields;
    /**
     * Creates the following form fields:
     *
     * * {@link #paddingInput}.
     */
    private _createPaddingField;
    /**
     * Creates the following form fields:
     *
     * * {@link #horizontalAlignmentToolbar},
     * * {@link #verticalAlignmentToolbar}.
     */
    private _createAlignmentFields;
    /**
     * Creates the following form controls:
     *
     * * {@link #saveButtonView},
     * * {@link #cancelButtonView}.
     */
    private _createActionButtons;
    /**
     * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
     */
    private get _horizontalAlignmentLabels();
    /**
     * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
     */
    private get _verticalAlignmentLabels();
}