@ckeditor/ckeditor5-ui 41.3.0-alpha.4 → 41.3.0

package/dist/types/colorpicker/utils.d.ts

@@ -1,52 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * Color formats handled by color converter.
- */
-export type ColorPickerOutputFormat = 'hex' | 'rgb' | 'hsl' | 'hwb' | 'lab' | 'lch';
-/**
- * Configuration of the color picker feature.
- *
- * It can be forced to apply colors in the editor in a particular format.
- *
- * @default `{
- * 	format: 'hsl'
- * }`
- */
-export type ColorPickerConfig = {
-    format?: ColorPickerOutputFormat;
-};
-/**
- * Configuration of the color picker view.
- *
- * It can be used to enforce a particular color format or hide the color input.
- */
-export type ColorPickerViewConfig = ColorPickerConfig & {
-    hideInput?: boolean;
-};
-/**
- * Parses and converts the color string to requested format. Handles variety of color spaces
- * like `hsl`, `hex` or `rgb`.
- *
- * @param color
- * @returns A color string.
- */
-export declare function convertColor(color: string, outputFormat: ColorPickerOutputFormat): string;
-/**
- * Converts a color string to hex format.
- *
- * @param color
- * @returns A color string.
- */
-export declare function convertToHex(color: string): string;
-/**
- * Registers the custom element in the
- * [CustomElementsRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry).
- */
-export declare function registerCustomElement(elementName: string, constructor: CustomElementConstructor): void;

package/dist/types/colorselector/colorgridsfragmentview.d.ts

@@ -1,199 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module ui/colorselector/colorgridsfragmentview
- */
-import View from '../view.js';
-import ButtonView from '../button/buttonview.js';
-import ColorGridView, { type ColorDefinition } from '../colorgrid/colorgridview.js';
-import DocumentColorCollection from './documentcolorcollection.js';
-import type { Model } from '@ckeditor/ckeditor5-engine';
-import type { FocusTracker, Locale } from '@ckeditor/ckeditor5-utils';
-import type ViewCollection from '../viewcollection.js';
-import type { FocusableView } from '../focuscycler.js';
-/**
- * One of the fragments of {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
- *
- * It provides a UI that allows users to select colors from the a predefined set and from existing document colors.
- *
- * It consists of the following sub–components:
- *
- * * A "Remove color" button,
- * * A static {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors defined in the configuration,
- * * A dynamic {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors used in the document.
- * * If color picker is configured, the "Color Picker" button is visible too.
- */
-export default class ColorGridsFragmentView extends View {
-    /**
-     * A collection of the children of the table.
-     */
-    readonly items: ViewCollection;
-    /**
-     * An array with objects representing colors to be displayed in the grid.
-     */
-    colorDefinitions: Array<ColorDefinition>;
-    /**
-     * Tracks information about the DOM focus in the list.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * The number of columns in the color grid.
-     */
-    columns: number;
-    /**
-     * Preserves the reference to {@link module:ui/colorselector/documentcolorcollection~DocumentColorCollection} used to collect
-     * definitions that store the document colors.
-     *
-     * @readonly
-     */
-    documentColors: DocumentColorCollection;
-    /**
-     * The maximum number of colors in the document colors section.
-     * If it equals 0, the document colors section is not added.
-     *
-     * @readonly
-     */
-    documentColorsCount?: number;
-    /**
-     * Keeps the value of the command associated with the table for the current selection.
-     */
-    selectedColor: string;
-    /**
-     * Preserves the reference to {@link module:ui/colorgrid/colorgridview~ColorGridView} used to create
-     * the default (static) color set.
-     *
-     * The property is loaded once the the parent dropdown is opened the first time.
-     *
-     * @readonly
-     */
-    staticColorsGrid: ColorGridView | undefined;
-    /**
-     * Preserves the reference to {@link module:ui/colorgrid/colorgridview~ColorGridView} used to create
-     * the document colors. It remains undefined if the document colors feature is disabled.
-     *
-     * The property is loaded once the the parent dropdown is opened the first time.
-     *
-     * @readonly
-     */
-    documentColorsGrid: ColorGridView | undefined;
-    /**
-     * The "Color picker" button view.
-     */
-    colorPickerButtonView?: ButtonView;
-    /**
-     * The "Remove color" button view.
-     */
-    removeColorButtonView: ButtonView;
-    /**
-     * The property which is responsible for is component visible or not.
-     */
-    isVisible: boolean;
-    /**
-     * A collection of views that can be focused in the view.
-     *
-     * @readonly
-     */
-    protected _focusables: ViewCollection<FocusableView>;
-    /**
-     * Document color section's label.
-     *
-     * @readonly
-     */
-    private _documentColorsLabel?;
-    /**
-     * The label of the button responsible for removing color attributes.
-     */
-    private _removeButtonLabel;
-    /**
-     * The label of the button responsible for switching to the color picker component.
-     */
-    private _colorPickerLabel;
-    /**
-     * Creates an instance of the view.
-     *
-     * @param locale The localization services instance.
-     * @param colors An array with definitions of colors to be displayed in the table.
-     * @param columns The number of columns in the color grid.
-     * @param removeButtonLabel The label of the button responsible for removing the color.
-     * @param colorPickerLabel The label of the button responsible for color picker appearing.
-     * @param documentColorsLabel The label for the section with the document colors.
-     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
-     * @param focusTracker Tracks information about the DOM focus in the list.
-     * @param focusables A collection of views that can be focused in the view.
-     */
-    constructor(locale: Locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, focusTracker, focusables }: {
-        colors: Array<ColorDefinition>;
-        columns: number;
-        removeButtonLabel: string;
-        colorPickerLabel: string;
-        documentColorsLabel?: string;
-        documentColorsCount?: number;
-        focusTracker: FocusTracker;
-        focusables: ViewCollection<FocusableView>;
-    });
-    /**
-     * Scans through the editor model and searches for text node attributes with the given attribute name.
-     * Found entries are set as document colors.
-     *
-     * All the previously stored document colors will be lost in the process.
-     *
-     * @param model The model used as a source to obtain the document colors.
-     * @param attributeName Determines the name of the related model's attribute for a given dropdown.
-     */
-    updateDocumentColors(model: Model, attributeName: string): void;
-    /**
-     * Refreshes the state of the selected color in one or both {@link module:ui/colorgrid/colorgridview~ColorGridView}s
-     * available in the {@link module:ui/colorselector/colorselectorview~ColorSelectorView}. It guarantees that the selection will
-     * occur only in one of them.
-     */
-    updateSelectedColors(): void;
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Focuses the component.
-     */
-    focus(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Handles displaying the color picker button (if it was previously created) and making it focusable.
-     */
-    addColorPickerButton(): void;
-    /**
-     * Adds color selector elements to focus tracker.
-     */
-    private _addColorSelectorElementsToFocusTracker;
-    /**
-     * Creates the button responsible for displaying the color picker component.
-     */
-    private _createColorPickerButton;
-    /**
-     * Adds the remove color button as a child of the current view.
-     */
-    private _createRemoveColorButton;
-    /**
-     * Creates a static color grid based on the editor configuration.
-     */
-    private _createStaticColorsGrid;
-    /**
-     * Creates the document colors section view and binds it to {@link #documentColors}.
-     */
-    private _createDocumentColorsGrid;
-    /**
-     * Adds a given color to the document colors list. If possible, the method will attempt to use
-     * data from the {@link #colorDefinitions} (label, color options).
-     *
-     * @param color A string that stores the value of the recently applied color.
-     */
-    private _addColorToDocumentColors;
-}

