@ckeditor/ckeditor5-ui 47.6.1-alpha.1 → 48.0.0-alpha.0

package/src/button/filedialogbuttonview.js

@@ -1,147 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/button/filedialogbuttonview
- */
-import { View } from '../view.js';
-import { ButtonView } from './buttonview.js';
-import { ListItemButtonView } from './listitembuttonview.js';
-/**
- * The file dialog button view.
- *
- * This component provides a button that opens the native file selection dialog.
- * It can be used to implement the UI of a file upload feature.
- *
- * ```ts
- * const view = new FileDialogButtonView( locale );
- *
- * view.set( {
- * 	acceptedType: 'image/*',
- * 	allowMultipleFiles: true
- * 	label: t( 'Insert image' ),
- * 	icon: imageIcon,
- * 	tooltip: true
- * } );
- *
- * view.on( 'done', ( evt, files ) => {
- * 	for ( const file of Array.from( files ) ) {
- * 		console.log( 'Selected file', file );
- * 	}
- * } );
- * ```
- */
-export class FileDialogButtonView extends /* #__PURE__ */ FileDialogViewMixin(ButtonView) {
-}
-/**
- * The file dialog button view used in a lists.
- *
- * This component provides a button that opens the native file selection dialog.
- * It can be used to implement the UI of a file upload feature.
- *
-* ```ts
- * const view = new FileDialogListItemButtonView( locale );
- *
- * view.set( {
- * 	acceptedType: 'image/*',
- * 	allowMultipleFiles: true
- * 	label: t( 'Insert image' ),
- * 	icon: imageIcon,
- * 	tooltip: true
- * } );
- *
- * view.on( 'done', ( evt, files ) => {
- * 	for ( const file of Array.from( files ) ) {
- * 		console.log( 'Selected file', file );
- * 	}
- * } );
- * ```
- */
-export class FileDialogListItemButtonView extends /* #__PURE__ */ FileDialogViewMixin(ListItemButtonView) {
-}
-/**
- * Mixin function that enhances a base button view class with file dialog functionality. It is used
- * to create a button view class that opens the native select file dialog when clicked.
- *
- * The enhanced view includes a button and a hidden file input. When the button is clicked, the file dialog is opened.
- * The mixin adds properties and methods to the base class to handle the file selection.
- *
- * @param view The base class to be enhanced with file dialog functionality.
- * @returns A new class that extends the base class and includes the file dialog functionality.
- */
-export function FileDialogViewMixin(view) {
-    class FileDialogView extends view {
-        /**
-         * A hidden `<input>` view used to execute file dialog.
-         */
-        _fileInputView;
-        /**
-         * @inheritDoc
-         */
-        constructor(...args) {
-            super(...args);
-            this._fileInputView = new FileInputView(this.locale);
-            this._fileInputView.bind('acceptedType').to(this);
-            this._fileInputView.bind('allowMultipleFiles').to(this);
-            this._fileInputView.delegate('done').to(this);
-            this.on('execute', () => {
-                this._fileInputView.open();
-            });
-            this.extendTemplate({
-                attributes: {
-                    class: 'ck-file-dialog-button'
-                }
-            });
-        }
-        /**
-         * @inheritDoc
-         */
-        render() {
-            super.render();
-            this.children.add(this._fileInputView);
-        }
-    }
-    return FileDialogView;
-}
-/**
- * The hidden file input view class.
- */
-class FileInputView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.set('acceptedType', undefined);
-        this.set('allowMultipleFiles', false);
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'input',
-            attributes: {
-                class: [
-                    'ck-hidden'
-                ],
-                type: 'file',
-                tabindex: '-1',
-                accept: bind.to('acceptedType'),
-                multiple: bind.to('allowMultipleFiles')
-            },
-            on: {
-                // Removing from code coverage since we cannot programmatically set input element files.
-                change: bind.to(/* istanbul ignore next -- @preserve */ () => {
-                    if (this.element?.files?.length) {
-                        this.fire('done', this.element.files);
-                    }
-                    this.element.value = '';
-                })
-            }
-        });
-    }
-    /**
-     * Opens file dialog.
-     */
-    open() {
-        this.element.click();
-    }
-}

package/src/button/listitembuttonview.js

