@ckeditor/ckeditor5-ui 48.8.1-alpha.4 → 49.0.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 (273) hide show
  1. package/LICENSE.md +1 -1
  2. package/dist/arialiveannouncer.d.ts +89 -90
  3. package/dist/augmentation.d.ts +86 -86
  4. package/dist/autocomplete/autocompleteview.d.ts +69 -70
  5. package/dist/badge/badge.d.ts +119 -121
  6. package/dist/bindings/addkeyboardhandlingforgrid.d.ts +22 -22
  7. package/dist/bindings/clickoutsidehandler.d.ts +24 -26
  8. package/dist/bindings/csstransitiondisablermixin.d.ts +47 -36
  9. package/dist/bindings/draggableviewmixin.d.ts +45 -37
  10. package/dist/bindings/preventdefault.d.ts +30 -30
  11. package/dist/bindings/submithandler.d.ts +49 -49
  12. package/dist/button/button.d.ts +167 -167
  13. package/dist/button/buttonlabel.d.ts +28 -28
  14. package/dist/button/buttonlabelview.d.ts +26 -26
  15. package/dist/button/buttonview.d.ts +191 -192
  16. package/dist/button/filedialogbuttonview.d.ts +107 -99
  17. package/dist/button/listitembuttonview.d.ts +72 -73
  18. package/dist/button/switchbuttonview.d.ts +39 -40
  19. package/dist/collapsible/collapsibleview.d.ts +62 -63
  20. package/dist/colorgrid/colorgridview.d.ts +116 -117
  21. package/dist/colorgrid/colors.d.ts +28 -0
  22. package/dist/colorgrid/colortileview.d.ts +21 -21
  23. package/dist/colorgrid/utils.d.ts +47 -35
  24. package/dist/colorpicker/colorpickerview.d.ts +154 -157
  25. package/dist/colorpicker/utils.d.ts +37 -37
  26. package/dist/colorselector/colorgridsfragmentview.d.ts +191 -191
  27. package/dist/colorselector/colorpickerfragmentview.d.ts +129 -129
  28. package/dist/colorselector/colorselectorview.d.ts +226 -229
  29. package/dist/colorselector/documentcolorcollection.d.ts +52 -59
  30. package/dist/componentfactory.d.ts +76 -76
  31. package/dist/dialog/dialog.d.ts +311 -288
  32. package/dist/dialog/dialogactionsview.d.ts +61 -62
  33. package/dist/dialog/dialogcontentview.d.ts +22 -22
  34. package/dist/dialog/dialogview.d.ts +254 -251
  35. package/dist/dropdown/button/dropdownbutton.d.ts +17 -17
  36. package/dist/dropdown/button/dropdownbuttonview.d.ts +41 -41
  37. package/dist/dropdown/button/splitbuttonview.d.ts +154 -155
  38. package/dist/dropdown/dropdownpanelfocusable.d.ts +16 -16
  39. package/dist/dropdown/dropdownpanelview.d.ts +56 -56
  40. package/dist/dropdown/dropdownview.d.ts +337 -326
  41. package/dist/dropdown/menu/dropdownmenubehaviors.d.ts +43 -43
  42. package/dist/dropdown/menu/dropdownmenubuttonview.d.ts +28 -29
  43. package/dist/dropdown/menu/dropdownmenulistitembuttonview.d.ts +11 -12
  44. package/dist/dropdown/menu/dropdownmenulistitemview.d.ts +16 -17
  45. package/dist/dropdown/menu/dropdownmenulistview.d.ts +19 -19
  46. package/dist/dropdown/menu/dropdownmenunestedmenupanelview.d.ts +27 -28
  47. package/dist/dropdown/menu/dropdownmenunestedmenuview.d.ts +125 -126
  48. package/dist/dropdown/menu/dropdownmenurootlistview.d.ts +132 -132
  49. package/dist/dropdown/menu/utils.d.ts +112 -112
  50. package/dist/dropdown/utils.d.ts +270 -272
  51. package/dist/editableui/editableuiview.d.ts +78 -67
  52. package/dist/editableui/inline/inlineeditableuiview.d.ts +38 -36
  53. package/dist/editorui/accessibilityhelp/accessibilityhelp.d.ts +49 -50
  54. package/dist/editorui/accessibilityhelp/accessibilityhelpcontentview.d.ts +30 -30
  55. package/dist/editorui/bodycollection.d.ts +167 -86
  56. package/dist/editorui/boxed/boxededitoruiview.d.ts +35 -35
  57. package/dist/editorui/editorui.d.ts +382 -351
  58. package/dist/editorui/editoruiview.d.ts +48 -53
  59. package/dist/editorui/evaluationbadge.d.ts +28 -28
  60. package/dist/editorui/poweredby.d.ts +25 -25
  61. package/dist/focuscycler.d.ts +265 -270
  62. package/dist/formheader/formheaderview.d.ts +52 -53
  63. package/dist/formrow/formrowview.d.ts +51 -52
  64. package/dist/highlightedtext/buttonlabelwithhighlightview.d.ts +25 -25
  65. package/dist/highlightedtext/highlightedtextview.d.ts +30 -34
  66. package/dist/highlightedtext/labelwithhighlightview.d.ts +21 -21
  67. package/dist/icon/iconview.d.ts +82 -83
  68. package/dist/iframe/iframeview.d.ts +42 -42
  69. package/dist/index-content.css +3 -0
  70. package/dist/index-content.css.map +1 -0
  71. package/dist/index-editor.css +3241 -2329
  72. package/dist/index-editor.css.map +1 -0
  73. package/dist/index.css +2940 -2032
  74. package/dist/index.css.map +1 -1
  75. package/dist/index.d.ts +144 -136
  76. package/dist/index.js +17821 -17732
  77. package/dist/index.js.map +1 -1
  78. package/dist/input/inputbase.d.ts +114 -114
  79. package/dist/input/inputview.d.ts +27 -28
  80. package/dist/inputnumber/inputnumberview.d.ts +44 -44
  81. package/dist/inputtext/inputtextview.d.ts +13 -13
  82. package/dist/label/labelview.d.ts +30 -31
  83. package/dist/labeledfield/labeledfieldview.d.ts +179 -180
  84. package/dist/labeledfield/utils.d.ts +112 -112
  85. package/dist/labeledinput/labeledinputview.d.ts +119 -120
  86. package/dist/legacyerrors.d.ts +0 -4
  87. package/dist/list/listitemgroupview.d.ts +54 -54
  88. package/dist/list/listitemview.d.ts +31 -31
  89. package/dist/list/listseparatorview.d.ts +13 -13
  90. package/dist/list/listview.d.ts +118 -119
  91. package/dist/menubar/menubarmenubuttonview.d.ts +27 -28
  92. package/dist/menubar/menubarmenulistitembuttonview.d.ts +15 -16
  93. package/dist/menubar/menubarmenulistitemfiledialogbuttonview.d.ts +17 -18
  94. package/dist/menubar/menubarmenulistitemview.d.ts +19 -20
  95. package/dist/menubar/menubarmenulistview.d.ts +24 -24
  96. package/dist/menubar/menubarmenupanelview.d.ts +46 -47
  97. package/dist/menubar/menubarmenuview.d.ts +112 -113
  98. package/dist/menubar/menubarview.d.ts +144 -145
  99. package/dist/menubar/utils.d.ts +455 -455
  100. package/dist/model.d.ts +19 -18
  101. package/dist/notification/notification.d.ts +200 -200
  102. package/dist/overlayhost.d.ts +210 -0
  103. package/dist/panel/balloon/balloonpanelview.d.ts +700 -692
  104. package/dist/panel/balloon/contextualballoon.d.ts +296 -298
  105. package/dist/panel/sticky/stickypanelview.d.ts +162 -151
  106. package/dist/search/filteredview.d.ts +23 -23
  107. package/dist/search/filtergroupanditemnames.d.ts +11 -11
  108. package/dist/search/searchinfoview.d.ts +39 -39
  109. package/dist/search/searchresultsview.d.ts +49 -49
  110. package/dist/search/text/searchtextqueryview.d.ts +63 -63
  111. package/dist/search/text/searchtextview.d.ts +202 -203
  112. package/dist/spinner/spinnerview.d.ts +19 -20
  113. package/dist/tabs/tabbuttonview.d.ts +53 -0
  114. package/dist/tabs/tabpanelview.d.ts +45 -0
  115. package/dist/template.d.ts +897 -902
  116. package/dist/textarea/textareaview.d.ts +100 -96
  117. package/dist/toolbar/balloon/balloontoolbar.d.ts +122 -122
  118. package/dist/toolbar/block/blockbuttonview.d.ts +29 -30
  119. package/dist/toolbar/block/blocktoolbar.d.ts +166 -166
  120. package/dist/toolbar/normalizetoolbarconfig.d.ts +35 -35
  121. package/dist/toolbar/toolbarlinebreakview.d.ts +13 -13
  122. package/dist/toolbar/toolbarseparatorview.d.ts +13 -13
  123. package/dist/toolbar/toolbarview.d.ts +270 -271
  124. package/dist/tooltipmanager.d.ts +317 -193
  125. package/dist/translations/af.js +1 -1
  126. package/dist/translations/af.umd.js +5 -3
  127. package/dist/translations/ar.js +1 -1
  128. package/dist/translations/ar.umd.js +5 -3
  129. package/dist/translations/ast.js +1 -1
  130. package/dist/translations/ast.umd.js +5 -3
  131. package/dist/translations/az.js +1 -1
  132. package/dist/translations/az.umd.js +5 -3
  133. package/dist/translations/be.js +1 -1
  134. package/dist/translations/be.umd.js +5 -3
  135. package/dist/translations/bg.js +1 -1
  136. package/dist/translations/bg.umd.js +5 -3
  137. package/dist/translations/bn.js +1 -1
  138. package/dist/translations/bn.umd.js +5 -3
  139. package/dist/translations/bs.js +1 -1
  140. package/dist/translations/bs.umd.js +5 -3
  141. package/dist/translations/ca.js +1 -1
  142. package/dist/translations/ca.umd.js +5 -3
  143. package/dist/translations/cs.js +1 -1
  144. package/dist/translations/cs.umd.js +5 -3
  145. package/dist/translations/da.js +1 -1
  146. package/dist/translations/da.umd.js +5 -3
  147. package/dist/translations/de-ch.js +1 -1
  148. package/dist/translations/de-ch.umd.js +5 -3
  149. package/dist/translations/de.js +1 -1
  150. package/dist/translations/de.umd.js +5 -3
  151. package/dist/translations/el.js +1 -1
  152. package/dist/translations/el.umd.js +5 -3
  153. package/dist/translations/en-au.js +1 -1
  154. package/dist/translations/en-au.umd.js +5 -3
  155. package/dist/translations/en-gb.js +1 -1
  156. package/dist/translations/en-gb.umd.js +5 -3
  157. package/dist/translations/en.js +1 -1
  158. package/dist/translations/en.umd.js +5 -3
  159. package/dist/translations/eo.js +1 -1
  160. package/dist/translations/eo.umd.js +5 -3
  161. package/dist/translations/es-co.js +1 -1
  162. package/dist/translations/es-co.umd.js +5 -3
  163. package/dist/translations/es.js +1 -1
  164. package/dist/translations/es.umd.js +5 -3
  165. package/dist/translations/et.js +1 -1
  166. package/dist/translations/et.umd.js +5 -3
  167. package/dist/translations/eu.js +1 -1
  168. package/dist/translations/eu.umd.js +5 -3
  169. package/dist/translations/fa.js +1 -1
  170. package/dist/translations/fa.umd.js +5 -3
  171. package/dist/translations/fi.js +1 -1
  172. package/dist/translations/fi.umd.js +5 -3
  173. package/dist/translations/fr.js +1 -1
  174. package/dist/translations/fr.umd.js +5 -3
  175. package/dist/translations/gl.js +1 -1
  176. package/dist/translations/gl.umd.js +5 -3
  177. package/dist/translations/gu.js +1 -1
  178. package/dist/translations/gu.umd.js +5 -3
  179. package/dist/translations/he.js +1 -1
  180. package/dist/translations/he.umd.js +5 -3
  181. package/dist/translations/hi.js +1 -1
  182. package/dist/translations/hi.umd.js +5 -3
  183. package/dist/translations/hr.js +1 -1
  184. package/dist/translations/hr.umd.js +5 -3
  185. package/dist/translations/hu.js +1 -1
  186. package/dist/translations/hu.umd.js +5 -3
  187. package/dist/translations/hy.js +1 -1
  188. package/dist/translations/hy.umd.js +5 -3
  189. package/dist/translations/id.js +1 -1
  190. package/dist/translations/id.umd.js +5 -3
  191. package/dist/translations/it.js +1 -1
  192. package/dist/translations/it.umd.js +5 -3
  193. package/dist/translations/ja.js +1 -1
  194. package/dist/translations/ja.umd.js +5 -3
  195. package/dist/translations/jv.js +1 -1
  196. package/dist/translations/jv.umd.js +5 -3
  197. package/dist/translations/kk.js +1 -1
  198. package/dist/translations/kk.umd.js +5 -3
  199. package/dist/translations/km.js +1 -1
  200. package/dist/translations/km.umd.js +5 -3
  201. package/dist/translations/kn.js +1 -1
  202. package/dist/translations/kn.umd.js +5 -3
  203. package/dist/translations/ko.js +1 -1
  204. package/dist/translations/ko.umd.js +5 -3
  205. package/dist/translations/ku.js +1 -1
  206. package/dist/translations/ku.umd.js +5 -3
  207. package/dist/translations/lt.js +1 -1
  208. package/dist/translations/lt.umd.js +5 -3
  209. package/dist/translations/lv.js +1 -1
  210. package/dist/translations/lv.umd.js +5 -3
  211. package/dist/translations/ms.js +1 -1
  212. package/dist/translations/ms.umd.js +5 -3
  213. package/dist/translations/nb.js +1 -1
  214. package/dist/translations/nb.umd.js +5 -3
  215. package/dist/translations/ne.js +1 -1
  216. package/dist/translations/ne.umd.js +5 -3
  217. package/dist/translations/nl.js +1 -1
  218. package/dist/translations/nl.umd.js +5 -3
  219. package/dist/translations/no.js +1 -1
  220. package/dist/translations/no.umd.js +5 -3
  221. package/dist/translations/oc.js +1 -1
  222. package/dist/translations/oc.umd.js +5 -3
  223. package/dist/translations/pl.js +1 -1
  224. package/dist/translations/pl.umd.js +5 -3
  225. package/dist/translations/pt-br.js +1 -1
  226. package/dist/translations/pt-br.umd.js +5 -3
  227. package/dist/translations/pt.js +1 -1
  228. package/dist/translations/pt.umd.js +5 -3
  229. package/dist/translations/ro.js +1 -1
  230. package/dist/translations/ro.umd.js +5 -3
  231. package/dist/translations/ru.js +1 -1
  232. package/dist/translations/ru.umd.js +5 -3
  233. package/dist/translations/si.js +1 -1
  234. package/dist/translations/si.umd.js +5 -3
  235. package/dist/translations/sk.js +1 -1
  236. package/dist/translations/sk.umd.js +5 -3
  237. package/dist/translations/sl.js +1 -1
  238. package/dist/translations/sl.umd.js +5 -3
  239. package/dist/translations/sq.js +1 -1
  240. package/dist/translations/sq.umd.js +5 -3
  241. package/dist/translations/sr-latn.js +1 -1
  242. package/dist/translations/sr-latn.umd.js +5 -3
  243. package/dist/translations/sr.js +1 -1
  244. package/dist/translations/sr.umd.js +5 -3
  245. package/dist/translations/sv.js +1 -1
  246. package/dist/translations/sv.umd.js +5 -3
  247. package/dist/translations/th.js +1 -1
  248. package/dist/translations/th.umd.js +5 -3
  249. package/dist/translations/ti.js +1 -1
  250. package/dist/translations/ti.umd.js +5 -3
  251. package/dist/translations/tk.js +1 -1
  252. package/dist/translations/tk.umd.js +5 -3
  253. package/dist/translations/tr.js +1 -1
  254. package/dist/translations/tr.umd.js +5 -3
  255. package/dist/translations/tt.js +1 -1
  256. package/dist/translations/tt.umd.js +5 -3
  257. package/dist/translations/ug.js +1 -1
  258. package/dist/translations/ug.umd.js +5 -3
  259. package/dist/translations/uk.js +1 -1
  260. package/dist/translations/uk.umd.js +5 -3
  261. package/dist/translations/ur.js +1 -1
  262. package/dist/translations/ur.umd.js +5 -3
  263. package/dist/translations/uz.js +1 -1
  264. package/dist/translations/uz.umd.js +5 -3
  265. package/dist/translations/vi.js +1 -1
  266. package/dist/translations/vi.umd.js +5 -3
  267. package/dist/translations/zh-cn.js +1 -1
  268. package/dist/translations/zh-cn.umd.js +5 -3
  269. package/dist/translations/zh.js +1 -1
  270. package/dist/translations/zh.umd.js +5 -3
  271. package/dist/view.d.ts +384 -388
  272. package/dist/viewcollection.d.ts +134 -134
  273. package/package.json +8 -7
