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

package/src/input/inputview.js

@@ -1,24 +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 { InputBase } from './inputbase.js';
-import '../../theme/components/input/input.css';
-/**
- * The input view class.
- */
-export class InputView extends InputBase {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.set('inputMode', 'text');
-        const bind = this.bindTemplate;
-        this.extendTemplate({
-            attributes: {
-                inputmode: bind.to('inputMode')
-            }
-        });
-    }
-}

package/src/inputnumber/inputnumberview.js

@@ -1,40 +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/inputnumber/inputnumberview
- */
-import { InputView } from '../input/inputview.js';
-/**
- * The number input view class.
- */
-export class InputNumberView extends InputView {
-    /**
-     * Creates an instance of the input number view.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param options The options of the input.
-     * @param options.min The value of the `min` DOM attribute (the lowest accepted value).
-     * @param options.max The value of the `max` DOM attribute (the highest accepted value).
-     * @param options.step The value of the `step` DOM attribute.
-     */
-    constructor(locale, { min, max, step } = {}) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('min', min);
-        this.set('max', max);
-        this.set('step', step);
-        this.extendTemplate({
-            attributes: {
-                type: 'number',
-                class: [
-                    'ck-input-number'
-                ],
-                min: bind.to('min'),
-                max: bind.to('max'),
-                step: bind.to('step')
-            }
-        });
-    }
-}

package/src/inputtext/inputtextview.js

@@ -1,27 +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/inputtext/inputtextview
- */
-import { InputView } from '../input/inputview.js';
-/**
- * The text input view class.
- */
-export class InputTextView extends InputView {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.extendTemplate({
-            attributes: {
-                type: 'text',
-                class: [
-                    'ck-input-text'
-                ]
-            }
-        });
-    }
-}

package/src/label/labelview.js

@@ -1,46 +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/label/labelview
- */
-import { View } from '../view.js';
-import { uid } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/label/label.css';
-/**
- * The label view class.
- */
-export class LabelView extends View {
-    /**
-     * An unique id of the label. It can be used by other UI components to reference
-     * the label, for instance, using the `aria-describedby` DOM attribute.
-     */
-    id;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.set('text', undefined);
-        this.set('for', undefined);
-        this.id = `ck-editor__label_${uid()}`;
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'label',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-label'
-                ],
-                id: this.id,
-                for: bind.to('for')
-            },
-            children: [
-                {
-                    text: bind.to('text')
-                }
-            ]
-        });
-    }
-}

package/src/labeledfield/labeledfieldview.js

