npm - @ckeditor/ckeditor5-ui - Versions diffs - 40.0.0 → 40.1.0 - Mend

@ckeditor/ckeditor5-ui 40.0.0 → 40.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

package/LICENSE.md +3 -3
package/lang/translations/pt-br.po +1 -1
package/lang/translations/ug.po +26 -26
package/package.json +3 -3
package/src/arialiveannouncer.d.ts +94 -0
package/src/arialiveannouncer.js +113 -0
package/src/augmentation.d.ts +86 -86
package/src/augmentation.js +5 -5
package/src/autocomplete/autocompleteview.d.ts +81 -81
package/src/autocomplete/autocompleteview.js +153 -146
package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
package/src/bindings/clickoutsidehandler.d.ts +28 -28
package/src/bindings/clickoutsidehandler.js +36 -36
package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
package/src/bindings/csstransitiondisablermixin.js +55 -55
package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
package/src/bindings/injectcsstransitiondisabler.js +71 -71
package/src/bindings/preventdefault.d.ts +33 -33
package/src/bindings/preventdefault.js +34 -34
package/src/bindings/submithandler.d.ts +57 -57
package/src/bindings/submithandler.js +47 -47
package/src/button/button.d.ts +172 -178
package/src/button/button.js +5 -5
package/src/button/buttonlabel.d.ts +34 -34
package/src/button/buttonlabel.js +5 -5
package/src/button/buttonlabelview.d.ts +31 -31
package/src/button/buttonlabelview.js +42 -42
package/src/button/buttonview.d.ts +181 -185
package/src/button/buttonview.js +217 -219
package/src/button/switchbuttonview.d.ts +45 -45
package/src/button/switchbuttonview.js +75 -75
package/src/colorgrid/colorgridview.d.ts +132 -132
package/src/colorgrid/colorgridview.js +124 -124
package/src/colorgrid/colortileview.d.ts +28 -28
package/src/colorgrid/colortileview.js +40 -40
package/src/colorgrid/utils.d.ts +47 -47
package/src/colorgrid/utils.js +84 -84
package/src/colorpicker/colorpickerview.d.ts +137 -137
package/src/colorpicker/colorpickerview.js +270 -270
package/src/colorpicker/utils.d.ts +43 -43
package/src/colorpicker/utils.js +99 -99
package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
package/src/colorselector/colorgridsfragmentview.js +289 -289
package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
package/src/colorselector/colorpickerfragmentview.js +205 -205
package/src/colorselector/colorselectorview.d.ts +242 -242
package/src/colorselector/colorselectorview.js +256 -256
package/src/colorselector/documentcolorcollection.d.ts +70 -70
package/src/colorselector/documentcolorcollection.js +42 -42
package/src/componentfactory.d.ts +81 -81
package/src/componentfactory.js +104 -104
package/src/dropdown/button/dropdownbutton.d.ts +25 -25
package/src/dropdown/button/dropdownbutton.js +5 -5
package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
package/src/dropdown/button/dropdownbuttonview.js +66 -66
package/src/dropdown/button/splitbuttonview.d.ts +161 -161
package/src/dropdown/button/splitbuttonview.js +152 -152
package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
package/src/dropdown/dropdownpanelfocusable.js +5 -5
package/src/dropdown/dropdownpanelview.d.ts +62 -62
package/src/dropdown/dropdownpanelview.js +97 -97
package/src/dropdown/dropdownview.d.ts +315 -315
package/src/dropdown/dropdownview.js +379 -379
package/src/dropdown/utils.d.ts +235 -235
package/src/dropdown/utils.js +463 -458
package/src/editableui/editableuiview.d.ts +72 -72
package/src/editableui/editableuiview.js +112 -112
package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
package/src/editableui/inline/inlineeditableuiview.js +48 -48
package/src/editorui/bodycollection.d.ts +55 -55
package/src/editorui/bodycollection.js +84 -84
package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
package/src/editorui/boxed/boxededitoruiview.js +81 -81
package/src/editorui/editorui.d.ts +288 -282
package/src/editorui/editorui.js +412 -410
package/src/editorui/editoruiview.d.ts +39 -39
package/src/editorui/editoruiview.js +38 -38
package/src/editorui/poweredby.d.ts +71 -71
package/src/editorui/poweredby.js +276 -276
package/src/focuscycler.d.ts +226 -226
package/src/focuscycler.js +245 -245
package/src/formheader/formheaderview.d.ts +59 -59
package/src/formheader/formheaderview.js +69 -69
package/src/highlightedtext/highlightedtextview.d.ts +38 -38
package/src/highlightedtext/highlightedtextview.js +102 -102
package/src/icon/iconview.d.ts +85 -85
package/src/icon/iconview.js +114 -114
package/src/iframe/iframeview.d.ts +50 -50
package/src/iframe/iframeview.js +63 -63
package/src/index.d.ts +73 -73
package/src/index.js +70 -70
package/src/input/inputbase.d.ts +107 -107
package/src/input/inputbase.js +110 -110
package/src/input/inputview.d.ts +36 -36
package/src/input/inputview.js +24 -24
package/src/inputnumber/inputnumberview.d.ts +49 -49
package/src/inputnumber/inputnumberview.js +40 -40
package/src/inputtext/inputtextview.d.ts +18 -18
package/src/inputtext/inputtextview.js +27 -27
package/src/label/labelview.d.ts +36 -36
package/src/label/labelview.js +41 -41
package/src/labeledfield/labeledfieldview.d.ts +187 -187
package/src/labeledfield/labeledfieldview.js +157 -157
package/src/labeledfield/utils.d.ts +123 -123
package/src/labeledfield/utils.js +176 -176
package/src/labeledinput/labeledinputview.d.ts +125 -125
package/src/labeledinput/labeledinputview.js +125 -125
package/src/list/listitemgroupview.d.ts +59 -51
package/src/list/listitemgroupview.js +63 -75
package/src/list/listitemview.d.ts +36 -36
package/src/list/listitemview.js +42 -42
package/src/list/listseparatorview.d.ts +18 -18
package/src/list/listseparatorview.js +28 -28
package/src/list/listview.d.ts +122 -122
package/src/list/listview.js +187 -187
package/src/model.d.ts +22 -22
package/src/model.js +31 -31
package/src/notification/notification.d.ts +211 -211
package/src/notification/notification.js +187 -187
package/src/panel/balloon/balloonpanelview.d.ts +685 -685
package/src/panel/balloon/balloonpanelview.js +1010 -1010
package/src/panel/balloon/contextualballoon.d.ts +299 -299
package/src/panel/balloon/contextualballoon.js +572 -572
package/src/panel/sticky/stickypanelview.d.ts +156 -156
package/src/panel/sticky/stickypanelview.js +234 -234
package/src/search/filteredview.d.ts +31 -31
package/src/search/filteredview.js +5 -5
package/src/search/searchinfoview.d.ts +45 -45
package/src/search/searchinfoview.js +59 -59
package/src/search/searchresultsview.d.ts +54 -54
package/src/search/searchresultsview.js +65 -65
package/src/search/text/searchtextqueryview.d.ts +76 -76
package/src/search/text/searchtextqueryview.js +75 -75
package/src/search/text/searchtextview.d.ts +219 -219
package/src/search/text/searchtextview.js +201 -201
package/src/spinner/spinnerview.d.ts +25 -25
package/src/spinner/spinnerview.js +38 -38
package/src/template.d.ts +942 -942
package/src/template.js +1294 -1294
package/src/textarea/textareaview.d.ts +88 -88
package/src/textarea/textareaview.js +142 -140
package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
package/src/toolbar/balloon/balloontoolbar.js +300 -300
package/src/toolbar/block/blockbuttonview.d.ts +35 -35
package/src/toolbar/block/blockbuttonview.js +41 -41
package/src/toolbar/block/blocktoolbar.d.ts +161 -161
package/src/toolbar/block/blocktoolbar.js +395 -395
package/src/toolbar/normalizetoolbarconfig.d.ts +40 -40
package/src/toolbar/normalizetoolbarconfig.js +52 -51
package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
package/src/toolbar/toolbarlinebreakview.js +28 -28
package/src/toolbar/toolbarseparatorview.d.ts +18 -18
package/src/toolbar/toolbarseparatorview.js +28 -28
package/src/toolbar/toolbarview.d.ts +266 -266
package/src/toolbar/toolbarview.js +719 -719
package/src/tooltipmanager.d.ts +180 -180
package/src/tooltipmanager.js +353 -353
package/src/view.d.ts +422 -422
package/src/view.js +396 -396
package/src/viewcollection.d.ts +139 -139
package/src/viewcollection.js +206 -206
package/theme/components/arialiveannouncer/arialiveannouncer.css +10 -0
package/theme/components/button/button.css +9 -1
package/theme/components/formheader/formheader.css +0 -4