@@ -1,136 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { IconCheck } from '@ckeditor/ckeditor5-icons';
-import { ButtonView } from './buttonview.js';
-import { ButtonLabelView } from './buttonlabelview.js';
-import { IconView } from '../icon/iconview.js';
-import { View } from '../view.js';
-import '../../theme/components/button/listitembutton.css';
-/**
- * Button that is used as dropdown list item entry.
- */
-export class ListItemButtonView extends ButtonView {
-    /**
-     * Holds the view for the check icon of a button list item.
-     */
-    _checkIconHolderView = new CheckIconHolderView();
-    /**
-     * @inheritDoc
-     */
-    constructor(locale, labelView = new ButtonLabelView()) {
-        super(locale, labelView);
-        this.set({
-            hasCheckSpace: false,
-            _hasCheck: this.isToggleable
-        });
-        const bind = this.bindTemplate;
-        this.extendTemplate({
-            attributes: {
-                class: [
-                    'ck-list-item-button',
-                    bind.if('isToggleable', 'ck-list-item-button_toggleable')
-                ]
-            }
-        });
-        this.bind('_hasCheck').to(this, 'hasCheckSpace', this, 'isToggleable', (hasCheckSpace, isToggleable) => hasCheckSpace || isToggleable);
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        if (this._hasCheck) {
-            this.children.add(this._checkIconHolderView, 0);
-        }
-        this._watchCheckIconHolderMount();
-    }
-    /**
-     * Renders the check icon if the button is toggleable.
-     */
-    _watchCheckIconHolderMount() {
-        this._checkIconHolderView
-            .bind('isOn')
-            .to(this, 'isOn', value => this.isToggleable && value);
-        this.on('change:_hasCheck', (evt, propertyName, hasCheck) => {
-            const { children, _checkIconHolderView } = this;
-            if (hasCheck) {
-                children.add(_checkIconHolderView, 0);
-            }
-            else {
-                children.remove(_checkIconHolderView);
-            }
-        });
-    }
-}
-/**
- * @internal
- */
-export class CheckIconHolderView extends View {
-    /**
-     * Collection of child views.
-     */
-    children;
-    /**
-     * The view for the check icon of the button list item.
-     */
-    _checkIconView = this._createCheckIconView();
-    /**
-     * @inheritDoc
-     */
-    constructor() {
-        super();
-        const bind = this.bindTemplate;
-        this.children = this.createCollection();
-        this.set('isOn', false);
-        this.setTemplate({
-            tag: 'span',
-            children: this.children,
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-list-item-button__check-holder',
-                    bind.to('isOn', isOn => isOn ? 'ck-on' : 'ck-off')
-                ]
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        if (this.isOn) {
-            this.children.add(this._checkIconView, 0);
-        }
-        this._watchCheckIconMount();
-    }
-    /**
-     * Renders the check icon if the button is toggleable.
-     */
-    _watchCheckIconMount() {
-        this.on('change:isOn', (evt, propertyName, isOn) => {
-            const { children, _checkIconView } = this;
-            if (isOn && !children.has(_checkIconView)) {
-                children.add(_checkIconView);
-            }
-            else if (!isOn && children.has(_checkIconView)) {
-                children.remove(_checkIconView);
-            }
-        });
-    }
-    /**
-     * Creates a check icon view.
-     */
-    _createCheckIconView() {
-        const iconView = new IconView();
-        iconView.content = IconCheck;
-        iconView.extendTemplate({
-            attributes: {
-                class: 'ck-list-item-button__check-icon'
-            }
-        });
-        return iconView;
-    }
-}

package/src/button/switchbuttonview.js

@@ -1,79 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/button/switchbuttonview
- */
-import { View } from '../view.js';
-import { ButtonView } from './buttonview.js';
-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 class SwitchButtonView extends ButtonView {
-    /**
-     * The toggle switch of the button.
-     */
-    toggleSwitchView;
-    /**
-     * @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.js

@@ -1,106 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/collapsible/collapsibleview
- */
-import { IconDropdownArrow } from '@ckeditor/ckeditor5-icons';
-import { View } from '../view.js';
-import { ButtonView } from '../button/buttonview.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 class CollapsibleView extends View {
-    /**
-     * The main button that, when clicked, collapses or expands the container with {@link #children}.
-     */
-    buttonView;
-    /**
-     * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
-     */
-    children;
-    /**
-     * 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: IconDropdownArrow
-        });
-        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.js

@@ -1,140 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/colorgrid/colorgridview
- */
-import { View } from '../view.js';
-import { ColorTileView } from './colortileview.js';
-import { addKeyboardHandlingForGrid } from '../bindings/addkeyboardhandlingforgrid.js';
-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 class ColorGridView extends View {
-    /**
-     * A number of columns for the tiles grid.
-     */
-    columns;
-    /**
-     * Collection of the child tile views.
-     */
-    items;
-    /**
-     * Tracks information about DOM focus in the grid.
-     */
-    focusTracker;
-    /**
-     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    keystrokes;
-    /**
-     * 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?.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?.uiLanguageDirection
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-}

package/src/colorgrid/colortileview.js

@@ -1,42 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/colorgrid/colortileview
- */
-import { IconColorTileCheck } from '@ckeditor/ckeditor5-icons';
-import { env } from '@ckeditor/ckeditor5-utils';
-import { ButtonView } from '../button/buttonview.js';
-/**
- * This class represents a single color tile in the {@link module:ui/colorgrid/colorgridview~ColorGridView}.
- */
-export class ColorTileView extends ButtonView {
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('color', undefined);
-        this.set('hasBorder', false);
-        this.icon = IconColorTileCheck;
-        this.extendTemplate({
-            attributes: {
-                style: {
-                    // https://github.com/ckeditor/ckeditor5/issues/14907
-                    backgroundColor: bind.to('color', color => env.isMediaForcedColors ? null : 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%)';
-    }
-}