@@ -1,177 +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/labeledfield/labeledfieldview
- */
-import { View } from '../view.js';
-import { LabelView } from '../label/labelview.js';
-import { uid } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/labeledfield/labeledfieldview.css';
-/**
- * The labeled field view class. It can be used to enhance any view with the following features:
- *
- * * a label,
- * * (optional) an error message,
- * * (optional) an info (status) text,
- *
- * all bound logically by proper DOM attributes for UX and accessibility.  It also provides an interface
- * (e.g. observable properties) that allows controlling those additional features.
- *
- * The constructor of this class requires a callback that returns a view to be labeled. The callback
- * is called with unique ids that allow binding of DOM properties:
- *
- * ```ts
- * const labeledInputView = new LabeledFieldView( locale, ( labeledFieldView, viewUid, statusUid ) => {
- * 	const inputView = new InputTextView( labeledFieldView.locale );
- *
- * 	inputView.set( {
- * 		id: viewUid,
- * 		ariaDescribedById: statusUid
- * 	} );
- *
- * 	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
- * 	inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
- *
- * 	return inputView;
- * } );
- *
- * labeledInputView.label = 'User name';
- * labeledInputView.infoText = 'Full name like for instance, John Doe.';
- * labeledInputView.render();
- *
- * document.body.append( labeledInputView.element );
- * ```
- *
- * See {@link module:ui/labeledfield/utils} to discover ready–to–use labeled input helpers for common
- * UI components.
- */
-export class LabeledFieldView extends View {
-    /**
-     * The field view that gets labeled.
-     */
-    fieldView;
-    /**
-     * The label view instance that describes the entire view.
-     */
-    labelView;
-    /**
-     * The status view for the {@link #fieldView}. It displays {@link #errorText} and
-     * {@link #infoText}.
-     */
-    statusView;
-    /**
-     * A collection of children of the internal wrapper element. Allows inserting additional DOM elements (views) next to
-     * the {@link #fieldView} for easy styling (e.g. positioning).
-     *
-     * By default, the collection contains {@link #fieldView} and {@link #labelView}.
-     */
-    fieldWrapperChildren;
-    /**
-     * Creates an instance of the labeled field view class using a provided creator function
-     * that provides the view to be labeled.
-     *
-     * @param locale The locale instance.
-     * @param viewCreator A function that returns a {@link module:ui/view~View}
-     * that will be labeled. The following arguments are passed to the creator function:
-     *
-     * * an instance of the `LabeledFieldView` to allow binding observable properties,
-     * * an UID string that connects the {@link #labelView label} and the labeled field view in DOM,
-     * * an UID string that connects the {@link #statusView status} and the labeled field view in DOM.
-     */
-    constructor(locale, viewCreator) {
-        super(locale);
-        const viewUid = `ck-labeled-field-view-${uid()}`;
-        const statusUid = `ck-labeled-field-view-status-${uid()}`;
-        this.fieldView = viewCreator(this, viewUid, statusUid);
-        this.set('label', undefined);
-        this.set('isEnabled', true);
-        this.set('isEmpty', true);
-        this.set('isFocused', false);
-        this.set('errorText', null);
-        this.set('infoText', null);
-        this.set('class', undefined);
-        this.set('placeholder', undefined);
-        this.labelView = this._createLabelView(viewUid);
-        this.statusView = this._createStatusView(statusUid);
-        this.fieldWrapperChildren = this.createCollection([this.fieldView, this.labelView]);
-        this.bind('_statusText').to(this, 'errorText', this, 'infoText', (errorText, infoText) => errorText || infoText);
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-labeled-field-view',
-                    bind.to('class'),
-                    bind.if('isEnabled', 'ck-disabled', value => !value),
-                    bind.if('isEmpty', 'ck-labeled-field-view_empty'),
-                    bind.if('isFocused', 'ck-labeled-field-view_focused'),
-                    bind.if('placeholder', 'ck-labeled-field-view_placeholder'),
-                    bind.if('errorText', 'ck-error')
-                ]
-            },
-            children: [
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-labeled-field-view__input-wrapper'
-                        ]
-                    },
-                    children: this.fieldWrapperChildren
-                },
-                this.statusView
-            ]
-        });
-    }
-    /**
-     * Creates label view class instance and bind with view.
-     *
-     * @param id Unique id to set as labelView#for attribute.
-     */
-    _createLabelView(id) {
-        const labelView = new LabelView(this.locale);
-        labelView.for = id;
-        labelView.bind('text').to(this, 'label');
-        return labelView;
-    }
-    /**
-     * Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
-     * next to the {@link #fieldView}. See {@link #_statusText}.
-     *
-     * @param statusUid Unique id of the status, shared with the {@link #fieldView view's}
-     * `aria-describedby` attribute.
-     */
-    _createStatusView(statusUid) {
-        const statusView = new View(this.locale);
-        const bind = this.bindTemplate;
-        statusView.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-labeled-field-view__status',
-                    bind.if('errorText', 'ck-labeled-field-view__status_error'),
-                    bind.if('_statusText', 'ck-hidden', value => !value)
-                ],
-                id: statusUid,
-                role: bind.if('errorText', 'alert')
-            },
-            children: [
-                {
-                    text: bind.to('_statusText')
-                }
-            ]
-        });
-        return statusView;
-    }
-    /**
-     * Focuses the {@link #fieldView}.
-     */
-    focus(direction) {
-        this.fieldView.focus(direction);
-    }
-}

package/src/labeledfield/utils.js