package/src/editorui/bodycollection.d.ts CHANGED Viewed

@@ -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 ViewCollection from '../viewcollection';
-import type View from '../view';
-import { type Locale } from '@ckeditor/ckeditor5-utils';
-/**
- * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
- * from the DOM structure of the editor, like panels, icons, etc.
- *
- * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
- * Any plugin can add a {@link module:ui/view~View view} to this collection.
- * These views will render in a container placed directly in the `<body>` element.
- * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
- *
- * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
- *
- * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
- * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
- * elements created directly in the body and remove it when the last body collection will be
- * {@link ~BodyCollection#detachFromDom detached}.
- */
-export default class BodyCollection extends ViewCollection {
-    /**
-     * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
-     * See the view {@link module:ui/view~View#locale locale} property.
-     */
-    readonly locale: Locale;
-    /**
-     * The element holding elements of the body region.
-     */
-    private _bodyCollectionContainer?;
-    /**
-     * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
-     * @param initialItems The initial items of the collection.
-     */
-    constructor(locale: Locale, initialItems?: Iterable<View>);
-    /**
-     * The element holding elements of the body region.
-     */
-    get bodyCollectionContainer(): HTMLElement | undefined;
-    /**
-     * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
-     * the body collection.
-     */
-    attachToDom(): void;
-    /**
-     * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
-     * anymore to clean-up the DOM structure.
-     */
-    detachFromDom(): 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
+ */
+import ViewCollection from '../viewcollection';
+import type View from '../view';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
+ * from the DOM structure of the editor, like panels, icons, etc.
+ *
+ * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
+ * Any plugin can add a {@link module:ui/view~View view} to this collection.
+ * These views will render in a container placed directly in the `<body>` element.
+ * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
+ *
+ * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
+ *
+ * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
+ * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
+ * elements created directly in the body and remove it when the last body collection will be
+ * {@link ~BodyCollection#detachFromDom detached}.
+ */
+export default class BodyCollection extends ViewCollection {
+    /**
+     * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
+     * See the view {@link module:ui/view~View#locale locale} property.
+     */
+    readonly locale: Locale;
+    /**
+     * The element holding elements of the body region.
+     */
+    private _bodyCollectionContainer?;
+    /**
+     * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
+     * @param initialItems The initial items of the collection.
+     */
+    constructor(locale: Locale, initialItems?: Iterable<View>);
+    /**
+     * The element holding elements of the body region.
+     */
+    get bodyCollectionContainer(): HTMLElement | undefined;
+    /**
+     * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
+     * the body collection.
+     */
+    attachToDom(): void;
+    /**
+     * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
+     * anymore to clean-up the DOM structure.
+     */
+    detachFromDom(): void;
+}

package/src/editorui/bodycollection.js CHANGED Viewed

@@ -1,84 +1,84 @@
-/**
- * @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/editorui/bodycollection
- */
-/* globals document */
-import Template from '../template';
-import ViewCollection from '../viewcollection';
-import { createElement } from '@ckeditor/ckeditor5-utils';
-/**
- * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
- * from the DOM structure of the editor, like panels, icons, etc.
- *
- * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
- * Any plugin can add a {@link module:ui/view~View view} to this collection.
- * These views will render in a container placed directly in the `<body>` element.
- * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
- *
- * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
- *
- * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
- * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
- * elements created directly in the body and remove it when the last body collection will be
- * {@link ~BodyCollection#detachFromDom detached}.
- */
-export default class BodyCollection extends ViewCollection {
-    /**
-     * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
-     * @param initialItems The initial items of the collection.
-     */
-    constructor(locale, initialItems = []) {
-        super(initialItems);
-        this.locale = locale;
-    }
-    /**
-     * The element holding elements of the body region.
-     */
-    get bodyCollectionContainer() {
-        return this._bodyCollectionContainer;
-    }
-    /**
-     * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
-     * the body collection.
-     */
-    attachToDom() {
-        this._bodyCollectionContainer = new Template({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset_all',
-                    'ck-body',
-                    'ck-rounded-corners'
-                ],
-                dir: this.locale.uiLanguageDirection
-            },
-            children: this
-        }).render();
-        let wrapper = document.querySelector('.ck-body-wrapper');
-        if (!wrapper) {
-            wrapper = createElement(document, 'div', { class: 'ck-body-wrapper' });
-            document.body.appendChild(wrapper);
-        }
-        wrapper.appendChild(this._bodyCollectionContainer);
-    }
-    /**
-     * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
-     * anymore to clean-up the DOM structure.
-     */
-    detachFromDom() {
-        super.destroy();
-        if (this._bodyCollectionContainer) {
-            this._bodyCollectionContainer.remove();
-        }
-        const wrapper = document.querySelector('.ck-body-wrapper');
-        if (wrapper && wrapper.childElementCount == 0) {
-            wrapper.remove();
-        }
-    }
-}
+/**
+ * @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/editorui/bodycollection
+ */
+/* globals document */
+import Template from '../template';
+import ViewCollection from '../viewcollection';
+import { createElement } from '@ckeditor/ckeditor5-utils';
+/**
+ * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
+ * from the DOM structure of the editor, like panels, icons, etc.
+ *
+ * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
+ * Any plugin can add a {@link module:ui/view~View view} to this collection.
+ * These views will render in a container placed directly in the `<body>` element.
+ * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
+ *
+ * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
+ *
+ * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
+ * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
+ * elements created directly in the body and remove it when the last body collection will be
+ * {@link ~BodyCollection#detachFromDom detached}.
+ */
+export default class BodyCollection extends ViewCollection {
+    /**
+     * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
+     * @param initialItems The initial items of the collection.
+     */
+    constructor(locale, initialItems = []) {
+        super(initialItems);
+        this.locale = locale;
+    }
+    /**
+     * The element holding elements of the body region.
+     */
+    get bodyCollectionContainer() {
+        return this._bodyCollectionContainer;
+    }
+    /**
+     * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
+     * the body collection.
+     */
+    attachToDom() {
+        this._bodyCollectionContainer = new Template({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-reset_all',
+                    'ck-body',
+                    'ck-rounded-corners'
+                ],
+                dir: this.locale.uiLanguageDirection
+            },
+            children: this
+        }).render();
+        let wrapper = document.querySelector('.ck-body-wrapper');
+        if (!wrapper) {
+            wrapper = createElement(document, 'div', { class: 'ck-body-wrapper' });
+            document.body.appendChild(wrapper);
+        }
+        wrapper.appendChild(this._bodyCollectionContainer);
+    }
+    /**
+     * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
+     * anymore to clean-up the DOM structure.
+     */
+    detachFromDom() {
+        super.destroy();
+        if (this._bodyCollectionContainer) {
+            this._bodyCollectionContainer.remove();
+        }
+        const wrapper = document.querySelector('.ck-body-wrapper');
+        if (wrapper && wrapper.childElementCount == 0) {
+            wrapper.remove();
+        }
+    }
+}

