npm - @ckeditor/ckeditor5-ui - Versions diffs - 38.1.1 → 38.2.0-alpha.1 - Mend

@ckeditor/ckeditor5-ui 38.1.1 → 38.2.0-alpha.1

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 (134) hide show

package/lang/contexts.json +2 -1
package/package.json +4 -3
package/src/augmentation.d.ts +86 -86
package/src/augmentation.js +5 -5
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 +178 -178
package/src/button/button.js +5 -5
package/src/button/buttonview.d.ts +177 -177
package/src/button/buttonview.js +231 -231
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 -110
package/src/colorpicker/colorpickerview.js +270 -253
package/src/colorpicker/utils.d.ts +43 -35
package/src/colorpicker/utils.js +99 -99
package/src/colorselector/colorgridsfragmentview.d.ts +194 -0
package/src/colorselector/colorgridsfragmentview.js +290 -0
package/src/colorselector/colorpickerfragmentview.d.ts +128 -0
package/src/colorselector/colorpickerfragmentview.js +205 -0
package/src/colorselector/colorselectorview.d.ts +242 -0
package/src/colorselector/colorselectorview.js +256 -0
package/src/colorselector/documentcolorcollection.d.ts +70 -0
package/src/colorselector/documentcolorcollection.js +42 -0
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 +96 -96
package/src/dropdown/dropdownview.d.ts +315 -315
package/src/dropdown/dropdownview.js +378 -378
package/src/dropdown/utils.d.ts +221 -221
package/src/dropdown/utils.js +437 -434
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 +282 -282
package/src/editorui/editorui.js +410 -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 +294 -294
package/src/focuscycler.d.ts +183 -183
package/src/focuscycler.js +220 -220
package/src/formheader/formheaderview.d.ts +53 -53
package/src/formheader/formheaderview.js +63 -63
package/src/icon/iconview.d.ts +78 -78
package/src/icon/iconview.js +112 -112
package/src/iframe/iframeview.d.ts +50 -50
package/src/iframe/iframeview.js +63 -63
package/src/index.d.ts +63 -62
package/src/index.js +62 -61
package/src/input/inputview.d.ts +121 -121
package/src/input/inputview.js +106 -106
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 +182 -182
package/src/labeledfield/labeledfieldview.js +157 -157
package/src/labeledfield/utils.d.ts +93 -93
package/src/labeledfield/utils.js +131 -131
package/src/labeledinput/labeledinputview.d.ts +125 -125
package/src/labeledinput/labeledinputview.js +125 -125
package/src/list/listitemview.d.ts +35 -35
package/src/list/listitemview.js +40 -40
package/src/list/listseparatorview.d.ts +18 -18
package/src/list/listseparatorview.js +28 -28
package/src/list/listview.d.ts +65 -65
package/src/list/listview.js +90 -90
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 +988 -988
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 -132
package/src/panel/sticky/stickypanelview.js +272 -139
package/src/template.d.ts +942 -942
package/src/template.js +1294 -1294
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 +391 -391
package/src/toolbar/normalizetoolbarconfig.d.ts +39 -39
package/src/toolbar/normalizetoolbarconfig.js +51 -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 +265 -265
package/src/toolbar/toolbarview.js +717 -717
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/colorpicker/colorpicker.css +10 -0
package/theme/components/colorselector/colorselector.css +35 -0

package/src/view.js CHANGED Viewed

