@ckeditor/ckeditor5-ui 39.0.1 → 40.0.0

package/src/labeledinput/labeledinputview.js

@@ -1,125 +1,125 @@
-/**
- * @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/labeledinput/labeledinputview
- */
-import View from '../view';
-import LabelView from '../label/labelview';
-import { uid } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/labeledinput/labeledinput.css';
-/**
- * The labeled input view class.
- */
-export default class LabeledInputView extends View {
-    /**
-     * 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();
-    }
-}
+/**
+ * @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/labeledinput/labeledinputview
+ */
+import View from '../view';
+import LabelView from '../label/labelview';
+import { uid } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/labeledinput/labeledinput.css';
+/**
+ * The labeled input view class.
+ */
+export default class LabeledInputView extends View {
+    /**
+     * 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/list/listitemgroupview.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @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/list/listitemgroupview
+ */
+import View from '../view';
+import type ViewCollection from '../viewcollection';
+import ListView from './listview';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The list item group view class.
+ */
+export default class ListItemGroupView extends View {
+    /**
+     * The visible label of the group.
+     *
+     * @observable
+     * @default ''
+     */
+    label: string;
+    /**
+     * Collection of the child list items inside this group.
+     */
+    readonly items: ListView['items'];
+    /**
+     * Collection of the child elements of the group.
+     */
+    readonly children: ViewCollection;
+    /**
+     * Controls whether the item view is visible. Visible by default, list items are hidden
+     * using a CSS class.
+     *
+     * @observable
+     * @default true
+     */
+    isVisible: boolean;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * Creates a label for the group.
+     */
+    private _createLabel;
+    /**
+     * Focuses the list item.
+     */
+    focus(): void;
+}

package/src/list/listitemgroupview.js

@@ -0,0 +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/list/listitemgroupview
+ */
+import View from '../view';
+import ListView from './listview';
+import { uid } from '@ckeditor/ckeditor5-utils';
+/**
+ * The list item group view class.
+ */
+export default class ListItemGroupView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        const groupLabelId = `ck-editor__label_${uid()}`;
+        const nestedList = new ListView(locale);
+        this.children = this.createCollection();
+        this.children.addMany([this._createLabel(groupLabelId), nestedList]);
+        this.set({
+            label: '',
+            isVisible: true
+        });
+        nestedList.set({
+            role: 'group',
+            ariaLabelledBy: groupLabelId
+        });
+        // Disable focus tracking and accessible navigation in the child list.
+        nestedList.focusTracker.destroy();
+        nestedList.keystrokes.destroy();
+        this.items = nestedList.items;
+        this.setTemplate({
+            tag: 'li',
+            attributes: {
+                role: 'presentation',
+                class: [
+                    'ck',
+                    'ck-list__group',
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ]
+            },
+            children: this.children
+        });
+    }
+    /**
+     * Creates a label for the group.
+     */
+    _createLabel(groupLabelId) {
+        const labelView = new View(this.locale);
+        const bind = this.bindTemplate;
+        labelView.setTemplate({
+            tag: 'span',
+            attributes: {
+                id: groupLabelId
+            },
+            children: [
+                { text: bind.to('label') }
+            ]
+        });
+        return labelView;
+    }
+    /**
+     * Focuses the list item.
+     */
+    focus() {
+        if (this.items.first) {
+            this.items.first.focus();
+        }
+    }
+}

package/src/list/listitemview.d.ts

@@ -1,35 +1,36 @@
-/**
- * @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/list/listitemview
- */
-import View from '../view';
-import type ViewCollection from '../viewcollection';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-/**
- * The list item view class.
- */
-export default class ListItemView extends View {
-    /**
-     * Collection of the child views inside of the list item {@link #element}.
-     */
-    readonly children: ViewCollection;
-    /**
-     * Controls whether the item view is visible. Visible by default, list items are hidden
-     * using a CSS class.
-     *
-     * @observable
-     * @default true
-     */
-    isVisible: boolean;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale?: Locale);
-    /**
-     * Focuses the list item.
-     */
-    focus(): 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/list/listitemview
+ */
+import View from '../view';
+import type { FocusableView } from '../focuscycler';
+import type ViewCollection from '../viewcollection';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The list item view class.
+ */
+export default class ListItemView extends View {
+    /**
+     * Collection of the child views inside of the list item {@link #element}.
+     */
+    readonly children: ViewCollection<FocusableView>;
+    /**
+     * Controls whether the item view is visible. Visible by default, list items are hidden
+     * using a CSS class.
+     *
+     * @observable
+     * @default true
+     */
+    isVisible: boolean;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * Focuses the list item.
+     */
+    focus(): void;
+}

package/src/list/listitemview.js

@@ -1,40 +1,42 @@
-/**
- * @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/list/listitemview
- */
-import View from '../view';
-/**
- * The list item view class.
- */
-export default class ListItemView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('isVisible', true);
-        this.children = this.createCollection();
-        this.setTemplate({
-            tag: 'li',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-list__item',
-                    bind.if('isVisible', 'ck-hidden', value => !value)
-                ],
-                role: 'presentation'
-            },
-            children: this.children
-        });
-    }
-    /**
-     * Focuses the list item.
-     */
-    focus() {
-        this.children.first.focus();
-    }
-}
+/**
+ * @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/list/listitemview
+ */
+import View from '../view';
+/**
+ * The list item view class.
+ */
+export default class ListItemView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isVisible', true);
+        this.children = this.createCollection();
+        this.setTemplate({
+            tag: 'li',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-list__item',
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ],
+                role: 'presentation'
+            },
+            children: this.children
+        });
+    }
+    /**
+     * Focuses the list item.
+     */
+    focus() {
+        if (this.children.first) {
+            this.children.first.focus();
+        }
+    }
+}

package/src/list/listseparatorview.d.ts

@@ -1,18 +1,18 @@
-/**
- * @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/list/listseparatorview
- */
-import View from '../view';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-/**
- * The list separator view class.
- */
-export default class ListSeparatorView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale?: Locale);
-}
+/**
+ * @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/list/listseparatorview
+ */
+import View from '../view';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The list separator view class.
+ */
+export default class ListSeparatorView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+}

package/src/list/listseparatorview.js

@@ -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/list/listseparatorview
- */
-import View from '../view';
-/**
- * The list separator view class.
- */
-export default class ListSeparatorView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.setTemplate({
-            tag: 'li',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-list__separator'
-                ]
-            }
-        });
-    }
-}
+/**
+ * @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/list/listseparatorview
+ */
+import View from '../view';
+/**
+ * The list separator view class.
+ */
+export default class ListSeparatorView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        this.setTemplate({
+            tag: 'li',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-list__separator'
+                ]
+            }
+        });
+    }
+}