@ckeditor/ckeditor5-style 39.0.1 → 40.0.0

package/src/ui/stylegridbuttonview.js

@@ -1,55 +1,55 @@
-/**
- * @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
- */
-import { ButtonView, View } from 'ckeditor5/src/ui';
-/**
- * A class representing an individual button (style) in the grid. Renders a rich preview of the style.
- */
-export default class StyleGridButtonView extends ButtonView {
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegridbuttonview~StyleGridButtonView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinition Definition of the style.
-     */
-    constructor(locale, styleDefinition) {
-        super(locale);
-        this.styleDefinition = styleDefinition;
-        this.previewView = this._createPreview();
-        this.set({
-            label: styleDefinition.name,
-            class: 'ck-style-grid__button',
-            withText: true
-        });
-        this.extendTemplate({
-            attributes: {
-                role: 'option'
-            }
-        });
-        this.children.add(this.previewView, 0);
-    }
-    /**
-     * Creates the view representing the preview of the style.
-     */
-    _createPreview() {
-        const previewView = new View(this.locale);
-        previewView.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset_all-excluded',
-                    'ck-style-grid__button__preview',
-                    'ck-content'
-                ],
-                // The preview "AaBbCcDdEeFfGgHhIiJj" should not be read by screen readers because it is purely presentational.
-                'aria-hidden': 'true'
-            },
-            children: [
-                this.styleDefinition.previewTemplate
-            ]
-        });
-        return previewView;
-    }
-}
+/**
+ * @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
+ */
+import { ButtonView, View } from 'ckeditor5/src/ui';
+/**
+ * A class representing an individual button (style) in the grid. Renders a rich preview of the style.
+ */
+export default class StyleGridButtonView extends ButtonView {
+    /**
+     * Creates an instance of the {@link module:style/ui/stylegridbuttonview~StyleGridButtonView} class.
+     *
+     * @param locale The localization services instance.
+     * @param styleDefinition Definition of the style.
+     */
+    constructor(locale, styleDefinition) {
+        super(locale);
+        this.styleDefinition = styleDefinition;
+        this.previewView = this._createPreview();
+        this.set({
+            label: styleDefinition.name,
+            class: 'ck-style-grid__button',
+            withText: true
+        });
+        this.extendTemplate({
+            attributes: {
+                role: 'option'
+            }
+        });
+        this.children.add(this.previewView, 0);
+    }
+    /**
+     * Creates the view representing the preview of the style.
+     */
+    _createPreview() {
+        const previewView = new View(this.locale);
+        previewView.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-reset_all-excluded',
+                    'ck-style-grid__button__preview',
+                    'ck-content'
+                ],
+                // The preview "AaBbCcDdEeFfGgHhIiJj" should not be read by screen readers because it is purely presentational.
+                'aria-hidden': 'true'
+            },
+            children: [
+                this.styleDefinition.previewTemplate
+            ]
+        });
+        return previewView;
+    }
+}

package/src/ui/stylegridview.d.ts