package/src/editorui/boxed/boxededitoruiview.d.ts CHANGED Viewed

@@ -1,40 +1,40 @@
-/**
- * @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/editorui/boxed/boxededitoruiview
- */
-import EditorUIView from '../editoruiview';
-import type ViewCollection from '../../viewcollection';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-/**
- * The boxed editor UI view class. This class represents an editor interface
- * consisting of a toolbar and an editable area, enclosed within a box.
- */
-export default abstract class BoxedEditorUIView extends EditorUIView {
-    /**
-     * Collection of the child views located in the top (`.ck-editor__top`)
-     * area of the UI.
-     */
-    readonly top: ViewCollection;
-    /**
-     * Collection of the child views located in the main (`.ck-editor__main`)
-     * area of the UI.
-     */
-    readonly main: ViewCollection;
-    /**
-     * Voice label of the UI.
-     */
-    private readonly _voiceLabelView;
-    /**
-     * Creates an instance of the boxed editor UI view class.
-     *
-     * @param locale The locale instance..
-     */
-    constructor(locale: Locale);
-    /**
-     * Creates a voice label view instance.
-     */
-    private _createVoiceLabel;
-}
+/**
+ * @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/editorui/boxed/boxededitoruiview
+ */
+import EditorUIView from '../editoruiview';
+import type ViewCollection from '../../viewcollection';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The boxed editor UI view class. This class represents an editor interface
+ * consisting of a toolbar and an editable area, enclosed within a box.
+ */
+export default abstract class BoxedEditorUIView extends EditorUIView {
+    /**
+     * Collection of the child views located in the top (`.ck-editor__top`)
+     * area of the UI.
+     */
+    readonly top: ViewCollection;
+    /**
+     * Collection of the child views located in the main (`.ck-editor__main`)
+     * area of the UI.
+     */
+    readonly main: ViewCollection;
+    /**
+     * Voice label of the UI.
+     */
+    private readonly _voiceLabelView;
+    /**
+     * Creates an instance of the boxed editor UI view class.
+     *
+     * @param locale The locale instance..
+     */
+    constructor(locale: Locale);
+    /**
+     * Creates a voice label view instance.
+     */
+    private _createVoiceLabel;
+}

