@ckeditor/ckeditor5-ui 40.0.0 → 40.2.0

package/src/button/switchbuttonview.js

@@ -1,75 +1,75 @@
-/**
- * @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/button/switchbuttonview
- */
-import View from '../view';
-import ButtonView from './buttonview';
-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 {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.isToggleable = true;
-        this.toggleSwitchView = this._createToggleView();
-        this.extendTemplate({
-            attributes: {
-                class: 'ck-switchbutton'
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.children.add(this.toggleSwitchView);
-    }
-    /**
-     * Creates a toggle child view.
-     */
-    _createToggleView() {
-        const toggleSwitchView = new View();
-        toggleSwitchView.setTemplate({
-            tag: 'span',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-button__toggle'
-                ]
-            },
-            children: [
-                {
-                    tag: 'span',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-button__toggle__inner'
-                        ]
-                    }
-                }
-            ]
-        });
-        return toggleSwitchView;
-    }
-}
+/**
+ * @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/button/switchbuttonview
+ */
+import View from '../view';
+import ButtonView from './buttonview';
+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 {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        this.isToggleable = true;
+        this.toggleSwitchView = this._createToggleView();
+        this.extendTemplate({
+            attributes: {
+                class: 'ck-switchbutton'
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.children.add(this.toggleSwitchView);
+    }
+    /**
+     * Creates a toggle child view.
+     */
+    _createToggleView() {
+        const toggleSwitchView = new View();
+        toggleSwitchView.setTemplate({
+            tag: 'span',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-button__toggle'
+                ]
+            },
+            children: [
+                {
+                    tag: 'span',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-button__toggle__inner'
+                        ]
+                    }
+                }
+            ]
+        });
+        return toggleSwitchView;
+    }
+}

package/src/collapsible/collapsibleview.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @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/collapsible/collapsibleview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import View from '../view';
+import ButtonView from '../button/buttonview';
+import type ViewCollection from '../viewcollection';
+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;
+    /**
+     * 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<View>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the first focusable.
+     */
+    focus(): void;
+    /**
+     * Creates the main {@link #buttonView} of the collapsible.
+     */
+    private _createButtonView;
+}

package/src/collapsible/collapsibleview.js

@@ -0,0 +1,95 @@
+/**
+ * @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 View from '../view';
+import ButtonView from '../button/buttonview';
+import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
+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 {
+    /**
+     * 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, childViews) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isCollapsed', false);
+        this.set('label', '');
+        this.buttonView = this._createButtonView();
+        this.children = this.createCollection();
+        this.set('_collapsibleAriaLabelUid', undefined);
+        if (childViews) {
+            this.children.addMany(childViews);
+        }
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-collapsible',
+                    bind.if('isCollapsed', 'ck-collapsible_collapsed')
+                ]
+            },
+            children: [
+                this.buttonView,
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-collapsible__children'
+                        ],
+                        role: 'region',
+                        hidden: bind.if('isCollapsed', 'hidden'),
+                        'aria-labelledby': bind.to('_collapsibleAriaLabelUid')
+                    },
+                    children: this.children
+                }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this._collapsibleAriaLabelUid = this.buttonView.labelView.element.id;
+    }
+    /**
+     * Focuses the first focusable.
+     */
+    focus() {
+        this.buttonView.focus();
+    }
+    /**
+     * Creates the main {@link #buttonView} of the collapsible.
+     */
+    _createButtonView() {
+        const buttonView = new ButtonView(this.locale);
+        const bind = buttonView.bindTemplate;
+        buttonView.set({
+            withText: true,
+            icon: dropdownArrowIcon
+        });
+        buttonView.extendTemplate({
+            attributes: {
+                'aria-expanded': bind.to('isOn', value => String(value))
+            }
+        });
+        buttonView.bind('label').to(this);
+        buttonView.bind('isOn').to(this, 'isCollapsed', isCollapsed => !isCollapsed);
+        buttonView.on('execute', () => {
+            this.isCollapsed = !this.isCollapsed;
+        });
+        return buttonView;
+    }
+}

package/src/colorgrid/colorgridview.d.ts

@@ -1,132 +1,132 @@
-/**
- * @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 type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
-import type ViewCollection from '../viewcollection';
-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;
-}
+/**
+ * @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 type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
+import type ViewCollection from '../viewcollection';
+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;
+}