@@ -1,72 +1,72 @@
-/**
- * @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 style/ui/stylegridview
- */
-import { View, type ViewCollection } from 'ckeditor5/src/ui';
-import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
-import StyleGridButtonView from './stylegridbuttonview';
-import type { NormalizedStyleDefinition } from '../styleutils';
-import '../../theme/stylegrid.css';
-/**
- * A class representing a grid of styles ({@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}).
- * Allows users to select a style.
- */
-export default class StyleGridView extends View<HTMLDivElement> {
-    /**
-     * Tracks information about the DOM focus in the view.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * A collection of style {@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}.
-     */
-    readonly children: ViewCollection<StyleGridButtonView>;
-    /**
-     * Array of active style names. They must correspond to the names of styles from
-     * definitions passed to the {@link #constructor}.
-     *
-     * @observable
-     */
-    readonly activeStyles: Array<string>;
-    /**
-     * Array of enabled style names. They must correspond to the names of styles from
-     * definitions passed to the {@link #constructor}.
-     *
-     * @observable
-     */
-    readonly enabledStyles: Array<string>;
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegridview~StyleGridView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinitions Definitions of the styles.
-     */
-    constructor(locale: Locale, styleDefinitions: Array<NormalizedStyleDefinition>);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Focuses the first style button in the grid.
-     */
-    focus(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-}
-/**
- * Fired when a {@link module:style/ui/stylegridbuttonview~StyleGridButtonView style} was selected (clicked) by the user.
- *
- * @eventName ~StyleGridView#execute
- */
-export type StyleGridViewExecuteEvent = {
-    name: 'execute';
-    args: [];
-};
+/**
+ * @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 style/ui/stylegridview
+ */
+import { View, type ViewCollection } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
+import StyleGridButtonView from './stylegridbuttonview';
+import type { NormalizedStyleDefinition } from '../styleutils';
+import '../../theme/stylegrid.css';
+/**
+ * A class representing a grid of styles ({@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}).
+ * Allows users to select a style.
+ */
+export default class StyleGridView extends View<HTMLDivElement> {
+    /**
+     * Tracks information about the DOM focus in the view.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * A collection of style {@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}.
+     */
+    readonly children: ViewCollection<StyleGridButtonView>;
+    /**
+     * Array of active style names. They must correspond to the names of styles from
+     * definitions passed to the {@link #constructor}.
+     *
+     * @observable
+     */
+    readonly activeStyles: Array<string>;
+    /**
+     * Array of enabled style names. They must correspond to the names of styles from
+     * definitions passed to the {@link #constructor}.
+     *
+     * @observable
+     */
+    readonly enabledStyles: Array<string>;
+    /**
+     * Creates an instance of the {@link module:style/ui/stylegridview~StyleGridView} class.
+     *
+     * @param locale The localization services instance.
+     * @param styleDefinitions Definitions of the styles.
+     */
+    constructor(locale: Locale, styleDefinitions: Array<NormalizedStyleDefinition>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the first style button in the grid.
+     */
+    focus(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+}
+/**
+ * Fired when a {@link module:style/ui/stylegridbuttonview~StyleGridButtonView style} was selected (clicked) by the user.
+ *
+ * @eventName ~StyleGridView#execute
+ */
+export type StyleGridViewExecuteEvent = {
+    name: 'execute';
+    args: [];
+};

package/src/ui/stylegridview.js

@@ -1,89 +1,89 @@
-/**
- * @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 style/ui/stylegridview
- */
-import { View, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
-import StyleGridButtonView from './stylegridbuttonview';
-import '../../theme/stylegrid.css';
-/**
- * A class representing a grid of styles ({@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}).
- * Allows users to select a style.
- */
-export default class StyleGridView extends View {
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegridview~StyleGridView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinitions Definitions of the styles.
-     */
-    constructor(locale, styleDefinitions) {
-        super(locale);
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.set('activeStyles', []);
-        this.set('enabledStyles', []);
-        this.children = this.createCollection();
-        this.children.delegate('execute').to(this);
-        for (const definition of styleDefinitions) {
-            const gridTileView = new StyleGridButtonView(locale, definition);
-            this.children.add(gridTileView);
-        }
-        this.on('change:activeStyles', () => {
-            for (const child of this.children) {
-                child.isOn = this.activeStyles.includes(child.styleDefinition.name);
-            }
-        });
-        this.on('change:enabledStyles', () => {
-            for (const child of this.children) {
-                child.isEnabled = this.enabledStyles.includes(child.styleDefinition.name);
-            }
-        });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-style-grid'
-                ],
-                role: 'listbox'
-            },
-            children: this.children
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        for (const child of this.children) {
-            this.focusTracker.add(child.element);
-        }
-        addKeyboardHandlingForGrid({
-            keystrokeHandler: this.keystrokes,
-            focusTracker: this.focusTracker,
-            gridItems: this.children,
-            numberOfColumns: 3,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
-        });
-        // Start listening for the keystrokes coming from the grid view.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * Focuses the first style button in the grid.
-     */
-    focus() {
-        this.children.first.focus();
-    }
-    /**
-     * @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 style/ui/stylegridview
+ */
+import { View, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
+import StyleGridButtonView from './stylegridbuttonview';
+import '../../theme/stylegrid.css';
+/**
+ * A class representing a grid of styles ({@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}).
+ * Allows users to select a style.
+ */
+export default class StyleGridView extends View {
+    /**
+     * Creates an instance of the {@link module:style/ui/stylegridview~StyleGridView} class.
+     *
+     * @param locale The localization services instance.
+     * @param styleDefinitions Definitions of the styles.
+     */
+    constructor(locale, styleDefinitions) {
+        super(locale);
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.set('activeStyles', []);
+        this.set('enabledStyles', []);
+        this.children = this.createCollection();
+        this.children.delegate('execute').to(this);
+        for (const definition of styleDefinitions) {
+            const gridTileView = new StyleGridButtonView(locale, definition);
+            this.children.add(gridTileView);
+        }
+        this.on('change:activeStyles', () => {
+            for (const child of this.children) {
+                child.isOn = this.activeStyles.includes(child.styleDefinition.name);
+            }
+        });
+        this.on('change:enabledStyles', () => {
+            for (const child of this.children) {
+                child.isEnabled = this.enabledStyles.includes(child.styleDefinition.name);
+            }
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-style-grid'
+                ],
+                role: 'listbox'
+            },
+            children: this.children
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        for (const child of this.children) {
+            this.focusTracker.add(child.element);
+        }
+        addKeyboardHandlingForGrid({
+            keystrokeHandler: this.keystrokes,
+            focusTracker: this.focusTracker,
+            gridItems: this.children,
+            numberOfColumns: 3,
+            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+        });
+        // Start listening for the keystrokes coming from the grid view.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * Focuses the first style button in the grid.
+     */
+    focus() {
+        this.children.first.focus();
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+}

package/src/ui/stylegroupview.d.ts

@@ -1,35 +1,35 @@
-/**
- * @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 style/ui/stylegroupview
- */
-import { LabelView, View } from 'ckeditor5/src/ui';
-import type { Locale } from 'ckeditor5/src/utils';
-import StyleGridView from './stylegridview';
-import type { NormalizedStyleDefinition } from '../styleutils';
-import '../../theme/stylegroup.css';
-/**
- * A class representing a group of styles (e.g. "block" or "inline").
- *
- * Renders a {@link module:style/ui/stylegridview~StyleGridView style grid} and a label.
- */
-export default class StyleGroupView extends View<HTMLDivElement> {
-    /**
-     * The styles grid of the group.
-     */
-    readonly gridView: StyleGridView;
-    /**
-     * The label of the group.
-     */
-    readonly labelView: LabelView;
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
-     *
-     * @param locale The localization services instance.
-     * @param label The localized label of the group.
-     * @param styleDefinitions Definitions of the styles in the group.
-     */
-    constructor(locale: Locale, label: string, styleDefinitions: Array<NormalizedStyleDefinition>);
-}
+/**
+ * @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 style/ui/stylegroupview
+ */
+import { LabelView, View } from 'ckeditor5/src/ui';
+import type { Locale } from 'ckeditor5/src/utils';
+import StyleGridView from './stylegridview';
+import type { NormalizedStyleDefinition } from '../styleutils';
+import '../../theme/stylegroup.css';
+/**
+ * A class representing a group of styles (e.g. "block" or "inline").
+ *
+ * Renders a {@link module:style/ui/stylegridview~StyleGridView style grid} and a label.
+ */
+export default class StyleGroupView extends View<HTMLDivElement> {
+    /**
+     * The styles grid of the group.
+     */
+    readonly gridView: StyleGridView;
+    /**
+     * The label of the group.
+     */
+    readonly labelView: LabelView;
+    /**
+     * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
+     *
+     * @param locale The localization services instance.
+     * @param label The localized label of the group.
+     * @param styleDefinitions Definitions of the styles in the group.
+     */
+    constructor(locale: Locale, label: string, styleDefinitions: Array<NormalizedStyleDefinition>);
+}

package/src/ui/stylegroupview.js

@@ -1,45 +1,45 @@
-/**
- * @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 style/ui/stylegroupview
- */
-import { LabelView, View } from 'ckeditor5/src/ui';
-import StyleGridView from './stylegridview';
-import '../../theme/stylegroup.css';
-/**
- * A class representing a group of styles (e.g. "block" or "inline").
- *
- * Renders a {@link module:style/ui/stylegridview~StyleGridView style grid} and a label.
- */
-export default class StyleGroupView extends View {
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
-     *
-     * @param locale The localization services instance.
-     * @param label The localized label of the group.
-     * @param styleDefinitions Definitions of the styles in the group.
-     */
-    constructor(locale, label, styleDefinitions) {
-        super(locale);
-        this.labelView = new LabelView(locale);
-        this.labelView.text = label;
-        this.gridView = new StyleGridView(locale, styleDefinitions);
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-style-panel__style-group'
-                ],
-                role: 'group',
-                'aria-labelledby': this.labelView.id
-            },
-            children: [
-                this.labelView,
-                this.gridView
-            ]
-        });
-    }
-}
+/**
+ * @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 style/ui/stylegroupview
+ */
+import { LabelView, View } from 'ckeditor5/src/ui';
+import StyleGridView from './stylegridview';
+import '../../theme/stylegroup.css';
+/**
+ * A class representing a group of styles (e.g. "block" or "inline").
+ *
+ * Renders a {@link module:style/ui/stylegridview~StyleGridView style grid} and a label.
+ */
+export default class StyleGroupView extends View {
+    /**
+     * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
+     *
+     * @param locale The localization services instance.
+     * @param label The localized label of the group.
+     * @param styleDefinitions Definitions of the styles in the group.
+     */
+    constructor(locale, label, styleDefinitions) {
+        super(locale);
+        this.labelView = new LabelView(locale);
+        this.labelView.text = label;
+        this.gridView = new StyleGridView(locale, styleDefinitions);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-style-panel__style-group'
+                ],
+                role: 'group',
+                'aria-labelledby': this.labelView.id
+            },
+            children: [
+                this.labelView,
+                this.gridView
+            ]
+        });
+    }
+}