package/dist/view.d.ts CHANGED
@@ -1,394 +1,390 @@
1
1
  /**
2
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
- */
2
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
+ */
5
5
  /**
6
- * @module ui/view
7
- */
8
- import { ViewCollection } from './viewcollection.js';
9
- import { Template, type BindChain, type TemplateDefinition } from './template.js';
10
- import { Collection, type DecoratedMethodEvent, type Locale, type LocaleTranslate } from '@ckeditor/ckeditor5-utils';
11
- import '../theme/index.css';
12
- declare const View_base: import("@ckeditor/ckeditor5-utils").Mixed<{
13
- new (): import("@ckeditor/ckeditor5-utils").Observable;
14
- prototype: import("@ckeditor/ckeditor5-utils").Observable;
15
- }, import("@ckeditor/ckeditor5-utils").DomEmitter>;
6
+ * @module ui/view
7
+ */
8
+ import { ViewCollection } from "./viewcollection.js";
9
+ import { Template, type BindChain, type TemplateDefinition } from "./template.js";
10
+ import { Collection, type DecoratedMethodEvent, type Locale, type LocaleTranslate, type ObservableMixinConstructor, type DomEmitterMixinConstructor } from "@ckeditor/ckeditor5-utils";
11
+ declare const ViewBase: DomEmitterMixinConstructor<ObservableMixinConstructor>;
16
12
  /**
17
- * The basic view class, which represents an HTML element created out of a
18
- * {@link module:ui/view~View#template}. Views are building blocks of the user interface and handle
19
- * interaction
20
- *
21
- * Views {@link module:ui/view~View#registerChild aggregate} children in
22
- * {@link module:ui/view~View#createCollection collections} and manage the life cycle of DOM
23
- * listeners e.g. by handling rendering and destruction.
24
- *
25
- * See the {@link module:ui/template~TemplateDefinition} syntax to learn more about shaping view
26
- * elements, attributes and listeners.
27
- *
28
- * ```ts
29
- * class SampleView extends View {
30
- * constructor( locale ) {
31
- * super( locale );
32
- *
33
- * const bind = this.bindTemplate;
34
- *
35
- * // Views define their interface (state) using observable attributes.
36
- * this.set( 'elementClass', 'bar' );
37
- *
38
- * this.setTemplate( {
39
- * tag: 'p',
40
- *
41
- * // The element of the view can be defined with its children.
42
- * children: [
43
- * 'Hello',
44
- * {
45
- * tag: 'b',
46
- * children: [ 'world!' ]
47
- * }
48
- * ],
49
- * attributes: {
50
- * class: [
51
- * 'foo',
52
- *
53
- * // Observable attributes control the state of the view in DOM.
54
- * bind.to( 'elementClass' )
55
- * ]
56
- * },
57
- * on: {
58
- * // Views listen to DOM events and propagate them.
59
- * click: bind.to( 'clicked' )
60
- * }
61
- * } );
62
- * }
63
- * }
64
- *
65
- * const view = new SampleView( locale );
66
- *
67
- * view.render();
68
- *
69
- * // Append <p class="foo bar">Hello<b>world</b></p> to the <body>
70
- * document.body.appendChild( view.element );
71
- *
72
- * // Change the class attribute to <p class="foo baz">Hello<b>world</b></p>
73
- * view.elementClass = 'baz';
74
- *
75
- * // Respond to the "click" event in DOM by executing a custom action.
76
- * view.on( 'clicked', () => {
77
- * console.log( 'The view has been clicked!' );
78
- * } );
79
- * ```
80
- *
81
- * @property {TElement | null} element An HTML element of the view. `null` until {@link module:ui/view~View#render rendered}
82
- * from the {@link module:ui/view~View#template template}. The class-level example above illustrates typical usage. The
83
- * full description, fenced examples, and assignment note are in the block comment immediately above the `element` field
84
- * in the source.
85
- */
86
- export declare class View<TElement extends HTMLElement = HTMLElement> extends /* #__PURE__ */ View_base {
87
- element: TElement | null;
88
- /**
89
- * Set `true` when the view has already been {@link module:ui/view~View#render rendered}.
90
- *
91
- * @readonly
92
- */
93
- isRendered: boolean;
94
- /**
95
- * A set of tools to localize the user interface.
96
- *
97
- * Also see {@link module:core/editor/editor~Editor#locale}.
98
- *
99
- * @readonly
100
- */
101
- locale: Locale | undefined;
102
- /**
103
- * Shorthand for {@link module:utils/locale~Locale#t}.
104
- *
105
- * Note: If {@link #locale} instance hasn't been passed to the view this method may not
106
- * be available.
107
- *
108
- * @see module:utils/locale~Locale#t
109
- */
110
- t: LocaleTranslate | undefined;
111
- /**
112
- * Template of this view. It provides the {@link #element} representing
113
- * the view in DOM, which is {@link #render rendered}.
114
- */
115
- template?: Template;
116
- viewUid?: string;
117
- /**
118
- * Collections registered with {@link #createCollection}.
119
- */
120
- protected _viewCollections: Collection<ViewCollection>;
121
- /**
122
- * A collection of view instances, which have been added directly
123
- * into the {@link module:ui/template~Template#children}.
124
- */
125
- protected _unboundChildren: ViewCollection;
126
- /**
127
- * Cached {@link module:ui/template~BindChain bind chain} object created by the
128
- * {@link #template}. See {@link #bindTemplate}.
129
- */
130
- private _bindTemplate?;
131
- /**
132
- * Creates an instance of the {@link module:ui/view~View} class.
133
- *
134
- * Also see {@link #render}.
135
- *
136
- * @param locale The localization services instance.
137
- */
138
- constructor(locale?: Locale);
139
- /**
140
- * Shorthand for {@link module:ui/template~Template.bind}, a binding
141
- * {@link module:ui/template~BindChain interface} pre–configured for the view instance.
142
- *
143
- * It provides {@link module:ui/template~BindChain#to `to()`} and
144
- * {@link module:ui/template~BindChain#if `if()`} methods that initialize bindings with
145
- * observable attributes and attach DOM listeners.
146
- *
147
- * ```ts
148
- * class SampleView extends View {
149
- * constructor( locale ) {
150
- * super( locale );
151
- *
152
- * const bind = this.bindTemplate;
153
- *
154
- * // These {@link module:utils/observablemixin~Observable observable} attributes will control
155
- * // the state of the view in DOM.
156
- * this.set( {
157
- * elementClass: 'foo',
158
- * isEnabled: true
159
- * } );
160
- *
161
- * this.setTemplate( {
162
- * tag: 'p',
163
- *
164
- * attributes: {
165
- * // The class HTML attribute will follow elementClass
166
- * // and isEnabled view attributes.
167
- * class: [
168
- * bind.to( 'elementClass' )
169
- * bind.if( 'isEnabled', 'present-when-enabled' )
170
- * ]
171
- * },
172
- *
173
- * on: {
174
- * // The view will fire the "clicked" event upon clicking <p> in DOM.
175
- * click: bind.to( 'clicked' )
176
- * }
177
- * } );
178
- * }
179
- * }
180
- * ```
181
- */
182
- get bindTemplate(): BindChain<this>;
183
- /**
184
- * Creates a new collection of views, which can be used as
185
- * {@link module:ui/template~Template#children} of this view.
186
- *
187
- * ```ts
188
- * class SampleView extends View {
189
- * constructor( locale ) {
190
- * super( locale );
191
- *
192
- * const child = new ChildView( locale );
193
- * this.items = this.createCollection( [ child ] );
194
- *
195
- * this.setTemplate( {
196
- * tag: 'p',
197
- *
198
- * // `items` collection will render here.
199
- * children: this.items
200
- * } );
201
- * }
202
- * }
203
- *
204
- * const view = new SampleView( locale );
205
- * view.render();
206
- *
207
- * // It will append <p><child#element></p> to the <body>.
208
- * document.body.appendChild( view.element );
209
- * ```
210
- *
211
- * @param views Initial views of the collection.
212
- * @returns A new collection of view instances.
213
- */
214
- createCollection<T extends View = View>(views?: Iterable<T>): ViewCollection<T>;
215
- /**
216
- * Registers a new child view under the view instance. Once registered, a child
217
- * view is managed by its parent, including {@link #render rendering}
218
- * and {@link #destroy destruction}.
219
- *
220
- * To revert this, use {@link #deregisterChild}.
221
- *
222
- * ```ts
223
- * class SampleView extends View {
224
- * constructor( locale ) {
225
- * super( locale );
226
- *
227
- * this.childA = new SomeChildView( locale );
228
- * this.childB = new SomeChildView( locale );
229
- *
230
- * this.setTemplate( { tag: 'p' } );
231
- *
232
- * // Register the children.
233
- * this.registerChild( [ this.childA, this.childB ] );
234
- * }
235
- *
236
- * render() {
237
- * super.render();
238
- *
239
- * this.element.appendChild( this.childA.element );
240
- * this.element.appendChild( this.childB.element );
241
- * }
242
- * }
243
- *
244
- * const view = new SampleView( locale );
245
- *
246
- * view.render();
247
- *
248
- * // Will append <p><childA#element><b></b><childB#element></p>.
249
- * document.body.appendChild( view.element );
250
- * ```
251
- *
252
- * **Note**: There's no need to add child views if they're already referenced in the
253
- * {@link #template}:
254
- *
255
- * ```ts
256
- * class SampleView extends View {
257
- * constructor( locale ) {
258
- * super( locale );
259
- *
260
- * this.childA = new SomeChildView( locale );
261
- * this.childB = new SomeChildView( locale );
262
- *
263
- * this.setTemplate( {
264
- * tag: 'p',
265
- *
266
- * // These children will be added automatically. There's no
267
- * // need to call {@link #registerChild} for any of them.
268
- * children: [ this.childA, this.childB ]
269
- * } );
270
- * }
271
- *
272
- * // ...
273
- * }
274
- * ```
275
- *
276
- * @param children Children views to be registered.
277
- */
278
- registerChild(children: View | Iterable<View>): void;
279
- /**
280
- * The opposite of {@link #registerChild}. Removes a child view from this view instance.
281
- * Once removed, the child is no longer managed by its parent, e.g. it can safely
282
- * become a child of another parent view.
283
- *
284
- * @see #registerChild
285
- * @param children Child views to be removed.
286
- */
287
- deregisterChild(children: View | Iterable<View>): void;
288
- /**
289
- * Sets the {@link #template} of the view with with given definition.
290
- *
291
- * A shorthand for:
292
- *
293
- * ```ts
294
- * view.setTemplate( definition );
295
- * ```
296
- *
297
- * @param definition Definition of view's template.
298
- */
299
- setTemplate(definition: TemplateDefinition): void;
300
- /**
301
- * {@link module:ui/template~Template.extend Extends} the {@link #template} of the view with
302
- * with given definition.
303
- *
304
- * A shorthand for:
305
- *
306
- * ```ts
307
- * Template.extend( view.template, definition );
308
- * ```
309
- *
310
- * **Note**: Is requires the {@link #template} to be already set. See {@link #setTemplate}.
311
- *
312
- * @param definition Definition which extends the {@link #template}.
313
- */
314
- extendTemplate(definition: Partial<TemplateDefinition>): void;
315
- /**
316
- * Recursively renders the view.
317
- *
318
- * Once the view is rendered:
319
- * * the {@link #element} becomes an HTML element out of {@link #template},
320
- * * the {@link #isRendered} flag is set `true`.
321
- *
322
- * **Note**: The children of the view:
323
- * * defined directly in the {@link #template}
324
- * * residing in collections created by the {@link #createCollection} method,
325
- * * and added by {@link #registerChild}
326
- * are also rendered in the process.
327
- *
328
- * In general, `render()` method is the right place to keep the code which refers to the
329
- * {@link #element} and should be executed at the very beginning of the view's life cycle.
330
- *
331
- * It is possible to {@link module:ui/template~Template.extend} the {@link #template} before
332
- * the view is rendered. To allow an early customization of the view (e.g. by its parent),
333
- * such references should be done in `render()`.
334
- *
335
- * ```ts
336
- * class SampleView extends View {
337
- * constructor() {
338
- * this.setTemplate( {
339
- * // ...
340
- * } );
341
- * },
342
- *
343
- * render() {
344
- * // View#element becomes available.
345
- * super.render();
346
- *
347
- * // The "scroll" listener depends on #element.
348
- * this.listenTo( window, 'scroll', () => {
349
- * // A reference to #element would render the #template and make it non-extendable.
350
- * if ( window.scrollY > 0 ) {
351
- * this.element.scrollLeft = 100;
352
- * } else {
353
- * this.element.scrollLeft = 0;
354
- * }
355
- * } );
356
- * }
357
- * }
358
- *
359
- * const view = new SampleView();
360
- *
361
- * // Let's customize the view before it gets rendered.
362
- * view.extendTemplate( {
363
- * attributes: {
364
- * class: [
365
- * 'additional-class'
366
- * ]
367
- * }
368
- * } );
369
- *
370
- * // Late rendering allows customization of the view.
371
- * view.render();
372
- * ```
373
- */
374
- render(): void;
375
- /**
376
- * Recursively destroys the view instance and child views added by {@link #registerChild} and
377
- * residing in collections created by the {@link #createCollection}.
378
- *
379
- * Destruction disables all event listeners:
380
- * * created on the view, e.g. `view.on( 'event', () => {} )`,
381
- * * defined in the {@link #template} for DOM events.
382
- */
383
- destroy(): void;
13
+ * The basic view class, which represents an HTML element created out of a
14
+ * {@link module:ui/view~View#template}. Views are building blocks of the user interface and handle
15
+ * interaction
16
+ *
17
+ * Views {@link module:ui/view~View#registerChild aggregate} children in
18
+ * {@link module:ui/view~View#createCollection collections} and manage the life cycle of DOM
19
+ * listeners e.g. by handling rendering and destruction.
20
+ *
21
+ * See the {@link module:ui/template~TemplateDefinition} syntax to learn more about shaping view
22
+ * elements, attributes and listeners.
23
+ *
24
+ * ```ts
25
+ * class SampleView extends View {
26
+ * constructor( locale ) {
27
+ * super( locale );
28
+ *
29
+ * const bind = this.bindTemplate;
30
+ *
31
+ * // Views define their interface (state) using observable attributes.
32
+ * this.set( 'elementClass', 'bar' );
33
+ *
34
+ * this.setTemplate( {
35
+ * tag: 'p',
36
+ *
37
+ * // The element of the view can be defined with its children.
38
+ * children: [
39
+ * 'Hello',
40
+ * {
41
+ * tag: 'b',
42
+ * children: [ 'world!' ]
43
+ * }
44
+ * ],
45
+ * attributes: {
46
+ * class: [
47
+ * 'foo',
48
+ *
49
+ * // Observable attributes control the state of the view in DOM.
50
+ * bind.to( 'elementClass' )
51
+ * ]
52
+ * },
53
+ * on: {
54
+ * // Views listen to DOM events and propagate them.
55
+ * click: bind.to( 'clicked' )
56
+ * }
57
+ * } );
58
+ * }
59
+ * }
60
+ *
61
+ * const view = new SampleView( locale );
62
+ *
63
+ * view.render();
64
+ *
65
+ * // Append <p class="foo bar">Hello<b>world</b></p> to the <body>
66
+ * document.body.appendChild( view.element );
67
+ *
68
+ * // Change the class attribute to <p class="foo baz">Hello<b>world</b></p>
69
+ * view.elementClass = 'baz';
70
+ *
71
+ * // Respond to the "click" event in DOM by executing a custom action.
72
+ * view.on( 'clicked', () => {
73
+ * console.log( 'The view has been clicked!' );
74
+ * } );
75
+ * ```
76
+ *
77
+ * @property {TElement | null} element An HTML element of the view. `null` until {@link module:ui/view~View#render rendered}
78
+ * from the {@link module:ui/view~View#template template}. The class-level example above illustrates typical usage. The
79
+ * full description, fenced examples, and assignment note are in the block comment immediately above the `element` field
80
+ * in the source.
81
+ */
82
+ export declare class View<TElement extends HTMLElement = HTMLElement> extends ViewBase {
83
+ element: TElement | null;
84
+ /**
85
+ * Set `true` when the view has already been {@link module:ui/view~View#render rendered}.
86
+ *
87
+ * @readonly
88
+ */
89
+ isRendered: boolean;
90
+ /**
91
+ * A set of tools to localize the user interface.
92
+ *
93
+ * Also see {@link module:core/editor/editor~Editor#locale}.
94
+ *
95
+ * @readonly
96
+ */
97
+ locale: Locale | undefined;
98
+ /**
99
+ * Shorthand for {@link module:utils/locale~Locale#t}.
100
+ *
101
+ * Note: If {@link #locale} instance hasn't been passed to the view this method may not
102
+ * be available.
103
+ *
104
+ * @see module:utils/locale~Locale#t
105
+ */
106
+ t: LocaleTranslate | undefined;
107
+ /**
108
+ * Template of this view. It provides the {@link #element} representing
109
+ * the view in DOM, which is {@link #render rendered}.
110
+ */
111
+ template?: Template;
112
+ viewUid?: string;
113
+ /**
114
+ * Collections registered with {@link #createCollection}.
115
+ */
116
+ protected _viewCollections: Collection<ViewCollection>;
117
+ /**
118
+ * A collection of view instances, which have been added directly
119
+ * into the {@link module:ui/template~Template#children}.
120
+ */
121
+ protected _unboundChildren: ViewCollection;
122
+ /**
123
+ * Cached {@link module:ui/template~BindChain bind chain} object created by the
124
+ * {@link #template}. See {@link #bindTemplate}.
125
+ */
126
+ private _bindTemplate?;
127
+ /**
128
+ * Creates an instance of the {@link module:ui/view~View} class.
129
+ *
130
+ * Also see {@link #render}.
131
+ *
132
+ * @param locale The localization services instance.
133
+ */
134
+ constructor(locale?: Locale);
135
+ /**
136
+ * Shorthand for {@link module:ui/template~Template.bind}, a binding
137
+ * {@link module:ui/template~BindChain interface} pre–configured for the view instance.
138
+ *
139
+ * It provides {@link module:ui/template~BindChain#to `to()`} and
140
+ * {@link module:ui/template~BindChain#if `if()`} methods that initialize bindings with
141
+ * observable attributes and attach DOM listeners.
142
+ *
143
+ * ```ts
144
+ * class SampleView extends View {
145
+ * constructor( locale ) {
146
+ * super( locale );
147
+ *
148
+ * const bind = this.bindTemplate;
149
+ *
150
+ * // These {@link module:utils/observablemixin~Observable observable} attributes will control
151
+ * // the state of the view in DOM.
152
+ * this.set( {
153
+ * elementClass: 'foo',
154
+ * isEnabled: true
155
+ * } );
156
+ *
157
+ * this.setTemplate( {
158
+ * tag: 'p',
159
+ *
160
+ * attributes: {
161
+ * // The class HTML attribute will follow elementClass
162
+ * // and isEnabled view attributes.
163
+ * class: [
164
+ * bind.to( 'elementClass' )
165
+ * bind.if( 'isEnabled', 'present-when-enabled' )
166
+ * ]
167
+ * },
168
+ *
169
+ * on: {
170
+ * // The view will fire the "clicked" event upon clicking <p> in DOM.
171
+ * click: bind.to( 'clicked' )
172
+ * }
173
+ * } );
174
+ * }
175
+ * }
176
+ * ```
177
+ */
178
+ get bindTemplate(): BindChain<this>;
179
+ /**
180
+ * Creates a new collection of views, which can be used as
181
+ * {@link module:ui/template~Template#children} of this view.
182
+ *
183
+ * ```ts
184
+ * class SampleView extends View {
185
+ * constructor( locale ) {
186
+ * super( locale );
187
+ *
188
+ * const child = new ChildView( locale );
189
+ * this.items = this.createCollection( [ child ] );
190
+ *
191
+ * this.setTemplate( {
192
+ * tag: 'p',
193
+ *
194
+ * // `items` collection will render here.
195
+ * children: this.items
196
+ * } );
197
+ * }
198
+ * }
199
+ *
200
+ * const view = new SampleView( locale );
201
+ * view.render();
202
+ *
203
+ * // It will append <p><child#element></p> to the <body>.
204
+ * document.body.appendChild( view.element );
205
+ * ```
206
+ *
207
+ * @param views Initial views of the collection.
208
+ * @returns A new collection of view instances.
209
+ */
210
+ createCollection<T extends View = View>(views?: Iterable<T>): ViewCollection<T>;
211
+ /**
212
+ * Registers a new child view under the view instance. Once registered, a child
213
+ * view is managed by its parent, including {@link #render rendering}
214
+ * and {@link #destroy destruction}.
215
+ *
216
+ * To revert this, use {@link #deregisterChild}.
217
+ *
218
+ * ```ts
219
+ * class SampleView extends View {
220
+ * constructor( locale ) {
221
+ * super( locale );
222
+ *
223
+ * this.childA = new SomeChildView( locale );
224
+ * this.childB = new SomeChildView( locale );
225
+ *
226
+ * this.setTemplate( { tag: 'p' } );
227
+ *
228
+ * // Register the children.
229
+ * this.registerChild( [ this.childA, this.childB ] );
230
+ * }
231
+ *
232
+ * render() {
233
+ * super.render();
234
+ *
235
+ * this.element.appendChild( this.childA.element );
236
+ * this.element.appendChild( this.childB.element );
237
+ * }
238
+ * }
239
+ *
240
+ * const view = new SampleView( locale );
241
+ *
242
+ * view.render();
243
+ *
244
+ * // Will append <p><childA#element><b></b><childB#element></p>.
245
+ * document.body.appendChild( view.element );
246
+ * ```
247
+ *
248
+ * **Note**: There's no need to add child views if they're already referenced in the
249
+ * {@link #template}:
250
+ *
251
+ * ```ts
252
+ * class SampleView extends View {
253
+ * constructor( locale ) {
254
+ * super( locale );
255
+ *
256
+ * this.childA = new SomeChildView( locale );
257
+ * this.childB = new SomeChildView( locale );
258
+ *
259
+ * this.setTemplate( {
260
+ * tag: 'p',
261
+ *
262
+ * // These children will be added automatically. There's no
263
+ * // need to call {@link #registerChild} for any of them.
264
+ * children: [ this.childA, this.childB ]
265
+ * } );
266
+ * }
267
+ *
268
+ * // ...
269
+ * }
270
+ * ```
271
+ *
272
+ * @param children Children views to be registered.
273
+ */
274
+ registerChild(children: View | Iterable<View>): void;
275
+ /**
276
+ * The opposite of {@link #registerChild}. Removes a child view from this view instance.
277
+ * Once removed, the child is no longer managed by its parent, e.g. it can safely
278
+ * become a child of another parent view.
279
+ *
280
+ * @see #registerChild
281
+ * @param children Child views to be removed.
282
+ */
283
+ deregisterChild(children: View | Iterable<View>): void;
284
+ /**
285
+ * Sets the {@link #template} of the view with with given definition.
286
+ *
287
+ * A shorthand for:
288
+ *
289
+ * ```ts
290
+ * view.setTemplate( definition );
291
+ * ```
292
+ *
293
+ * @param definition Definition of view's template.
294
+ */
295
+ setTemplate(definition: TemplateDefinition): void;
296
+ /**
297
+ * {@link module:ui/template~Template.extend Extends} the {@link #template} of the view with
298
+ * with given definition.
299
+ *
300
+ * A shorthand for:
301
+ *
302
+ * ```ts
303
+ * Template.extend( view.template, definition );
304
+ * ```
305
+ *
306
+ * **Note**: Is requires the {@link #template} to be already set. See {@link #setTemplate}.
307
+ *
308
+ * @param definition Definition which extends the {@link #template}.
309
+ */
310
+ extendTemplate(definition: Partial<TemplateDefinition>): void;
311
+ /**
312
+ * Recursively renders the view.
313
+ *
314
+ * Once the view is rendered:
315
+ * * the {@link #element} becomes an HTML element out of {@link #template},
316
+ * * the {@link #isRendered} flag is set `true`.
317
+ *
318
+ * **Note**: The children of the view:
319
+ * * defined directly in the {@link #template}
320
+ * * residing in collections created by the {@link #createCollection} method,
321
+ * * and added by {@link #registerChild}
322
+ * are also rendered in the process.
323
+ *
324
+ * In general, `render()` method is the right place to keep the code which refers to the
325
+ * {@link #element} and should be executed at the very beginning of the view's life cycle.
326
+ *
327
+ * It is possible to {@link module:ui/template~Template.extend} the {@link #template} before
328
+ * the view is rendered. To allow an early customization of the view (e.g. by its parent),
329
+ * such references should be done in `render()`.
330
+ *
331
+ * ```ts
332
+ * class SampleView extends View {
333
+ * constructor() {
334
+ * this.setTemplate( {
335
+ * // ...
336
+ * } );
337
+ * },
338
+ *
339
+ * render() {
340
+ * // View#element becomes available.
341
+ * super.render();
342
+ *
343
+ * // The "scroll" listener depends on #element.
344
+ * this.listenTo( window, 'scroll', () => {
345
+ * // A reference to #element would render the #template and make it non-extendable.
346
+ * if ( window.scrollY > 0 ) {
347
+ * this.element.scrollLeft = 100;
348
+ * } else {
349
+ * this.element.scrollLeft = 0;
350
+ * }
351
+ * } );
352
+ * }
353
+ * }
354
+ *
355
+ * const view = new SampleView();
356
+ *
357
+ * // Let's customize the view before it gets rendered.
358
+ * view.extendTemplate( {
359
+ * attributes: {
360
+ * class: [
361
+ * 'additional-class'
362
+ * ]
363
+ * }
364
+ * } );
365
+ *
366
+ * // Late rendering allows customization of the view.
367
+ * view.render();
368
+ * ```
369
+ */
370
+ render(): void;
371
+ /**
372
+ * Recursively destroys the view instance and child views added by {@link #registerChild} and
373
+ * residing in collections created by the {@link #createCollection}.
374
+ *
375
+ * Destruction disables all event listeners:
376
+ * * created on the view, e.g. `view.on( 'event', () => {} )`,
377
+ * * defined in the {@link #template} for DOM events.
378
+ */
379
+ destroy(): void;
384
380
  }
385
381
  /**
386
- * Event fired by the {@link module:ui/view~View#render} method. Actual rendering is executed as a listener to
387
- * this event with the default priority.
388
- *
389
- * See {@link module:utils/observablemixin~Observable#decorate} for more information and samples.
390
- *
391
- * @eventName ~View#render
392
- */
393
- export type UIViewRenderEvent = DecoratedMethodEvent<View, 'render'>;
382
+ * Event fired by the {@link module:ui/view~View#render} method. Actual rendering is executed as a listener to
383
+ * this event with the default priority.
384
+ *
385
+ * See {@link module:utils/observablemixin~Observable#decorate} for more information and samples.
386
+ *
387
+ * @eventName ~View#render
388
+ */
389
+ export type UIViewRenderEvent = DecoratedMethodEvent<View, "render">;
394
390
  export {};