@@ -1,176 +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/labeledfield/utils
- */
-import { InputTextView } from '../inputtext/inputtextview.js';
-import { InputNumberView } from '../inputnumber/inputnumberview.js';
-import { TextareaView } from '../textarea/textareaview.js';
-import { createDropdown } from '../dropdown/utils.js';
-/**
- * A helper for creating labeled inputs.
- *
- * It creates an instance of a {@link module:ui/inputtext/inputtextview~InputTextView input text} that is
- * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
- *
- * The helper does the following:
- *
- * * It sets input's `id` and `ariaDescribedById` attributes.
- * * It binds input's `isReadOnly` to the labeled view.
- * * It binds input's `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when user starts typing in the input.
- *
- * Usage:
- *
- * ```ts
- * const labeledInputView = new LabeledFieldView( locale, createLabeledInputText );
- * console.log( labeledInputView.fieldView ); // A text input instance.
- * ```
- *
- * @param labeledFieldView The instance of the labeled field view.
- * @param viewUid A UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
- * @param statusUid A UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
- * @returns The input text view instance.
- */
-const createLabeledInputText = (labeledFieldView, viewUid, statusUid) => {
-    const inputView = new InputTextView(labeledFieldView.locale);
-    inputView.set({
-        id: viewUid,
-        ariaDescribedById: statusUid
-    });
-    inputView.bind('isReadOnly').to(labeledFieldView, 'isEnabled', value => !value);
-    inputView.bind('hasError').to(labeledFieldView, 'errorText', value => !!value);
-    inputView.on('input', () => {
-        // UX: Make the error text disappear and disable the error indicator as the user
-        // starts fixing the errors.
-        labeledFieldView.errorText = null;
-    });
-    labeledFieldView.bind('isEmpty', 'isFocused', 'placeholder').to(inputView);
-    return inputView;
-};
-/**
- * A helper for creating labeled number inputs.
- *
- * It creates an instance of a {@link module:ui/inputnumber/inputnumberview~InputNumberView input number} that is
- * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
- *
- * The helper does the following:
- *
- * * It sets input's `id` and `ariaDescribedById` attributes.
- * * It binds input's `isReadOnly` to the labeled view.
- * * It binds input's `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when user starts typing in the input.
- *
- * Usage:
- *
- * ```ts
- * const labeledInputView = new LabeledFieldView( locale, createLabeledInputNumber );
- * console.log( labeledInputView.fieldView ); // A number input instance.
- * ```
- *
- * @param labeledFieldView The instance of the labeled field view.
- * @param viewUid A UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
- * @param statusUid A UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
- * @returns The input number view instance.
- */
-const createLabeledInputNumber = (labeledFieldView, viewUid, statusUid) => {
-    const inputView = new InputNumberView(labeledFieldView.locale);
-    inputView.set({
-        id: viewUid,
-        ariaDescribedById: statusUid,
-        inputMode: 'numeric'
-    });
-    inputView.bind('isReadOnly').to(labeledFieldView, 'isEnabled', value => !value);
-    inputView.bind('hasError').to(labeledFieldView, 'errorText', value => !!value);
-    inputView.on('input', () => {
-        // UX: Make the error text disappear and disable the error indicator as the user
-        // starts fixing the errors.
-        labeledFieldView.errorText = null;
-    });
-    labeledFieldView.bind('isEmpty', 'isFocused', 'placeholder').to(inputView);
-    return inputView;
-};
-/**
- * A helper for creating labeled textarea.
- *
- * It creates an instance of a {@link module:ui/textarea/textareaview~TextareaView textarea} that is
- * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
- *
- * The helper does the following:
- *
- * * It sets textarea's `id` and `ariaDescribedById` attributes.
- * * It binds textarea's `isReadOnly` to the labeled view.
- * * It binds textarea's `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when user starts typing in the textarea.
- *
- * Usage:
- *
- * ```ts
- * const labeledTextarea = new LabeledFieldView( locale, createLabeledTextarea );
- * console.log( labeledTextarea.fieldView ); // A textarea instance.
- * ```
- *
- * @param labeledFieldView The instance of the labeled field view.
- * @param viewUid A UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the textarea.
- * @param statusUid A UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the textarea.
- * @returns The textarea view instance.
- */
-const createLabeledTextarea = (labeledFieldView, viewUid, statusUid) => {
-    const textareaView = new TextareaView(labeledFieldView.locale);
-    textareaView.set({
-        id: viewUid,
-        ariaDescribedById: statusUid
-    });
-    textareaView.bind('isReadOnly').to(labeledFieldView, 'isEnabled', value => !value);
-    textareaView.bind('hasError').to(labeledFieldView, 'errorText', value => !!value);
-    textareaView.on('input', () => {
-        // UX: Make the error text disappear and disable the error indicator as the user
-        // starts fixing the errors.
-        labeledFieldView.errorText = null;
-    });
-    labeledFieldView.bind('isEmpty', 'isFocused', 'placeholder').to(textareaView);
-    return textareaView;
-};
-/**
- * A helper for creating labeled dropdowns.
- *
- * It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown} that is
- * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled field view}.
- *
- * The helper does the following:
- *
- * * It sets dropdown's `id` and `ariaDescribedById` attributes.
- * * It binds input's `isEnabled` to the labeled view.
- *
- * Usage:
- *
- * ```ts
- * const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
- * console.log( labeledInputView.fieldView ); // A dropdown instance.
- * ```
- *
- * @param labeledFieldView The instance of the labeled field view.
- * @param viewUid A UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view label} and the dropdown.
- * @param statusUid A UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view status} and the dropdown.
- * @returns The dropdown view instance.
- */
-const createLabeledDropdown = (labeledFieldView, viewUid, statusUid) => {
-    const dropdownView = createDropdown(labeledFieldView.locale);
-    dropdownView.set({
-        id: viewUid,
-        ariaDescribedById: statusUid
-    });
-    dropdownView.bind('isEnabled').to(labeledFieldView);
-    return dropdownView;
-};
-export { createLabeledInputNumber, createLabeledInputText, createLabeledTextarea, createLabeledDropdown };