package/dist/types/colorselector/colorpickerfragmentview.d.ts

@@ -1,133 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module ui/colorselector/colorpickerfragmentview
- */
-import View from '../view.js';
-import ButtonView from '../button/buttonview.js';
-import type ViewCollection from '../viewcollection.js';
-import type { FocusableView } from '../focuscycler.js';
-import { default as ColorPickerView } from '../colorpicker/colorpickerview.js';
-import type { FocusTracker, KeystrokeHandler, Locale } from '@ckeditor/ckeditor5-utils';
-import type { ColorPickerViewConfig } from '../colorpicker/utils.js';
-/**
- * One of the fragments of {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
- *
- * It allows users to select a color from a color picker.
- *
- * It consists of the following sub–components:
- *
- * * A color picker saturation and hue sliders,
- * * A text input accepting colors in HEX format,
- * * "Save" and "Cancel" action buttons.
- */
-export default class ColorPickerFragmentView extends View {
-    /**
-     * A collection of component's children.
-     */
-    readonly items: ViewCollection;
-    /**
-     * A view with saturation and hue sliders and color input.
-     */
-    colorPickerView?: ColorPickerView;
-    /**
-     * The "Save" button view.
-     */
-    saveButtonView: ButtonView;
-    /**
-     * The "Cancel" button view.
-     */
-    cancelButtonView: ButtonView;
-    /**
-     * The action bar where are "Save" button and "Cancel" button.
-     */
-    actionBarView: View;
-    /**
-     * Tracks information about the DOM focus in the list.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * Indicates whether the component is visible or not.
-     */
-    isVisible: boolean;
-    /**
-     * Keeps the value of the command associated with the component for the current selection.
-     */
-    selectedColor?: string;
-    /**
-     * A collection of views that can be focused in the view.
-     *
-     * @readonly
-     */
-    protected _focusables: ViewCollection<FocusableView>;
-    /**
-     * A reference to the configuration of {@link #colorPickerView}. `false` when the view was
-     * configured without a color picker.
-     *
-     * @readonly
-     */
-    private _colorPickerViewConfig;
-    /**
-     * Creates an instance of the view.
-     *
-     * @param locale The localization services instance.
-     * @param focusTracker Tracks information about the DOM focus in the list.
-     * @param focusables A collection of views that can be focused in the view..
-     * @param keystrokes An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker
-     * will not be rendered.
-     */
-    constructor(locale: Locale, { focusTracker, focusables, keystrokes, colorPickerViewConfig }: {
-        focusTracker: FocusTracker;
-        focusables: ViewCollection<FocusableView>;
-        keystrokes: KeystrokeHandler;
-        colorPickerViewConfig: ColorPickerViewConfig | false;
-    });
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Focuses the color picker.
-     */
-    focus(): void;
-    /**
-     * When color picker is focused and "enter" is pressed it executes command.
-     */
-    private _executeOnEnterPress;
-    /**
-     * Removes default behavior of arrow keys in dropdown.
-     */
-    private _stopPropagationOnArrowsKeys;
-    /**
-     * Adds color picker elements to focus tracker.
-     */
-    private _addColorPickersElementsToFocusTracker;
-    /**
-     * Creates bar containing "Save" and "Cancel" buttons.
-     */
-    private _createActionBarView;
-    /**
-     * Creates "Save" and "Cancel" buttons.
-     */
-    private _createActionButtons;
-    /**
-     * Fires the `execute` event if color in color picker has been changed
-     * by the user.
-     */
-    private _executeUponColorChange;
-}

