@ckeditor/ckeditor5-ui 38.1.1 → 38.2.0-alpha.1

package/src/colorgrid/colortileview.d.ts

@@ -1,28 +1,28 @@
-/**
- * @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 ui/colorgrid/colortileview
- */
-import ButtonView from '../button/buttonview';
-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;
-}
+/**
+ * @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 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/src/colorgrid/colortileview.js

@@ -1,40 +1,40 @@
-/**
- * @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 ui/colorgrid/colortileview
- */
-import ButtonView from '../button/buttonview';
-import checkIcon from '../../theme/icons/color-tile-check.svg';
-/**
- * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
- */
-export default class ColorTileView extends ButtonView {
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('color', undefined);
-        this.set('hasBorder', false);
-        this.icon = checkIcon;
-        this.extendTemplate({
-            attributes: {
-                style: {
-                    backgroundColor: bind.to('color')
-                },
-                class: [
-                    'ck',
-                    'ck-color-grid__tile',
-                    bind.if('hasBorder', 'ck-color-table__color-tile_bordered')
-                ]
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.iconView.fillColor = 'hsl(0, 0%, 100%)';
-    }
-}
+/**
+ * @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 ui/colorgrid/colortileview
+ */
+import ButtonView from '../button/buttonview.js';
+import checkIcon from '../../theme/icons/color-tile-check.svg';
+/**
+ * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
+ */
+export default class ColorTileView extends ButtonView {
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('color', undefined);
+        this.set('hasBorder', false);
+        this.icon = checkIcon;
+        this.extendTemplate({
+            attributes: {
+                style: {
+                    backgroundColor: bind.to('color')
+                },
+                class: [
+                    'ck',
+                    'ck-color-grid__tile',
+                    bind.if('hasBorder', 'ck-color-selector__color-tile_bordered')
+                ]
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.iconView.fillColor = 'hsl(0, 0%, 100%)';
+    }
+}

package/src/colorgrid/utils.d.ts

@@ -1,47 +1,47 @@
-/**
- * @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 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;
+/**
+ * @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 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/src/colorgrid/utils.js

@@ -1,84 +1,84 @@
-/**
- * @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
- */
-/**
- * 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 function getLocalizedColorOptions(locale, options) {
-    const t = locale.t;
-    const localizedColorNames = {
-        Black: t('Black'),
-        'Dim grey': t('Dim grey'),
-        Grey: t('Grey'),
-        'Light grey': t('Light grey'),
-        White: t('White'),
-        Red: t('Red'),
-        Orange: t('Orange'),
-        Yellow: t('Yellow'),
-        'Light green': t('Light green'),
-        Green: t('Green'),
-        Aquamarine: t('Aquamarine'),
-        Turquoise: t('Turquoise'),
-        'Light blue': t('Light blue'),
-        Blue: t('Blue'),
-        Purple: t('Purple')
-    };
-    return options.map(colorOption => {
-        const label = localizedColorNames[colorOption.label];
-        if (label && label != colorOption.label) {
-            colorOption.label = label;
-        }
-        return colorOption;
-    });
-}
-/**
- * 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 function normalizeColorOptions(options) {
-    return options
-        .map(normalizeSingleColorDefinition)
-        .filter(option => !!option);
-}
-/**
- * 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 function normalizeSingleColorDefinition(color) {
-    if (typeof color === 'string') {
-        return {
-            model: color,
-            label: color,
-            hasBorder: false,
-            view: {
-                name: 'span',
-                styles: {
-                    color
-                }
-            }
-        };
-    }
-    else {
-        return {
-            model: color.color,
-            label: color.label || color.color,
-            hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
-            view: {
-                name: 'span',
-                styles: {
-                    color: `${color.color}`
-                }
-            }
-        };
-    }
-}
+/**
+ * @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
+ */
+/**
+ * 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 function getLocalizedColorOptions(locale, options) {
+    const t = locale.t;
+    const localizedColorNames = {
+        Black: t('Black'),
+        'Dim grey': t('Dim grey'),
+        Grey: t('Grey'),
+        'Light grey': t('Light grey'),
+        White: t('White'),
+        Red: t('Red'),
+        Orange: t('Orange'),
+        Yellow: t('Yellow'),
+        'Light green': t('Light green'),
+        Green: t('Green'),
+        Aquamarine: t('Aquamarine'),
+        Turquoise: t('Turquoise'),
+        'Light blue': t('Light blue'),
+        Blue: t('Blue'),
+        Purple: t('Purple')
+    };
+    return options.map(colorOption => {
+        const label = localizedColorNames[colorOption.label];
+        if (label && label != colorOption.label) {
+            colorOption.label = label;
+        }
+        return colorOption;
+    });
+}
+/**
+ * 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 function normalizeColorOptions(options) {
+    return options
+        .map(normalizeSingleColorDefinition)
+        .filter(option => !!option);
+}
+/**
+ * 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 function normalizeSingleColorDefinition(color) {
+    if (typeof color === 'string') {
+        return {
+            model: color,
+            label: color,
+            hasBorder: false,
+            view: {
+                name: 'span',
+                styles: {
+                    color
+                }
+            }
+        };
+    }
+    else {
+        return {
+            model: color.color,
+            label: color.label || color.color,
+            hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
+            view: {
+                name: 'span',
+                styles: {
+                    color: `${color.color}`
+                }
+            }
+        };
+    }
+}

package/src/colorpicker/colorpickerview.d.ts

@@ -1,110 +1,137 @@
-/**
- * @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 ui/colorpicker/colorpickerview
- */
-import { type ColorPickerConfig } from './utils';
-import { type Locale } from '@ckeditor/ckeditor5-utils';
-import View from '../view';
-import type ViewCollection from '../viewcollection';
-import 'vanilla-colorful/hex-color-picker.js';
-import '../../theme/components/colorpicker/colorpicker.css';
-export default class ColorPickerView extends View {
-    /**
-     * Element with saturation and hue sliders.
-     */
-    picker: HTMLElement;
-    /**
-     * Container for a `#` sign prefix and an input for displaying and defining custom colors
-     * in HEX format.
-     */
-    hexInputRow: ColorPickerInputRowView;
-    /**
-     * Current color state in color picker.
-     */
-    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 event method. The `colorPickerEvent()` method is called the specified `waitingTime` after
-    * `debouncedPickerEvent()` is called, unless a new action happens in the meantime.
-    */
-    private _debounceColorPickerEvent;
-    /**
-     * The output format (the one in which colors are applied in the model) of color picker.
-     */
-    private _format;
-    /**
-     * Creates a view of color picker.
-     *
-     * @param locale
-     * @param config
-     */
-    constructor(locale: Locale | undefined, config: ColorPickerConfig);
-    /**
-     * 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 elemnt 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>);
-}
-export {};
+/**
+ * @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 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 'vanilla-colorful/hex-color-picker.js';
+import '../../theme/components/colorpicker/colorpicker.css';
+/**
+ * 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: HTMLElement;
+    /**
+     * 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 elemnt 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 {};