package/src/labeledinput/labeledinputview.js

@@ -1,138 +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/labeledinput/labeledinputview
- */
-import { View } from '../view.js';
-import { LabelView } from '../label/labelview.js';
-import { uid } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/labeledinput/labeledinput.css';
-/**
- * The labeled input view class.
- */
-export class LabeledInputView extends View {
-    /**
-     * The label view.
-     */
-    labelView;
-    /**
-     * The input view.
-     */
-    inputView;
-    /**
-     * The status view for the {@link #inputView}. It displays {@link #errorText} and
-     * {@link #infoText}.
-     */
-    statusView;
-    /**
-     * Creates an instance of the labeled input view class.
-     *
-     * @param locale The locale instance.
-     * @param InputView Constructor of the input view.
-     */
-    constructor(locale, InputView) {
-        super(locale);
-        const inputUid = `ck-input-${uid()}`;
-        const statusUid = `ck-status-${uid()}`;
-        this.set('label', undefined);
-        this.set('value', undefined);
-        this.set('isReadOnly', false);
-        this.set('errorText', null);
-        this.set('infoText', null);
-        this.labelView = this._createLabelView(inputUid);
-        this.inputView = this._createInputView(InputView, inputUid, statusUid);
-        this.statusView = this._createStatusView(statusUid);
-        this.bind('_statusText').to(this, 'errorText', this, 'infoText', (errorText, infoText) => errorText || infoText);
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-labeled-input',
-                    bind.if('isReadOnly', 'ck-disabled')
-                ]
-            },
-            children: [
-                this.labelView,
-                this.inputView,
-                this.statusView
-            ]
-        });
-    }
-    /**
-     * Creates label view class instance and bind with view.
-     *
-     * @param id Unique id to set as labelView#for attribute.
-     */
-    _createLabelView(id) {
-        const labelView = new LabelView(this.locale);
-        labelView.for = id;
-        labelView.bind('text').to(this, 'label');
-        return labelView;
-    }
-    /**
-     * Creates input view class instance and bind with view.
-     *
-     * @param InputView Input view constructor.
-     * @param inputUid Unique id to set as inputView#id attribute.
-     * @param statusUid Unique id of the status for the input's `aria-describedby` attribute.
-     */
-    _createInputView(InputView, inputUid, statusUid) {
-        const inputView = new InputView(this.locale, statusUid);
-        inputView.id = inputUid;
-        inputView.ariaDescribedById = statusUid;
-        inputView.bind('value').to(this);
-        inputView.bind('isReadOnly').to(this);
-        inputView.bind('hasError').to(this, 'errorText', value => !!value);
-        inputView.on('input', () => {
-            // UX: Make the error text disappear and disable the error indicator as the user
-            // starts fixing the errors.
-            this.errorText = null;
-        });
-        return inputView;
-    }
-    /**
-     * Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
-     * next to the {@link #inputView}. See {@link #_statusText}.
-     *
-     * @param statusUid Unique id of the status, shared with the input's `aria-describedby` attribute.
-     */
-    _createStatusView(statusUid) {
-        const statusView = new View(this.locale);
-        const bind = this.bindTemplate;
-        statusView.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-labeled-input__status',
-                    bind.if('errorText', 'ck-labeled-input__status_error'),
-                    bind.if('_statusText', 'ck-hidden', value => !value)
-                ],
-                id: statusUid,
-                role: bind.if('errorText', 'alert')
-            },
-            children: [
-                {
-                    text: bind.to('_statusText')
-                }
-            ]
-        });
-        return statusView;
-    }
-    /**
-     * Moves the focus to the input and selects the value.
-     */
-    select() {
-        this.inputView.select();
-    }
-    /**
-     * Focuses the input.
-     */
-    focus() {
-        this.inputView.focus();
-    }
-}

package/src/legacyerrors.js

@@ -1,20 +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/legacyerrors
- */
-import { CKEditorError } from '@ckeditor/ckeditor5-utils';
-if (false) {
-    /**
-     * The `EditorUI#_editableElements` property has been
-     * deprecated and will be removed in the near future. Please use
-     * {@link module:ui/editorui/editorui~EditorUI#setEditableElement `setEditableElement()`} and
-     * {@link module:ui/editorui/editorui~EditorUI#getEditableElement `getEditableElement()`} methods instead.
-     *
-     * @error editor-ui-deprecated-editable-elements
-     * @param {module:ui/editorui/editorui~EditorUI} editorUI Editor UI instance the deprecated property belongs to.
-     */
-    throw new CKEditorError('editor-ui-deprecated-editable-elements', null);
-}