package/src/editorui/boxed/boxededitoruiview.js CHANGED Viewed

@@ -1,81 +1,81 @@
-/**
- * @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/editorui/boxed/boxededitoruiview
- */
-import EditorUIView from '../editoruiview';
-import LabelView from '../../label/labelview';
-/**
- * The boxed editor UI view class. This class represents an editor interface
- * consisting of a toolbar and an editable area, enclosed within a box.
- */
-export default class BoxedEditorUIView extends EditorUIView {
-    /**
-     * Creates an instance of the boxed editor UI view class.
-     *
-     * @param locale The locale instance..
-     */
-    constructor(locale) {
-        super(locale);
-        this.top = this.createCollection();
-        this.main = this.createCollection();
-        this._voiceLabelView = this._createVoiceLabel();
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset',
-                    'ck-editor',
-                    'ck-rounded-corners'
-                ],
-                role: 'application',
-                dir: locale.uiLanguageDirection,
-                lang: locale.uiLanguage,
-                'aria-labelledby': this._voiceLabelView.id
-            },
-            children: [
-                this._voiceLabelView,
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-editor__top',
-                            'ck-reset_all'
-                        ],
-                        role: 'presentation'
-                    },
-                    children: this.top
-                },
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-editor__main'
-                        ],
-                        role: 'presentation'
-                    },
-                    children: this.main
-                }
-            ]
-        });
-    }
-    /**
-     * Creates a voice label view instance.
-     */
-    _createVoiceLabel() {
-        const t = this.t;
-        const voiceLabel = new LabelView();
-        voiceLabel.text = t('Rich Text Editor');
-        voiceLabel.extendTemplate({
-            attributes: {
-                class: 'ck-voice-label'
-            }
-        });
-        return voiceLabel;
-    }
-}
+/**
+ * @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/editorui/boxed/boxededitoruiview
+ */
+import EditorUIView from '../editoruiview';
+import LabelView from '../../label/labelview';
+/**
+ * The boxed editor UI view class. This class represents an editor interface
+ * consisting of a toolbar and an editable area, enclosed within a box.
+ */
+export default class BoxedEditorUIView extends EditorUIView {
+    /**
+     * Creates an instance of the boxed editor UI view class.
+     *
+     * @param locale The locale instance..
+     */
+    constructor(locale) {
+        super(locale);
+        this.top = this.createCollection();
+        this.main = this.createCollection();
+        this._voiceLabelView = this._createVoiceLabel();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-reset',
+                    'ck-editor',
+                    'ck-rounded-corners'
+                ],
+                role: 'application',
+                dir: locale.uiLanguageDirection,
+                lang: locale.uiLanguage,
+                'aria-labelledby': this._voiceLabelView.id
+            },
+            children: [
+                this._voiceLabelView,
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-editor__top',
+                            'ck-reset_all'
+                        ],
+                        role: 'presentation'
+                    },
+                    children: this.top
+                },
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-editor__main'
+                        ],
+                        role: 'presentation'
+                    },
+                    children: this.main
+                }
+            ]
+        });
+    }
+    /**
+     * Creates a voice label view instance.
+     */
+    _createVoiceLabel() {
+        const t = this.t;
+        const voiceLabel = new LabelView();
+        voiceLabel.text = t('Rich Text Editor');
+        voiceLabel.extendTemplate({
+            attributes: {
+                class: 'ck-voice-label'
+            }
+        });
+        return voiceLabel;
+    }
+}