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

package/dist/types/button/buttonview.d.ts

@@ -1,185 +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/button/buttonview
- */
-import View from '../view.js';
-import IconView from '../icon/iconview.js';
-import type ViewCollection from '../viewcollection.js';
-import type { default as Button } from './button.js';
-import type ButtonLabel from './buttonlabel.js';
-import { type Locale } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/button/button.css';
-/**
- * The button view class.
- *
- * ```ts
- * const view = new ButtonView();
- *
- * view.set( {
- * 	label: 'A button',
- * 	keystroke: 'Ctrl+B',
- * 	tooltip: true,
- * 	withText: true
- * } );
- *
- * view.render();
- *
- * document.body.append( view.element );
- * ```
- */
-export default class ButtonView extends View<HTMLButtonElement> implements Button {
-    /**
-     * Collection of the child views inside of the button {@link #element}.
-     */
-    readonly children: ViewCollection;
-    /**
-     * Label of the button view. Its text is configurable using the {@link #label label attribute}.
-     *
-     * If not configured otherwise in the `constructor()`, by default the label is an instance
-     * of {@link module:ui/button/buttonlabelview~ButtonLabelView}.
-     */
-    readonly labelView: ButtonLabel;
-    /**
-     * The icon view of the button. Will be added to {@link #children} when the
-     * {@link #icon icon attribute} is defined.
-     */
-    readonly iconView: IconView;
-    /**
-     * A view displaying the keystroke of the button next to the {@link #labelView label}.
-     * Added to {@link #children} when the {@link #withKeystroke `withKeystroke` attribute}
-     * is defined.
-     */
-    readonly keystrokeView: View;
-    /**
-     * @inheritDoc
-     */
-    class: string | undefined;
-    /**
-     * @inheritDoc
-     */
-    labelStyle: string | undefined;
-    /**
-     * @inheritDoc
-     */
-    icon: string | undefined;
-    /**
-     * @inheritDoc
-     */
-    isEnabled: boolean;
-    /**
-     * @inheritDoc
-     */
-    isOn: boolean;
-    /**
-     * @inheritDoc
-     */
-    isVisible: boolean;
-    /**
-     * @inheritDoc
-     */
-    isToggleable: boolean;
-    /**
-     * @inheritDoc
-     */
-    keystroke: string | undefined;
-    /**
-     * @inheritDoc
-     */
-    label: string | undefined;
-    /**
-     * @inheritDoc
-     */
-    tabindex: number;
-    /**
-     * @inheritDoc
-     */
-    tooltip: Button['tooltip'];
-    /**
-     * @inheritDoc
-     */
-    tooltipPosition: Button['tooltipPosition'];
-    /**
-     * @inheritDoc
-     */
-    type: Button['type'];
-    /**
-     * @inheritDoc
-     */
-    withText: boolean;
-    /**
-     * @inheritDoc
-     */
-    withKeystroke: boolean;
-    /**
-     * @inheritDoc
-     */
-    role: string | undefined;
-    /**
-     * @inheritDoc
-     */
-    ariaLabel?: string | undefined;
-    /**
-     * @inheritDoc
-     */
-    ariaLabelledBy: string | undefined;
-    /**
-     * Tooltip of the button bound to the template.
-     *
-     * @see #tooltip
-     * @see module:ui/button/buttonview~ButtonView#_getTooltipString
-     * @internal
-     * @observable
-     */
-    _tooltipString: string;
-    /**
-     * Delayed focus function for focus handling in Safari.
-     */
-    private _focusDelayed;
-    /**
-     * Creates an instance of the button view class.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param labelView The instance of the button's label. If not provided, an instance of
-     * {@link module:ui/button/buttonlabelview~ButtonLabelView} is used.
-     */
-    constructor(locale?: Locale, labelView?: ButtonLabel);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Focuses the {@link #element} of the button.
-     */
-    focus(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Binds the label view instance it with button attributes.
-     */
-    private _setupLabelView;
-    /**
-     * Creates a view that displays a keystroke next to a {@link #labelView label }
-     * and binds it with button attributes.
-     */
-    private _createKeystrokeView;
-    /**
-     * Gets the text for the tooltip from the combination of
-     * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
-     *
-     * @see #tooltip
-     * @see #_tooltipString
-     * @param tooltip Button tooltip.
-     * @param label Button label.
-     * @param keystroke Button keystroke.
-     */
-    private _getTooltipString;
-}

package/dist/types/button/switchbuttonview.d.ts

@@ -1,49 +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/button/switchbuttonview
- */
-import View from '../view.js';
-import ButtonView from './buttonview.js';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/button/switchbutton.css';
-/**
- * The switch button view class.
- *
- * ```ts
- * const view = new SwitchButtonView();
- *
- * view.set( {
- * 	withText: true,
- * 	label: 'Switch me!'
- * } );
- *
- * view.render();
- *
- * document.body.append( view.element );
- * ```
- */
-export default class SwitchButtonView extends ButtonView {
-    /**
-     * The toggle switch of the button.
-     */
-    readonly toggleSwitchView: View;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale?: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Creates a toggle child view.
-     */
-    private _createToggleView;
-}

package/dist/types/collapsible/collapsibleview.d.ts

@@ -1,74 +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/collapsible/collapsibleview
- */
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-import View from '../view.js';
-import ButtonView from '../button/buttonview.js';
-import type ViewCollection from '../viewcollection.js';
-import type { FocusableView } from '../focuscycler.js';
-import '../../theme/components/collapsible/collapsible.css';
-/**
- * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
- * by clicking the button. The collapsible container can be a host to other UI views.
- *
- * @internal
- */
-export default class CollapsibleView extends View {
-    /**
-     * `true` when the container with {@link #children} is collapsed. `false` otherwise.
-     *
-     * @observable
-     */
-    isCollapsed: boolean;
-    /**
-     * The text label of the {@link #buttonView}.
-     *
-     * @observable
-     * @default 'Show more'
-     */
-    label: string;
-    /**
-     * The ID of the label inside the {@link #buttonView} that describes the collapsible
-     * container for assistive technologies. Set after the button was {@link #render rendered}.
-     *
-     * @internal
-     * @readonly
-     * @observable
-     */
-    _collapsibleAriaLabelUid: string | undefined;
-    /**
-     * The main button that, when clicked, collapses or expands the container with {@link #children}.
-     */
-    readonly buttonView: ButtonView;
-    /**
-     * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
-     */
-    readonly children: ViewCollection<FocusableView>;
-    /**
-     * Creates an instance of the collapsible view.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param childViews An optional array of initial child views to be inserted into the collapsible.
-     */
-    constructor(locale: Locale, childViews?: Array<FocusableView>);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Focuses the first focusable.
-     */
-    focus(): void;
-    /**
-     * Creates the main {@link #buttonView} of the collapsible.
-     */
-    private _createButtonView;
-}

package/dist/types/colorgrid/colorgridview.d.ts

@@ -1,136 +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/colorgrid/colorgridview
- */
-import View from '../view.js';
-import ColorTileView from './colortileview.js';
-import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable.js';
-import type ViewCollection from '../viewcollection.js';
-import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/colorgrid/colorgrid.css';
-/**
- * A grid of {@link module:ui/colorgrid/colortileview~ColorTileView color tiles}.
- */
-export default class ColorGridView extends View implements DropdownPanelFocusable {
-    /**
-     * A number of columns for the tiles grid.
-     */
-    readonly columns: number;
-    /**
-     * Collection of the child tile views.
-     */
-    readonly items: ViewCollection<ColorTileView>;
-    /**
-     * Tracks information about DOM focus in the grid.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * The color of the currently selected color tile in {@link #items}.
-     *
-     * @observable
-     */
-    selectedColor: string | undefined | null;
-    /**
-     * Creates an instance of a color grid containing {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
-     *
-     * @fires execute
-     * @param locale The localization services instance.
-     * @param options Component configuration
-     * @param options.colorDefinitions Array with definitions
-     * required to create the {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
-     * @param options.columns A number of columns to display the tiles.
-     */
-    constructor(locale?: Locale, options?: {
-        colorDefinitions?: Array<ColorDefinition>;
-        columns?: number;
-    });
-    /**
-     * Focuses the first focusable in {@link #items}.
-     */
-    focus(): void;
-    /**
-     * Focuses the last focusable in {@link #items}.
-     */
-    focusLast(): void;
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-}
-/**
- * A color definition used to create a {@link module:ui/colorgrid/colortileview~ColorTileView}.
- *
- * ```json
- * {
- * 	color: 'hsl(0, 0%, 75%)',
- * 	label: 'Light Grey',
- * 	options: {
- * 		hasBorder: true
- * 	}
- * }
- * ```
- */
-export interface ColorDefinition {
-    /**
-     * String representing a color.
-     * It is used as value of background-color style in {@link module:ui/colorgrid/colortileview~ColorTileView}.
-     */
-    color: string;
-    /**
-     * String used as label for {@link module:ui/colorgrid/colortileview~ColorTileView}.
-     */
-    label: string;
-    /**
-     * Additional options passed to create a {@link module:ui/colorgrid/colortileview~ColorTileView}.
-     */
-    options: {
-        /**
-         * A flag that indicates if special a CSS class should be added
-         * to {@link module:ui/colorgrid/colortileview~ColorTileView}, which renders a border around it.
-         */
-        hasBorder: boolean;
-    };
-}
-/**
- * Fired when the `ColorTileView` for the picked item is executed.
- *
- * @eventName ~ColorGridView#execute
- * @param data Additional information about the event.
-*/
-export type ColorGridViewExecuteEvent = {
-    name: 'execute';
-    args: [data: ColorGridViewExecuteEventData];
-};
-/**
- * The data of {@link ~ColorGridViewExecuteEvent execute event}.
- */
-export interface ColorGridViewExecuteEventData {
-    /**
-     * The value of the selected color ({@link module:ui/colorgrid/colorgridview~ColorDefinition#color `color.color`}).
-     */
-    value: string;
-    /**
-     * The `hasBorder` property of the selected color
-     * ({@link module:ui/colorgrid/colorgridview~ColorDefinition#options `color.options.hasBorder`}).
-     */
-    hasBorder: boolean;
-    /**
-     * The label of the selected color ({@link module:ui/colorgrid/colorgridview~ColorDefinition#label `color.label`})
-     */
-    label: string;
-}

package/dist/types/colorgrid/colortileview.d.ts

@@ -1,32 +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/colorgrid/colortileview
- */
-import ButtonView from '../button/buttonview.js';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-/**
- * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
- */
-export default class ColorTileView extends ButtonView {
-    /**
-     * String representing a color shown as tile's background.
-     */
-    color: string | undefined;
-    /**
-     * A flag that toggles a special CSS class responsible for displaying
-     * a border around the button.
-     */
-    hasBorder: boolean;
-    constructor(locale?: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-}

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

@@ -1,51 +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/colorgrid/utils
- */
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-export type ColorOption = string | {
-    color: string;
-    label?: string;
-    hasBorder?: boolean;
-};
-export interface NormalizedColorOption {
-    model: string;
-    label: string;
-    hasBorder: boolean;
-    view: {
-        name: string;
-        styles: {
-            color: string;
-        };
-    };
-}
-/**
- * Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
- * `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
- * but processed to account for editor localization in the correct language.
- *
- * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
- * when the user configuration is defined because the editor does not exist yet.
- *
- * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
- */
-export declare function getLocalizedColorOptions(locale: Locale, options: Array<NormalizedColorOption>): Array<NormalizedColorOption>;
-/**
- * Creates a unified color definition object from color configuration options.
- * The object contains the information necessary to both render the UI and initialize the conversion.
- */
-export declare function normalizeColorOptions(options: Array<ColorOption>): Array<NormalizedColorOption>;
-/**
- * Creates a normalized color definition from the user-defined configuration.
- * The "normalization" means it will create full
- * {@link module:ui/colorgrid/colorgridview~ColorDefinition `ColorDefinition-like`}
- * object for string values, and add a `view` property, for each definition.
- */
-export declare function normalizeSingleColorDefinition(color: ColorOption): NormalizedColorOption;

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

@@ -1,146 +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/colorpicker/colorpickerview
- */
-import { type ColorPickerViewConfig } from './utils.js';
-import { type Locale } from '@ckeditor/ckeditor5-utils';
-import View from '../view.js';
-import type ViewCollection from '../viewcollection.js';
-import { HexBase } from 'vanilla-colorful/lib/entrypoints/hex';
-import '../../theme/components/colorpicker/colorpicker.css';
-declare global {
-    interface HTMLElementTagNameMap {
-        'hex-color-picker': HexBase;
-    }
-}
-/**
- * A class which represents a color picker with an input field for defining custom colors.
- */
-export default class ColorPickerView extends View {
-    /**
-     * Element with saturation and hue sliders.
-     */
-    picker: HexBase;
-    /**
-     * Container for a `#` sign prefix and an input for displaying and defining custom colors
-     * in HEX format.
-     */
-    hexInputRow: ColorPickerInputRowView;
-    /**
-     * Current color selected in the color picker. It can be set by the component itself
-     * (through the palette or input) or from the outside (e.g. to reflect the current selection color).
-     */
-    color: string;
-    /**
-     * List of slider views of the color picker.
-     */
-    slidersView: ViewCollection<SliderView>;
-    /**
-     * An internal representation of a color.
-     *
-     * Since the picker uses a hex format, that's how we store it.
-     *
-     * Since this is unified color format it won't fire a change event if color is changed
-     * from `#f00` to `#ff0000` (same value, different format).
-     *
-     * @observable
-     * @private
-     */
-    _hexColor: string;
-    /**
-     * Debounced function updating the `color` property in the component
-     * and firing the `ColorPickerColorSelectedEvent`. Executed whenever color in component
-     * is changed by the user interaction (through the palette or input).
-     *
-     * @private
-     */
-    private _debounceColorPickerEvent;
-    /**
-     * A reference to the configuration of the color picker specified in the constructor.
-     *
-     * @private
-     */
-    private _config;
-    /**
-     * Creates a view of color picker.
-     *
-     * @param locale
-     * @param config
-     */
-    constructor(locale: Locale | undefined, config?: ColorPickerViewConfig);
-    /**
-     * Renders color picker in the view.
-     */
-    render(): void;
-    /**
-     * Focuses the first pointer in color picker.
-     *
-     */
-    focus(): void;
-    /**
-     * Creates collection of sliders in color picker.
-     *
-     * @private
-     */
-    private _createSlidersView;
-    /**
-     * Creates input row for defining custom colors in color picker.
-     *
-     * @private
-     */
-    private _createInputRow;
-    /**
-     * Creates the input where user can type or paste the color in hex format.
-     *
-     * @private
-     */
-    private _createColorInput;
-}
-declare class SliderView extends View {
-    /**
-     * @param element HTML element of slider in color picker.
-     */
-    constructor(element: HTMLElement);
-    /**
-     * Focuses element.
-     */
-    focus(): void;
-}
-declare class ColorPickerInputRowView extends View {
-    /**
-     * A collection of row items (buttons, dropdowns, etc.).
-     */
-    readonly children: ViewCollection;
-    /**
-     * Creates an instance of the form row class.
-     *
-     * @param locale The locale instance.
-     */
-    constructor(locale: Locale, children?: Array<View>);
-}
-/**
- * An event fired whenever the color was selected through the color picker palette
- * or the color picker input.
- *
- * This even fires only when the user changes the color. It does not fire when the color
- * is changed programmatically, e.g. via
- * {@link module:ui/colorpicker/colorpickerview~ColorPickerView#color}.
- *
- * @eventName ~ColorPickerView#colorSelected
- */
-export type ColorPickerColorSelectedEvent = {
-    name: 'colorSelected';
-    args: [
-        {
-            color: string;
-        }
-    ];
-};
-export {};