package/dist/types/colorselector/colorselectorview.d.ts

@@ -1,246 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module ui/colorselector/colorselectorview
- */
-import FocusCycler, { type FocusableView } from '../focuscycler.js';
-import View from '../view.js';
-import ViewCollection from '../viewcollection.js';
-import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
-import type { ColorPickerViewConfig } from '../colorpicker/utils.js';
-import type { ColorDefinition } from '../colorgrid/colorgridview.js';
-import type { Model } from '@ckeditor/ckeditor5-engine';
-import ColorGridsFragmentView from './colorgridsfragmentview.js';
-import ColorPickerFragmentView from './colorpickerfragmentview.js';
-import '../../theme/components/colorselector/colorselector.css';
-/**
- * The configurable color selector view class. It allows users to select colors from a predefined set of colors as well as from
- * a color picker.
- *
- * This meta-view is is made of two components (fragments):
- *
- * * {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorGridsFragmentView},
- * * {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorPickerFragmentView}.
- *
- * ```ts
- * const colorDefinitions = [
- * 	{ color: '#000', label: 'Black', options: { hasBorder: false } },
- * 	{ color: 'rgb(255, 255, 255)', label: 'White', options: { hasBorder: true } },
- * 	{ color: 'red', label: 'Red', options: { hasBorder: false } }
- * ];
- *
- * const selectorView = new ColorSelectorView( locale, {
- * 	colors: colorDefinitions,
- * 	columns: 5,
- * 	removeButtonLabel: 'Remove color',
- * 	documentColorsLabel: 'Document colors',
- * 	documentColorsCount: 4,
- * 	colorPickerViewConfig: {
- * 		format: 'hsl'
- * 	}
- * } );
- *
- * selectorView.appendUI();
- * selectorView.selectedColor = 'red';
- * selectorView.updateSelectedColors();
- *
- * selectorView.on<ColorSelectorExecuteEvent>( 'execute', ( evt, data ) => {
- * 	console.log( 'Color changed', data.value, data.source );
- * } );
- *
- * selectorView.on<ColorSelectorColorPickerShowEvent>( 'colorPicker:show', ( evt ) => {
- * 	console.log( 'Color picker showed up', evt );
- * } );
- *
- * selectorView.on<ColorSelectorColorPickerCancelEvent>( 'colorPicker:cancel', ( evt ) => {
- * 	console.log( 'Color picker cancel', evt );
- * } );
- *
- * selectorView.render();
- *
- * document.body.appendChild( selectorView.element );
- * ```
- */
-export default class ColorSelectorView extends View {
-    /**
-     * Tracks information about the DOM focus in the list.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * A collection of components.
-     */
-    readonly items: ViewCollection;
-    /**
-     * A fragment that allows users to select colors from the a predefined set and from existing document colors.
-     */
-    readonly colorGridsFragmentView: ColorGridsFragmentView;
-    /**
-     * A fragment that allows users to select a color from a color picker.
-     */
-    readonly colorPickerFragmentView: ColorPickerFragmentView;
-    /**
-     * Keeps the value of the command associated with the component for the current selection.
-     */
-    selectedColor?: string;
-    /**
-     * Reflects the visibility state of the color grids fragment.
-     *
-     * @internal
-     */
-    _isColorGridsFragmentVisible: boolean;
-    /**
-     * Reflects the visibility state of the color picker fragment.
-     *
-     * @internal
-     */
-    _isColorPickerFragmentVisible: boolean;
-    /**
-     * Helps cycling over focusable {@link #items} in the list.
-     *
-     * @readonly
-     */
-    protected _focusCycler: FocusCycler;
-    /**
-     * A collection of views that can be focused in the view.
-     *
-     * @readonly
-     */
-    protected _focusables: ViewCollection<FocusableView>;
-    /**
-     * The configuration of color picker sub-component.
-     */
-    private _colorPickerViewConfig;
-    /**
-     * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.
-     *
-     * @param locale The localization services instance.
-     * @param colors An array with definitions of colors to be displayed in the table.
-     * @param columns The number of columns in the color grid.
-     * @param removeButtonLabel The label of the button responsible for removing the color.
-     * @param colorPickerLabel The label of the button responsible for color picker appearing.
-     * @param documentColorsLabel The label for the section with the document colors.
-     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
-     * @param colorPickerViewConfig The configuration of color picker feature. If set to `false`, the color picker will be hidden.
-     */
-    constructor(locale: Locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, colorPickerViewConfig }: {
-        colors: Array<ColorDefinition>;
-        columns: number;
-        removeButtonLabel: string;
-        documentColorsLabel?: string;
-        documentColorsCount?: number;
-        colorPickerLabel: string;
-        colorPickerViewConfig: ColorPickerViewConfig | false;
-    });
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Renders the internals of the component on demand:
-     * * {@link #colorPickerFragmentView},
-     * * {@link #colorGridsFragmentView}.
-     *
-     * It allows for deferring component initialization to improve the performance.
-     *
-     * See {@link #showColorPickerFragment}, {@link #showColorGridsFragment}.
-     */
-    appendUI(): void;
-    /**
-     * Shows the {@link #colorPickerFragmentView} and hides the {@link #colorGridsFragmentView}.
-     *
-     * **Note**: It requires {@link #appendUI} to be called first.
-     *
-     * See {@link #showColorGridsFragment}, {@link ~ColorSelectorView#event:colorPicker:show}.
-     */
-    showColorPickerFragment(): void;
-    /**
-     * Shows the {@link #colorGridsFragmentView} and hides the {@link #colorPickerFragmentView}.
-     *
-     * See {@link #showColorPickerFragment}.
-     *
-     * **Note**: It requires {@link #appendUI} to be called first.
-     */
-    showColorGridsFragment(): void;
-    /**
-     * Focuses the first focusable element in {@link #items}.
-     */
-    focus(): void;
-    /**
-     * Focuses the last focusable element in {@link #items}.
-     */
-    focusLast(): void;
-    /**
-     * Scans through the editor model and searches for text node attributes with the given `attributeName`.
-     * Found entries are set as document colors in {@link #colorGridsFragmentView}.
-     *
-     * All the previously stored document colors will be lost in the process.
-     *
-     * @param model The model used as a source to obtain the document colors.
-     * @param attributeName Determines the name of the related model's attribute for a given dropdown.
-     */
-    updateDocumentColors(model: Model, attributeName: string): void;
-    /**
-     * Refreshes the state of the selected color in one or both grids located in {@link #colorGridsFragmentView}.
-     *
-     * It guarantees that the selection will occur only in one of them.
-     */
-    updateSelectedColors(): void;
-    /**
-     * Appends the view containing static and document color grid views.
-     */
-    private _appendColorGridsFragment;
-    /**
-     * Appends the view with the color picker.
-     */
-    private _appendColorPickerFragment;
-}
-/**
- * Fired whenever the color was changed. There are multiple sources of this event and you can distinguish them
- * using the `source` property passed along this event.
- *
- * @eventName ~ColorSelectorView#execute
- */
-export type ColorSelectorExecuteEvent = {
-    name: 'execute';
-    args: [
-        {
-            value: string;
-            source: 'staticColorsGrid' | 'documentColorsGrid' | 'removeColorButton' | 'colorPicker' | 'colorPickerSaveButton';
-        }
-    ];
-};
-/**
- * Fired when the user pressed the "Cancel" button in the
- * {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorPickerFragmentView}.
- *
- * @eventName ~ColorSelectorView#colorPicker:cancel
- */
-export type ColorSelectorColorPickerCancelEvent = {
-    name: 'colorPicker:cancel';
-    args: [];
-};
-/**
- * Fired whenever {@link module:ui/colorselector/colorselectorview~ColorSelectorView#colorPickerFragmentView} is shown.
- *
- * See {@link ~ColorSelectorView#showColorPickerFragment}.
- *
- * @eventName ~ColorSelectorView#colorPicker:show
- */
-export type ColorSelectorColorPickerShowEvent = {
-    name: 'colorPicker:show';
-    args: [];
-};