@@ -1,396 +1,396 @@
-/**
- * @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
- */
-/* eslint-disable @typescript-eslint/no-invalid-void-type */
-/**
- * @module ui/view
- */
-import ViewCollection from './viewcollection';
-import Template from './template';
-import { CKEditorError, Collection, DomEmitterMixin, ObservableMixin, isIterable } from '@ckeditor/ckeditor5-utils';
-import '../theme/globals/globals.css';
-/**
- * The basic view class, which represents an HTML element created out of a
- * {@link module:ui/view~View#template}. Views are building blocks of the user interface and handle
- * interaction
- *
- * Views {@link module:ui/view~View#registerChild aggregate} children in
- * {@link module:ui/view~View#createCollection collections} and manage the life cycle of DOM
- * listeners e.g. by handling rendering and destruction.
- *
- * See the {@link module:ui/template~TemplateDefinition} syntax to learn more about shaping view
- * elements, attributes and listeners.
- *
- * ```ts
- * class SampleView extends View {
- * 	constructor( locale ) {
- * 		super( locale );
- *
- * 		const bind = this.bindTemplate;
- *
- * 		// Views define their interface (state) using observable attributes.
- * 		this.set( 'elementClass', 'bar' );
- *
- * 		this.setTemplate( {
- * 			tag: 'p',
- *
- * 			// The element of the view can be defined with its children.
- * 			children: [
- * 				'Hello',
- * 				{
- * 					tag: 'b',
- * 					children: [ 'world!' ]
- * 				}
- * 			],
- * 			attributes: {
- * 				class: [
- * 					'foo',
- *
- * 					// Observable attributes control the state of the view in DOM.
- * 					bind.to( 'elementClass' )
- * 				]
- * 			},
- * 			on: {
- * 				// Views listen to DOM events and propagate them.
- * 				click: bind.to( 'clicked' )
- * 			}
- * 		} );
- * 	}
- * }
- *
- * const view = new SampleView( locale );
- *
- * view.render();
- *
- * // Append <p class="foo bar">Hello<b>world</b></p> to the <body>
- * document.body.appendChild( view.element );
- *
- * // Change the class attribute to <p class="foo baz">Hello<b>world</b></p>
- * view.elementClass = 'baz';
- *
- * // Respond to the "click" event in DOM by executing a custom action.
- * view.on( 'clicked', () => {
- * 	console.log( 'The view has been clicked!' );
- * } );
- * ```
- */
-export default class View extends DomEmitterMixin(ObservableMixin()) {
-    /**
-     * Creates an instance of the {@link module:ui/view~View} class.
-     *
-     * Also see {@link #render}.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale) {
-        super();
-        this.element = null;
-        this.isRendered = false;
-        this.locale = locale;
-        this.t = locale && locale.t;
-        this._viewCollections = new Collection();
-        this._unboundChildren = this.createCollection();
-        // Pass parent locale to its children.
-        this._viewCollections.on('add', (evt, collection) => {
-            collection.locale = locale;
-            collection.t = locale && locale.t;
-        });
-        this.decorate('render');
-    }
-    /**
-     * Shorthand for {@link module:ui/template~Template.bind}, a binding
-     * {@link module:ui/template~BindChain interface} pre–configured for the view instance.
-     *
-     * It provides {@link module:ui/template~BindChain#to `to()`} and
-     * {@link module:ui/template~BindChain#if `if()`} methods that initialize bindings with
-     * observable attributes and attach DOM listeners.
-     *
-     * ```ts
-     * class SampleView extends View {
-     * 	constructor( locale ) {
-     * 		super( locale );
-     *
-     * 		const bind = this.bindTemplate;
-     *
-     * 		// These {@link module:utils/observablemixin~Observable observable} attributes will control
-     * 		// the state of the view in DOM.
-     * 		this.set( {
-     * 			elementClass: 'foo',
-     * 		 	isEnabled: true
-     * 		 } );
-     *
-     * 		this.setTemplate( {
-     * 			tag: 'p',
-     *
-     * 			attributes: {
-     * 				// The class HTML attribute will follow elementClass
-     * 				// and isEnabled view attributes.
-     * 				class: [
-     * 					bind.to( 'elementClass' )
-     * 					bind.if( 'isEnabled', 'present-when-enabled' )
-     * 				]
-     * 			},
-     *
-     * 			on: {
-     * 				// The view will fire the "clicked" event upon clicking <p> in DOM.
-     * 				click: bind.to( 'clicked' )
-     * 			}
-     * 		} );
-     * 	}
-     * }
-     * ```
-     */
-    get bindTemplate() {
-        if (this._bindTemplate) {
-            return this._bindTemplate;
-        }
-        return (this._bindTemplate = Template.bind(this, this));
-    }
-    /**
-     * Creates a new collection of views, which can be used as
-     * {@link module:ui/template~Template#children} of this view.
-     *
-     * ```ts
-     * class SampleView extends View {
-     * 	constructor( locale ) {
-     * 		super( locale );
-     *
-     * 		const child = new ChildView( locale );
-     * 		this.items = this.createCollection( [ child ] );
-     *
-     * 		this.setTemplate( {
-     * 			tag: 'p',
-     *
-     * 			// `items` collection will render here.
-     * 			children: this.items
-     * 		} );
-     * 	}
-     * }
-     *
-     * const view = new SampleView( locale );
-     * view.render();
-     *
-     * // It will append <p><child#element></p> to the <body>.
-     * document.body.appendChild( view.element );
-     * ```
-     *
-     * @param views Initial views of the collection.
-     * @returns A new collection of view instances.
-     */
-    createCollection(views) {
-        const collection = new ViewCollection(views);
-        this._viewCollections.add(collection);
-        return collection;
-    }
-    /**
-     * Registers a new child view under the view instance. Once registered, a child
-     * view is managed by its parent, including {@link #render rendering}
-     * and {@link #destroy destruction}.
-     *
-     * To revert this, use {@link #deregisterChild}.
-     *
-     * ```ts
-     * class SampleView extends View {
-     * 	constructor( locale ) {
-     * 		super( locale );
-     *
-     * 		this.childA = new SomeChildView( locale );
-     * 		this.childB = new SomeChildView( locale );
-     *
-     * 		this.setTemplate( { tag: 'p' } );
-     *
-     * 		// Register the children.
-     * 		this.registerChild( [ this.childA, this.childB ] );
-     * 	}
-     *
-     * 	render() {
-     * 		super.render();
-     *
-     * 		this.element.appendChild( this.childA.element );
-     * 		this.element.appendChild( this.childB.element );
-     * 	}
-     * }
-     *
-     * const view = new SampleView( locale );
-     *
-     * view.render();
-     *
-     * // Will append <p><childA#element><b></b><childB#element></p>.
-     * document.body.appendChild( view.element );
-     * ```
-     *
-     * **Note**: There's no need to add child views if they're already referenced in the
-     * {@link #template}:
-     *
-     * ```ts
-     * class SampleView extends View {
-     * 	constructor( locale ) {
-     * 		super( locale );
-     *
-     * 		this.childA = new SomeChildView( locale );
-     * 		this.childB = new SomeChildView( locale );
-     *
-     * 		this.setTemplate( {
-     * 			tag: 'p',
-     *
-     * 			// These children will be added automatically. There's no
-     * 			// need to call {@link #registerChild} for any of them.
-     * 			children: [ this.childA, this.childB ]
-     * 		} );
-     * 	}
-     *
-     * 	// ...
-     * }
-     * ```
-     *
-     * @param children Children views to be registered.
-     */
-    registerChild(children) {
-        if (!isIterable(children)) {
-            children = [children];
-        }
-        for (const child of children) {
-            this._unboundChildren.add(child);
-        }
-    }
-    /**
-     * The opposite of {@link #registerChild}. Removes a child view from this view instance.
-     * Once removed, the child is no longer managed by its parent, e.g. it can safely
-     * become a child of another parent view.
-     *
-     * @see #registerChild
-     * @param children Child views to be removed.
-     */
-    deregisterChild(children) {
-        if (!isIterable(children)) {
-            children = [children];
-        }
-        for (const child of children) {
-            this._unboundChildren.remove(child);
-        }
-    }
-    /**
-     * Sets the {@link #template} of the view with with given definition.
-     *
-     * A shorthand for:
-     *
-     * ```ts
-     * view.setTemplate( definition );
-     * ```
-     *
-     * @param definition Definition of view's template.
-     */
-    setTemplate(definition) {
-        this.template = new Template(definition);
-    }
-    /**
-     * {@link module:ui/template~Template.extend Extends} the {@link #template} of the view with
-     * with given definition.
-     *
-     * A shorthand for:
-     *
-     * ```ts
-     * Template.extend( view.template, definition );
-     * ```
-     *
-     * **Note**: Is requires the {@link #template} to be already set. See {@link #setTemplate}.
-     *
-     * @param definition Definition which extends the {@link #template}.
-     */
-    extendTemplate(definition) {
-        Template.extend(this.template, definition);
-    }
-    /**
-     * Recursively renders the view.
-     *
-     * Once the view is rendered:
-     * * the {@link #element} becomes an HTML element out of {@link #template},
-     * * the {@link #isRendered} flag is set `true`.
-     *
-     * **Note**: The children of the view:
-     * * defined directly in the {@link #template}
-     * * residing in collections created by the {@link #createCollection} method,
-     * * and added by {@link #registerChild}
-     * are also rendered in the process.
-     *
-     * In general, `render()` method is the right place to keep the code which refers to the
-     * {@link #element} and should be executed at the very beginning of the view's life cycle.
-     *
-     * It is possible to {@link module:ui/template~Template.extend} the {@link #template} before
-     * the view is rendered. To allow an early customization of the view (e.g. by its parent),
-     * such references should be done in `render()`.
-     *
-     * ```ts
-     * class SampleView extends View {
-     * 	constructor() {
-     * 		this.setTemplate( {
-     * 			// ...
-     * 		} );
-     * 	},
-     *
-     * 	render() {
-     * 		// View#element becomes available.
-     * 		super.render();
-     *
-     * 		// The "scroll" listener depends on #element.
-     * 		this.listenTo( window, 'scroll', () => {
-     * 			// A reference to #element would render the #template and make it non-extendable.
-     * 			if ( window.scrollY > 0 ) {
-     * 				this.element.scrollLeft = 100;
-     * 			} else {
-     * 				this.element.scrollLeft = 0;
-     * 			}
-     * 		} );
-     * 	}
-     * }
-     *
-     * const view = new SampleView();
-     *
-     * // Let's customize the view before it gets rendered.
-     * view.extendTemplate( {
-     * 	attributes: {
-     * 		class: [
-     * 			'additional-class'
-     * 		]
-     * 	}
-     * } );
-     *
-     * // Late rendering allows customization of the view.
-     * view.render();
-     * ```
-     */
-    render() {
-        if (this.isRendered) {
-            /**
-             * This View has already been rendered.
-             *
-             * @error ui-view-render-already-rendered
-             */
-            throw new CKEditorError('ui-view-render-already-rendered', this);
-        }
-        // Render #element of the view.
-        if (this.template) {
-            this.element = this.template.render();
-            // Auto–register view children from #template.
-            this.registerChild(this.template.getViews());
-        }
-        this.isRendered = true;
-    }
-    /**
-     * Recursively destroys the view instance and child views added by {@link #registerChild} and
-     * residing in collections created by the {@link #createCollection}.
-     *
-     * Destruction disables all event listeners:
-     * * created on the view, e.g. `view.on( 'event', () => {} )`,
-     * * defined in the {@link #template} for DOM events.
-     */
-    destroy() {
-        this.stopListening();
-        this._viewCollections.map(c => c.destroy());
-        // Template isn't obligatory for views.
-        if (this.template && this.template._revertData) {
-            this.template.revert(this.element);
-        }
-    }
-}
+/**
+ * @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
+ */
+/* eslint-disable @typescript-eslint/no-invalid-void-type */
+/**
+ * @module ui/view
+ */
+import ViewCollection from './viewcollection.js';
+import Template from './template.js';
+import { CKEditorError, Collection, DomEmitterMixin, ObservableMixin, isIterable } from '@ckeditor/ckeditor5-utils';
+import '../theme/globals/globals.css';
+/**
+ * The basic view class, which represents an HTML element created out of a
+ * {@link module:ui/view~View#template}. Views are building blocks of the user interface and handle
+ * interaction
+ *
+ * Views {@link module:ui/view~View#registerChild aggregate} children in
+ * {@link module:ui/view~View#createCollection collections} and manage the life cycle of DOM
+ * listeners e.g. by handling rendering and destruction.
+ *
+ * See the {@link module:ui/template~TemplateDefinition} syntax to learn more about shaping view
+ * elements, attributes and listeners.
+ *
+ * ```ts
+ * class SampleView extends View {
+ * 	constructor( locale ) {
+ * 		super( locale );
+ *
+ * 		const bind = this.bindTemplate;
+ *
+ * 		// Views define their interface (state) using observable attributes.
+ * 		this.set( 'elementClass', 'bar' );
+ *
+ * 		this.setTemplate( {
+ * 			tag: 'p',
+ *
+ * 			// The element of the view can be defined with its children.
+ * 			children: [
+ * 				'Hello',
+ * 				{
+ * 					tag: 'b',
+ * 					children: [ 'world!' ]
+ * 				}
+ * 			],
+ * 			attributes: {
+ * 				class: [
+ * 					'foo',
+ *
+ * 					// Observable attributes control the state of the view in DOM.
+ * 					bind.to( 'elementClass' )
+ * 				]
+ * 			},
+ * 			on: {
+ * 				// Views listen to DOM events and propagate them.
+ * 				click: bind.to( 'clicked' )
+ * 			}
+ * 		} );
+ * 	}
+ * }
+ *
+ * const view = new SampleView( locale );
+ *
+ * view.render();
+ *
+ * // Append <p class="foo bar">Hello<b>world</b></p> to the <body>
+ * document.body.appendChild( view.element );
+ *
+ * // Change the class attribute to <p class="foo baz">Hello<b>world</b></p>
+ * view.elementClass = 'baz';
+ *
+ * // Respond to the "click" event in DOM by executing a custom action.
+ * view.on( 'clicked', () => {
+ * 	console.log( 'The view has been clicked!' );
+ * } );
+ * ```
+ */
+export default class View extends DomEmitterMixin(ObservableMixin()) {
+    /**
+     * Creates an instance of the {@link module:ui/view~View} class.
+     *
+     * Also see {@link #render}.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super();
+        this.element = null;
+        this.isRendered = false;
+        this.locale = locale;
+        this.t = locale && locale.t;
+        this._viewCollections = new Collection();
+        this._unboundChildren = this.createCollection();
+        // Pass parent locale to its children.
+        this._viewCollections.on('add', (evt, collection) => {
+            collection.locale = locale;
+            collection.t = locale && locale.t;
+        });
+        this.decorate('render');
+    }
+    /**
+     * Shorthand for {@link module:ui/template~Template.bind}, a binding
+     * {@link module:ui/template~BindChain interface} pre–configured for the view instance.
+     *
+     * It provides {@link module:ui/template~BindChain#to `to()`} and
+     * {@link module:ui/template~BindChain#if `if()`} methods that initialize bindings with
+     * observable attributes and attach DOM listeners.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor( locale ) {
+     * 		super( locale );
+     *
+     * 		const bind = this.bindTemplate;
+     *
+     * 		// These {@link module:utils/observablemixin~Observable observable} attributes will control
+     * 		// the state of the view in DOM.
+     * 		this.set( {
+     * 			elementClass: 'foo',
+     * 		 	isEnabled: true
+     * 		 } );
+     *
+     * 		this.setTemplate( {
+     * 			tag: 'p',
+     *
+     * 			attributes: {
+     * 				// The class HTML attribute will follow elementClass
+     * 				// and isEnabled view attributes.
+     * 				class: [
+     * 					bind.to( 'elementClass' )
+     * 					bind.if( 'isEnabled', 'present-when-enabled' )
+     * 				]
+     * 			},
+     *
+     * 			on: {
+     * 				// The view will fire the "clicked" event upon clicking <p> in DOM.
+     * 				click: bind.to( 'clicked' )
+     * 			}
+     * 		} );
+     * 	}
+     * }
+     * ```
+     */
+    get bindTemplate() {
+        if (this._bindTemplate) {
+            return this._bindTemplate;
+        }
+        return (this._bindTemplate = Template.bind(this, this));
+    }
+    /**
+     * Creates a new collection of views, which can be used as
+     * {@link module:ui/template~Template#children} of this view.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor( locale ) {
+     * 		super( locale );
+     *
+     * 		const child = new ChildView( locale );
+     * 		this.items = this.createCollection( [ child ] );
+     *
+     * 		this.setTemplate( {
+     * 			tag: 'p',
+     *
+     * 			// `items` collection will render here.
+     * 			children: this.items
+     * 		} );
+     * 	}
+     * }
+     *
+     * const view = new SampleView( locale );
+     * view.render();
+     *
+     * // It will append <p><child#element></p> to the <body>.
+     * document.body.appendChild( view.element );
+     * ```
+     *
+     * @param views Initial views of the collection.
+     * @returns A new collection of view instances.
+     */
+    createCollection(views) {
+        const collection = new ViewCollection(views);
+        this._viewCollections.add(collection);
+        return collection;
+    }
+    /**
+     * Registers a new child view under the view instance. Once registered, a child
+     * view is managed by its parent, including {@link #render rendering}
+     * and {@link #destroy destruction}.
+     *
+     * To revert this, use {@link #deregisterChild}.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor( locale ) {
+     * 		super( locale );
+     *
+     * 		this.childA = new SomeChildView( locale );
+     * 		this.childB = new SomeChildView( locale );
+     *
+     * 		this.setTemplate( { tag: 'p' } );
+     *
+     * 		// Register the children.
+     * 		this.registerChild( [ this.childA, this.childB ] );
+     * 	}
+     *
+     * 	render() {
+     * 		super.render();
+     *
+     * 		this.element.appendChild( this.childA.element );
+     * 		this.element.appendChild( this.childB.element );
+     * 	}
+     * }
+     *
+     * const view = new SampleView( locale );
+     *
+     * view.render();
+     *
+     * // Will append <p><childA#element><b></b><childB#element></p>.
+     * document.body.appendChild( view.element );
+     * ```
+     *
+     * **Note**: There's no need to add child views if they're already referenced in the
+     * {@link #template}:
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor( locale ) {
+     * 		super( locale );
+     *
+     * 		this.childA = new SomeChildView( locale );
+     * 		this.childB = new SomeChildView( locale );
+     *
+     * 		this.setTemplate( {
+     * 			tag: 'p',
+     *
+     * 			// These children will be added automatically. There's no
+     * 			// need to call {@link #registerChild} for any of them.
+     * 			children: [ this.childA, this.childB ]
+     * 		} );
+     * 	}
+     *
+     * 	// ...
+     * }
+     * ```
+     *
+     * @param children Children views to be registered.
+     */
+    registerChild(children) {
+        if (!isIterable(children)) {
+            children = [children];
+        }
+        for (const child of children) {
+            this._unboundChildren.add(child);
+        }
+    }
+    /**
+     * The opposite of {@link #registerChild}. Removes a child view from this view instance.
+     * Once removed, the child is no longer managed by its parent, e.g. it can safely
+     * become a child of another parent view.
+     *
+     * @see #registerChild
+     * @param children Child views to be removed.
+     */
+    deregisterChild(children) {
+        if (!isIterable(children)) {
+            children = [children];
+        }
+        for (const child of children) {
+            this._unboundChildren.remove(child);
+        }
+    }
+    /**
+     * Sets the {@link #template} of the view with with given definition.
+     *
+     * A shorthand for:
+     *
+     * ```ts
+     * view.setTemplate( definition );
+     * ```
+     *
+     * @param definition Definition of view's template.
+     */
+    setTemplate(definition) {
+        this.template = new Template(definition);
+    }
+    /**
+     * {@link module:ui/template~Template.extend Extends} the {@link #template} of the view with
+     * with given definition.
+     *
+     * A shorthand for:
+     *
+     * ```ts
+     * Template.extend( view.template, definition );
+     * ```
+     *
+     * **Note**: Is requires the {@link #template} to be already set. See {@link #setTemplate}.
+     *
+     * @param definition Definition which extends the {@link #template}.
+     */
+    extendTemplate(definition) {
+        Template.extend(this.template, definition);
+    }
+    /**
+     * Recursively renders the view.
+     *
+     * Once the view is rendered:
+     * * the {@link #element} becomes an HTML element out of {@link #template},
+     * * the {@link #isRendered} flag is set `true`.
+     *
+     * **Note**: The children of the view:
+     * * defined directly in the {@link #template}
+     * * residing in collections created by the {@link #createCollection} method,
+     * * and added by {@link #registerChild}
+     * are also rendered in the process.
+     *
+     * In general, `render()` method is the right place to keep the code which refers to the
+     * {@link #element} and should be executed at the very beginning of the view's life cycle.
+     *
+     * It is possible to {@link module:ui/template~Template.extend} the {@link #template} before
+     * the view is rendered. To allow an early customization of the view (e.g. by its parent),
+     * such references should be done in `render()`.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor() {
+     * 		this.setTemplate( {
+     * 			// ...
+     * 		} );
+     * 	},
+     *
+     * 	render() {
+     * 		// View#element becomes available.
+     * 		super.render();
+     *
+     * 		// The "scroll" listener depends on #element.
+     * 		this.listenTo( window, 'scroll', () => {
+     * 			// A reference to #element would render the #template and make it non-extendable.
+     * 			if ( window.scrollY > 0 ) {
+     * 				this.element.scrollLeft = 100;
+     * 			} else {
+     * 				this.element.scrollLeft = 0;
+     * 			}
+     * 		} );
+     * 	}
+     * }
+     *
+     * const view = new SampleView();
+     *
+     * // Let's customize the view before it gets rendered.
+     * view.extendTemplate( {
+     * 	attributes: {
+     * 		class: [
+     * 			'additional-class'
+     * 		]
+     * 	}
+     * } );
+     *
+     * // Late rendering allows customization of the view.
+     * view.render();
+     * ```
+     */
+    render() {
+        if (this.isRendered) {
+            /**
+             * This View has already been rendered.
+             *
+             * @error ui-view-render-already-rendered
+             */
+            throw new CKEditorError('ui-view-render-already-rendered', this);
+        }
+        // Render #element of the view.
+        if (this.template) {
+            this.element = this.template.render();
+            // Auto–register view children from #template.
+            this.registerChild(this.template.getViews());
+        }
+        this.isRendered = true;
+    }
+    /**
+     * Recursively destroys the view instance and child views added by {@link #registerChild} and
+     * residing in collections created by the {@link #createCollection}.
+     *
+     * Destruction disables all event listeners:
+     * * created on the view, e.g. `view.on( 'event', () => {} )`,
+     * * defined in the {@link #template} for DOM events.
+     */
+    destroy() {
+        this.stopListening();
+        this._viewCollections.map(c => c.destroy());
+        // Template isn't obligatory for views.
+        if (this.template && this.template._revertData) {
+            this.template.revert(this.element);
+        }
+    }
+}