@ckeditor/ckeditor5-ui 40.0.0 → 40.2.0

package/src/colorgrid/colorgridview.js

@@ -1,124 +1,124 @@
-/**
- * @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/colorgridview
- */
-import View from '../view';
-import ColorTileView from './colortileview';
-import addKeyboardHandlingForGrid from '../bindings/addkeyboardhandlingforgrid';
-import { FocusTracker, KeystrokeHandler } 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 {
-    /**
-     * 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, options) {
-        super(locale);
-        const colorDefinitions = options && options.colorDefinitions ? options.colorDefinitions : [];
-        this.columns = options && options.columns ? options.columns : 5;
-        const viewStyleAttribute = {
-            gridTemplateColumns: `repeat( ${this.columns}, 1fr)`
-        };
-        this.set('selectedColor', undefined);
-        this.items = this.createCollection();
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.items.on('add', (evt, colorTile) => {
-            colorTile.isOn = colorTile.color === this.selectedColor;
-        });
-        colorDefinitions.forEach(color => {
-            const colorTile = new ColorTileView();
-            colorTile.set({
-                color: color.color,
-                label: color.label,
-                tooltip: true,
-                hasBorder: color.options.hasBorder
-            });
-            colorTile.on('execute', () => {
-                this.fire('execute', {
-                    value: color.color,
-                    hasBorder: color.options.hasBorder,
-                    label: color.label
-                });
-            });
-            this.items.add(colorTile);
-        });
-        this.setTemplate({
-            tag: 'div',
-            children: this.items,
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-color-grid'
-                ],
-                style: viewStyleAttribute
-            }
-        });
-        this.on('change:selectedColor', (evt, name, selectedColor) => {
-            for (const item of this.items) {
-                item.isOn = item.color === selectedColor;
-            }
-        });
-    }
-    /**
-     * Focuses the first focusable in {@link #items}.
-     */
-    focus() {
-        if (this.items.length) {
-            this.items.first.focus();
-        }
-    }
-    /**
-     * Focuses the last focusable in {@link #items}.
-     */
-    focusLast() {
-        if (this.items.length) {
-            this.items.last.focus();
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        // Items added before rendering should be known to the #focusTracker.
-        for (const item of this.items) {
-            this.focusTracker.add(item.element);
-        }
-        this.items.on('add', (evt, item) => {
-            this.focusTracker.add(item.element);
-        });
-        this.items.on('remove', (evt, item) => {
-            this.focusTracker.remove(item.element);
-        });
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-        addKeyboardHandlingForGrid({
-            keystrokeHandler: this.keystrokes,
-            focusTracker: this.focusTracker,
-            gridItems: this.items,
-            numberOfColumns: this.columns,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-}
+/**
+ * @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/colorgridview
+ */
+import View from '../view';
+import ColorTileView from './colortileview';
+import addKeyboardHandlingForGrid from '../bindings/addkeyboardhandlingforgrid';
+import { FocusTracker, KeystrokeHandler } 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 {
+    /**
+     * 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, options) {
+        super(locale);
+        const colorDefinitions = options && options.colorDefinitions ? options.colorDefinitions : [];
+        this.columns = options && options.columns ? options.columns : 5;
+        const viewStyleAttribute = {
+            gridTemplateColumns: `repeat( ${this.columns}, 1fr)`
+        };
+        this.set('selectedColor', undefined);
+        this.items = this.createCollection();
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.items.on('add', (evt, colorTile) => {
+            colorTile.isOn = colorTile.color === this.selectedColor;
+        });
+        colorDefinitions.forEach(color => {
+            const colorTile = new ColorTileView();
+            colorTile.set({
+                color: color.color,
+                label: color.label,
+                tooltip: true,
+                hasBorder: color.options.hasBorder
+            });
+            colorTile.on('execute', () => {
+                this.fire('execute', {
+                    value: color.color,
+                    hasBorder: color.options.hasBorder,
+                    label: color.label
+                });
+            });
+            this.items.add(colorTile);
+        });
+        this.setTemplate({
+            tag: 'div',
+            children: this.items,
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-color-grid'
+                ],
+                style: viewStyleAttribute
+            }
+        });
+        this.on('change:selectedColor', (evt, name, selectedColor) => {
+            for (const item of this.items) {
+                item.isOn = item.color === selectedColor;
+            }
+        });
+    }
+    /**
+     * Focuses the first focusable in {@link #items}.
+     */
+    focus() {
+        if (this.items.length) {
+            this.items.first.focus();
+        }
+    }
+    /**
+     * Focuses the last focusable in {@link #items}.
+     */
+    focusLast() {
+        if (this.items.length) {
+            this.items.last.focus();
+        }
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Items added before rendering should be known to the #focusTracker.
+        for (const item of this.items) {
+            this.focusTracker.add(item.element);
+        }
+        this.items.on('add', (evt, item) => {
+            this.focusTracker.add(item.element);
+        });
+        this.items.on('remove', (evt, item) => {
+            this.focusTracker.remove(item.element);
+        });
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+        addKeyboardHandlingForGrid({
+            keystrokeHandler: this.keystrokes,
+            focusTracker: this.focusTracker,
+            gridItems: this.items,
+            numberOfColumns: this.columns,
+            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+}

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';
+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-selector__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';
+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}`
+                }
+            }
+        };
+    }
+}